通过自定义按钮来实现箱子的移动

最新推荐文章于 2023-07-21 19:00:11 发布

✧͡ົ清 ͮ风⃕ັ

最新推荐文章于 2023-07-21 19:00:11 发布

阅读量220

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_44957026/article/details/102578385

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

通过自定义按钮来实现箱子的移动

1：效果图

在这里插入图片描述

2：代码

1)：HTML代码

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>自定义按键+推箱子</title>
	</head>

	<body>

		<div style="text-align: center; background-color: aqua; float: left; width: 100%;">
			<h1>自定义按键</h1>

			<input type="text" onkeyup="myFunction('up')" maxlength="1">上<br>
			<input type="text" onkeyup="myFunction('down')" maxlength="1">下<br>
			<input type="text" onkeyup="myFunction('left')" maxlength="1">左<br>
			<input type="text" onkeyup="myFunction('right')" maxlength="1">右<br>

			<button onclick="confirm()">确定修改</button>
		</div>
		
		<lable id="show" />
		<img id="img" src="img/open.gif" style="width: 80px;height: 80px;position: absolute;left:0px;top: 0px" />
		<script type="text/javascript" src="js/customKeyAndIndex.js"></script>
		
	</body>

</html>

2)：js代码

/**
 * Created by Administrator on 2019/10/15.
 */
var obj = document.getElementById("img");
obj.left = 0;
obj.top = 0;
var up, down, left, right;
var up1, down1, left1, right1;

function confirm() {
	up = up1;
	down = down1;
	left = left1;
	right = right1;
	alert(up + ";" + down + ";" + left + ";" + right);
	move();
}

function myFunction(str) {
	if(str == "up") {
		up1 = event.keyCode;
	}
	if(str == "down") {
		down1 = event.keyCode;
	}
	if(str == "left") {
		left1 = event.keyCode;
	}
	if(str == "right") {
		right1 = event.keyCode;
	}
}

function move() {
	console.log(event.keyCode);
	if(event.keyCode == left) {
		//左
		obj.left -= 80;
	}
	if(event.keyCode == up) {
		//上
		obj.top -= 80;
	}
	if(event.keyCode == right) {
		//右
		obj.left += 80;
	}
	if(event.keyCode == down) {
		//下
		obj.top += 80;
	}
	obj.style.left = obj.left + "px", obj.style.top = obj.top + "px";
}

document.onkeydown = move;

✧͡ົ清 ͮ风⃕ັ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过自定义按钮来实现箱子的移动

通过自定义按钮来实现箱子的移动1：效果图2：代码1)：HTML代码<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title>自定义按键+推箱子</title> </head> <body> ...
复制链接

扫一扫