JS 实现游戏流畅移动与按键立即响应_js游戏人物移速-优快云博客

本文链接：https://blog.youkuaiyun.com/a1309602336/article/details/143770150
AWSD 按键移动
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1 {
				width: 400px;
				height: 400px;
				background: yellowgreen;
				margin: 0 auto;
				position: relative;
			}

			.box2 {
				width: 50px;
				height: 50px;
				background: aqua;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"> </div>
		</div>
	</body>
	<script>
		var odiv1 = document.getElementsByClassName("box1")[0];
		var odiv2 = document.getElementsByClassName("box2")[0];
		var ax = 0; // 玩家加速方向
		var ay = 0;
		var speedx = 0; // 玩家移动速度
		var speedy = 0;
		// 四个键盘按键状态，1是按下，0是抬起
		var keya = 0;
		var keyw = 0;
		var keys = 0;
		var keyd = 0;
		
		// 游戏循环
		var int=self.setInterval("move()",10);
		
		function move(){
			var T = odiv2.offsetTop //盒子距离最顶部的距离
			var L = odiv2.offsetLeft // 盒子距离最左边的距离
			if (keya == 1 && keyd == 0) {
				ax -= 1;
			} else if (keya == 0 && keyd == 1) {
				ax += 1;
			}
			
			if (keyw == 1 && keys == 0) {
				ay -= 1;
			} else if (keyw == 0 && keys == 1) {
				ay += 1;
			}
			
			
			if (ax < -1) {
				ax = -1
			} else if (ax > 1) {
				ax = 1
			}
			
			if (ay < -1) {
				ay = -1;
			} else if (ay > 1) {
				ay = 1;
			}
			
			if (keya == 1 || keyd == 1) {
				speedx += ax;
			}
			
			if (keyw == 1 || keys == 1) {
				speedy += ay;
			}
			
			if(keya==0&&keyd==0){
				speedx=0;
				ax=0;
			}
			
			if(keyw==0&&keys==0){
				speedy=0;
				ay=0;
			}
			
			// 速度防止过快
			if (speedx > 5) {
				speedx = 5
			} else if (speedx < -5) {
				speedx = -5
			}
			
			if (speedy > 5) {
				speedy = 5
			} else if (speedy < -5) {
				speedy = -5
			}
			// console.log(speedx);
			
			// 位置防止出界
			if (T + speedy < 0) {
				T = 0;
			} else if (T + speedy > 500) {
				T = 500;
			} else {
				T += speedy;
			}
			
			if (L + speedx < 0) {
				L = 0;
			} else if (L + speedx > 500) {
				L = 500;
			} else {
				L += speedx;
			}
			
			odiv2.style.left = L + "px"
			odiv2.style.top = T + "px"
		}
		
		window.onkeydown = function(e) {
			// 通过监听按键按下时的操作
			var e = e || window.event;
			// 取消打印
			// alert(e.keyCode)

			console.log("按键按下：" + e.keyCode)
			//获取当前元素到body的距离 
			var T = odiv2.offsetTop //盒子距离最顶部的距离
			var L = odiv2.offsetLeft // 盒子距离最左边的距离
			if (e.keyCode == 87) { //判断当前按键是不是w按键
				// console.log('W')
				// var T = T - 5
				// if (T < 0) {
				// 	T = 0
				// }
				// odiv2.style.top = T + "px"
				// ay  -=1;
				keyw = 1;
			}
			if (e.keyCode == 83) { //判断当前按键是不是S按键
				// console.log('S')
				// var T = T + 5
				// if (T > odiv1.offsetWidth - odiv2.offsetWidth) {
				// 	T = odiv1.offsetWidth - odiv2.offsetWidth
				// }
				// odiv2.style.top = T + "px"
				// ay += 1;
				keys = 1;
			}
			if (e.keyCode == 65) { //判断当前按键是不是A按键
				// console.log('A')
				// var L = L - 5
				// if (L < 0) {
				// 	L = 0
				// }
				// odiv2.style.left = L + "px"
				// ax  -=1;
				keya = 1;
			}
			if (e.keyCode == 68) { //判断当前按键是不是D按键
				// console.log('D')
				// var L = L + 5
				// if (L > odiv1.offsetHeight - odiv2.offsetHeight) {
				// 	L = odiv1.offsetHeight - odiv2.offsetHeight
				// }
				// odiv2.style.left = L + "px"
				// ax += 1;
				keyd = 1;
			}

			
		}



		window.onkeyup = function(e) {
			var e = e || window.event;
			if (e.keyCode == 87) { //判断当前按键是不是w按键
				// console.log('W')
				// ay = 0;
				keyw=0;
			}
			if (e.keyCode == 83) { //判断当前按键是不是S按键
				// console.log('S')
				// ay = 0;
				keys=0;
			}
			if (e.keyCode == 65) { //判断当前按键是不是A按键
				// console.log('A')
				// ax = 0;
				keya=0;
			}
			if (e.keyCode == 68) { //判断当前按键是不是D按键
				// console.log('D')
				// ax = 0;
				keyd=0;
			}
		}
	</script>
</html>