js做坦克移动

万能守恒定律

于 2022-11-21 09:23:03 发布

阅读量325

点赞数 4

分类专栏： js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_50951790/article/details/127957883

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

今天做一个js坦克移动的demo

首先在image文件夹中放入以下五张图片素材

创建html文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>坦克</title>
	<style>
		body{
			background-image: url(images/grassland.png);
		}
		#mytank{
			/* 相对于页面窗口 */
			/* position: relative; */

			/* 父容器 */
			position: absolute;
			left: 10px;
			top: 200px;
		}
	</style>
</head>
<body>
	<img src="images/right.png" id="mytank">
</body>

<script>
	// 获取属性
	var Omg  = document.querySelector('img')
	// 获取图片
	var style = getComputedStyle(Omg)
	// 初始化图片位置
	
	var L = parseInt(style.left)
	var T = parseInt(style.top)
	//禁用右键 
	window.document.oncontextmenu = function(){
		return false
	}
	// 控制方向键
	window.onkeydown = function(e){
		switch(e.key){
			case "w":
			case 'ArrowUp':
				Omg.src="images/up.png"
				T=T-10
				Omg.style.top = T + 'px'
				break;

			case "s":
			case 'ArrowDown':
				Omg.src="images/down.png"
				T=T+10
				Omg.style.top = T + 'px'
				break;

			case "a":
			case 'ArrowLeft':
				Omg.src="images/left.png"
				L=L-10
				Omg.style.left = L + 'px'
				break;

			case "d":
			case 'ArrowRight':
				Omg.src="images/right.png"
				L=L+10
				Omg.style.left = L + 'px'
				break;
		}
	}
</script>
</html>

效果图（可移动）