js 实现键盘控制方块移动

怼烎@ 2022-05-09 03:04 192阅读 0赞

### 需求： ###

在网页上有一个方块，我们需要键盘上下左右键控制方块的移动。

## 代码： ##

<!doctype html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<title>移动方块</title>
    	</head>
    
    	<body>
    		<script type="text/javascript">
    			/* 创建一个div */
    			var div = document.createElement("div");
    			/* 将div添加到网页中 */
    			document.body.appendChild(div);
    			/* 设置div的样式 */
    			div.style.width = "100px";
    			div.style.height = "100px";
    			div.style.backgroundColor = "red";
    			div.style.position = "absolute";
    			div.style.top = "0";
    			div.style.left = "0";
    			/* 键盘按下事件 */
    			document.onkeydown = function(e) {
    				/* 方块移动的速度，即每按一次方块移动的像素，值越大移动速度越快 */
    				var speed = 10;
    				switch(e.which){
    					// 上
    					case 38:
    					  div.style.top = parseInt(div.style.top) - speed + "px";
    					  break;
    					// 下
    					case 40:
    						div.style.top = parseInt(div.style.top) + speed + "px";
    						break;
    					// 左
    					case 37:
    						div.style.left = parseInt(div.style.left) - speed + "px";
    						break;
    					// 右
    					case 39:
    						div.style.left = parseInt(div.style.left) + speed + "px";
    						break;
    				}
    			}	
    		</script>
    	</body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS实现键盘移动光标

通过键盘的上下左右，实现对光标的移动，当点击回车时，进入所选的对应页面。左边是菜单栏，右边是具体数据。 ![Center][] 左边的菜单栏布局 ![Ce

╰半橙微兮°/ 2023年10月17日 08:29/ 0 赞/ 119 阅读

相关 Unity模块代码——键盘控制物体移动

把该文件挂载到指定物体上即可， public moveSpeed = 50; // function:控制移动，上(w)下(s)左(a)右(d)前(q

分手后的思念是犯贱/ 2023年09月23日 15:05/ 0 赞/ 108 阅读

相关 cocoa view响应键盘事件_用pygame开发自己的游戏-3.用键盘控制方块的移动

一、引言前面文章中我们学会让方块随着时间运动，本文我们实现用键盘控制方块的移动。二、pygame事件概念事件在计算机术语常用来指系统中发生的重要事情，比如用

朱雀/ 2023年01月01日 12:51/ 0 赞/ 119 阅读

相关 JavaScript经典案例：键盘控制元素移动

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

淡淡的烟草味﹌/ 2022年12月23日 12:25/ 0 赞/ 176 阅读

相关键盘事件控制元素移动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Myth丶恋晨/ 2022年12月13日 14:16/ 0 赞/ 139 阅读

相关 js键盘事件--实现div移动

用键盘事件实现div移动键盘事件：onkeydown 按键按下，连续按下时，第一次和第二次会停顿一下，防止误操作 onkeyup 按键松开这两个事件一般会绑定给可

野性酷女/ 2022年11月29日 14:29/ 0 赞/ 200 阅读

相关 html点击控制盒子左右移动,JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例...

本文实例讲述了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动。分享给大家供大家参考，具体如下： 1. 盒子跟着鼠标移动 content="width=device-wid

分手后的思念是犯贱/ 2022年10月09日 02:54/ 0 赞/ 201 阅读

相关 js 控制移动

主要用到定时器setInterval(定时执行的函数, 时间) clearInterval(定时器对象) 关闭一个定时器对象.offsetLeft 当前距离父元素的

Myth丶恋晨/ 2022年06月13日 22:12/ 0 赞/ 206 阅读

相关 js 实现键盘控制方块移动

需求：在网页上有一个方块，我们需要键盘上下左右键控制方块的移动。代码： <!doctype html> <html> <h

怼烎@/ 2022年05月09日 03:04/ 0 赞/ 193 阅读

相关 js如何实现利用键盘控制div移动

js如何实现利用键盘控制div移动描述： div通过键盘事件上下左右实现div块的移动

红太狼/ 2020年06月06日 18:42/ 0 赞/ 853 阅读