利用JavaScript实现键盘控制小方块移动

缺乏、安全感 2023-02-14 01:16 20阅读 0赞

## 利用JavaScript实现键盘控制小方块移动 ##

**HTML代码：**

<div class="box"></div>

**CSS代码：**

*{ 
                margin: 0;
                padding: 0;
            }
            .box{ 
                width: 200px;
                height: 200px;
                background: red;
            }

**JS代码：**

// 获取元素
        var oBox=document.getElementsByClassName("box")[0];
    
        var x=0;y=0;
    
        // 确定上38下40左37右39 键的 keyCode值
        document.onkeydown=function(ev){ 
            // console.log(ev.keyCode);
            if(ev.keyCode==37){ 
                // 左键
                x==0?x=0:x--;
                // console.log(ev.keyCode);
                oBox.style.marginLeft=x+"px";
            }else if(ev.keyCode==38){ 
                // 上键
                y--;
                oBox.style.marginTop=y+"px";
            }else if(ev.keyCode==39){ 
                // 右键
                x++;
                oBox.style.marginLeft=x+"px";
            }else if(ev.keyCode==40){ 
                // 下键
                y++;
                oBox.style.marginTop=y+"px";
            }
        }

**注意：** 实现键盘控制小方块移动关键点在于怎样判断按下的是哪一个键，同时使用DOM修改元素的css样式。

**视频讲解链接：  
https://www.bilibili.com/video/BV1bt4y1C7pj/**

发表评论取消回复

表情：

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

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

相关阅读

相关 JS实现键盘移动光标

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

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

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

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

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

相关 java swing方块移动

看了一堆教程，没看到怎么用repaint重新绘制，这个是我找了别人的代码，一行一行给注释，把300多行代码缩成50多行得到的结果直接上代码，代码里面有注释 pac

柔情只为你懂/ 2023年06月19日 01:56/ 0 赞/ 98 阅读

相关 javascript实现小游戏俄罗斯方块

俄罗斯方块 style <style> div { display:block; back

矫情吗；*/ 2023年05月30日 06:08/ 0 赞/ 202 阅读

相关利用JavaScript实现键盘控制小方块移动

利用JavaScript实现键盘控制小方块移动 HTML代码： <div class="box"></div> CSS代码： {

缺乏、安全感/ 2023年02月14日 01:16/ 0 赞/ 21 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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