<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/util.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<!--
定义一个div,四个button,实现四方向移动
-->
<script>
function createDiv(left, top) {
var div = document.createElement ("div");
var styles = div.style;
styles.width = "200px";
styles.height = "200px";
styles.backgroundColor = "orange";
styles.border = "1px solid";
styles.borderRadius = "50%";
styles.position = "fixed";
styles.left = left + "px";
styles.top = top + "px";
return div;
}
function getStyle(ele) {
if (window.getComputedStyle)
return window.getComputedStyle (ele);
return ele.currentStyle;
}
(function () {
var div = createDiv (random (0, 300), random (0, 300));
document.body.appendChild (div);
var styles = getStyle (div);
var clientWidth = document.documentElement.clientWidth;
var clientHeight = document.documentElement.clientHeight;
var divWidth = div.offsetWidth;
var divHeight = div.offsetHeight;
var maxTop = clientHeight - divHeight;
var maxLeft = clientWidth - divWidth;
//单次移动的距离
const SPEED = 6;
function moveUpDown(isDown) {
clientHeight = document.documentElement.clientHeight;
maxTop = clientHeight - divHeight;
//先获取现在的top值
var top = parseInt (styles.top);
//修改top值。
if (isDown) {
top += SPEED;
if (top > maxTop)
top = maxTop;
} else {
top -= SPEED;
if (top < 0)
top = 0;
}
//设置给div
div.style.top = top + "px";
}
function moveLeftRight(isRight) {
clientWidth = document.documentElement.clientWidth;
maxLeft = clientWidth - divWidth;
var left = parseInt (styles.left);
if (isRight) {
left += SPEED;
if (left > maxLeft)
left = maxLeft;
} else {
left -= SPEED;
if (left < 0)
left = 0;
}
//设置给div
div.style.left = left + "px";
}
//添加按键事件
document.onkeydown = function (e) {
e = e || window.event;
var keyCode = e.keyCode;
const A_CODE = 65, W_CODE = 87, S_CODE = 83, D_CODE = 68;
const LEFT_ARROW = 37, UP_ARROW = 38, RIGHT_ARROW = 39, DOWN_ARROW = 40;
switch (keyCode) {
case A_CODE:
case LEFT_ARROW:
moveLeftRight(false);
break;
case W_CODE:
case UP_ARROW:
moveUpDown(false);
break;
case D_CODE:
case RIGHT_ARROW:
moveLeftRight(true);
break;
case S_CODE:
case DOWN_ARROW:
moveUpDown(true);
break;
}
}
}) ();
</script>
</body>
</html>
使用按键wasd和上下左右键控制小球上下左右移动
最新推荐文章于 2022-12-30 15:27:46 发布
关键词由CSDN通过智能技术生成