简单的使用键盘控制方块移动

最新推荐文章于 2019-10-15 21:35:25 发布
最新推荐文章于 2019-10-15 21:35:25 发布
阅读量2k 收藏
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duenyang/article/details/52397586
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘控制方块移动</title>
    <style>
    #box{
        width: 50px;
        height: 50px;
        background-color: green;
        position: relative;
        left: 50px;
        top: 50px;
    }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        // var box=document.getElementById('box');//此部分代码的效果会用小小的停顿，下面的为改进代码
        // var l=0;
        // var t=0;
        // document.οnkeydοwn=function(){
        //     var e=window.event||ev;
        //     // console.log(e.keyCode);
        //     if (e.keyCode==37) {
        //         l-=10;
        //         box.style.                               
        //         left=l+'px';
        //     }
        //     if (e.keyCode==38) {
        //         t-=10;
        //         box.style.top=t+'px';
        //     }
        //     if (e.keyCode==39) {
        //         l+=10;
        //         box.style.left=l+'px';
        //     }
        //     if (e.keyCode==40) {
        //         t+=10;
        //         box.style.top=t+'px';
        //     }
        // }
        var div=document.getElementById('box');
        var s=0,left=0,right=0,bottom=0;//用top不可以，为保留字；
        var timer=null,x=50,y=50;
        timer=setInterval(function(){
            if (left==1) {
                x-=5;
                div.style.left=x+'px';
            }
            if (right==1) {
                x+=5;
                div.style.left=x+'px';
            }
            if (s==1) {
                y-=5;
                div.style.top=y+'px';
            }
            if (bottom==1) {
                y+=5;
                div.style.top=y+'px';
            }
        },20)
        document.onkeydown=function(ev){
            var e=ev||window.event;
            switch(e.keyCode){
                case 37:
                    left=1;
                    break;
                case 38:
                    s=1;
                    break;
                case 39:
                    right=1;
                    break;
                case 40:
                    bottom=1;
                    break;
                default:
                    alert('请按方向键');
            }
        }
        document.onkeyup=function(ev){
            var e=ev||window.event;
            switch(e.keyCode){
                case 37:
                    left=0;
                    break;
                case 38:
                    s=0;
                    break;
                case 39:
                    right=0;
                    break;
                case 40:
                    bottom=0;
                    break;
                default:
                    alert('请按方向键');
            }
        }
    </script>
</body>

</html>

 

duenyang
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用键盘控制小方块的移动
angula
02-28 3297
原理 1. 利用键盘控制移动，则需要了解onkeydown函数，表示某个按键被按下，可以以此绑定一个事件响应函数，当键盘被按下时候，触发此事件，进行移动 2. keyCode 对于keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。 因此我们可以根据ke...
<Win32_3>Bitmap位图应用2 ------ 键盘控制人物走动
caobihole
07-24 253
今天掌握了Bitmap的用法，忍不住再来一次升级版的应用------用键盘控制人物的走动，这个可能在游戏设计中用的很多，不过今儿就先来小试牛刀，呵呵…… 本人学习编程有个"癖好" —— 那就是有了想法，下一步就是实现，越快实现越好，不实现就誓不罢休…… 好了，F话少说了，还是先来逐步了解需求吧 (1)首先需要一个完整的人物走路分解图，每一个方向4张，分别是：直立、右脚向前、直立、左脚...
QML学习之路02: 使用键盘方向键移动界面的小方块
小强的机器人工坊
05-23 1317
main.cpp #include &amp;amp;lt;QGuiApplication&amp;amp;gt; //#include &amp;amp;lt;QQmlApplicationEngine&amp;amp;gt; #include &amp;amp;lt;QQuickView&amp;amp;gt; int main(int argc, char *argv[]) { QCoreApplication::setAttribute
OpenGL 键盘控制移动
11-30
计算机图形学 实验三 OpenGL 键盘控制 移动
java类似于贪吃蛇的小游戏（方块移动）
04-03
这个游戏的核心是实现方块的移动，以及通过键盘操作控制方块的方向。以下是一些相关的重要知识点： 1. **Java基础知识**： - **Java Swing**: 贪吃蛇游戏通常使用Java Swing库来创建图形用户界面（GUI）。Swing...
俄罗斯方块简单实现带键盘控制
11-21
【俄罗斯方块简单实现带键盘控制】是一个编程项目，它基于经典的电子游戏“俄罗斯方块”，并添加了键盘输入功能，使玩家能够通过键盘来控制方块的移动、旋转和消除。这个项目对于初学者来说是很好的实践，因为它涵盖...
JS写的一个方块移动游戏
03-27
【标题】"JS写的一个方块移动游戏"揭示了这个项目是使用JavaScript编程语言实现的一款简单游戏。JavaScript，通常简称为JS，是一种广泛应用于Web开发的脚本语言，它允许在浏览器端执行代码，为用户提供动态交互体验...
python小游戏脚本-源码-基础-方块的绘制与键盘移动控制
最新发布
03-11
此外，游戏还使用了事件处理来检测玩家的按键操作，并根据按键操作移动方块。整个游戏的运行主要在一个主循环中，通过控制循环来实现游戏的流程控制。通过这个游戏源码，开发者可以了解如何使用Python和Pygame创建...
控件移动-左右方块源代码
12-05
是一个关于控件如何移动的源代码。希望对大家都有点帮助，以后会陆续上传更多课程资源在CSDN，与大家分享！
通过上下左右四个方向键控制矩形的移动 c++代码
01-22
可以用来移动一个矩形，c++代码，矩形中有字，而且需要通过上下左右键来移动矩形想四个方向移动
使用JavaScript完成自定义按键控制方块上下左右移动
ITEMN的博客
10-15 1440
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <lable id="show" /> <img id="img" src=...
actionScript键盘控制 物体移动
一切皆有可能
07-02 311
package { import flash.display.Sprite; import flash.events.KeyboardEvent; import flash.events.MouseEvent; import flash.ui.Keyboard; public class plane extends Sprite { private va...
Laya 摇杆控制 角色移动
唐僧的专栏
12-04 5470
开发环境： Unity3d 5.6.3                    Layaair  1.7.3 大家可以先看下效果。 需要优化的几个点： 模型动画没有找到 合适的 动画循环上衔接的不太友好， 在旋转 和 移动没有做 缓动 所以显得 突兀 Layaair  对处理 动画过度上 没有有力的支撑 所以显得 动画衔接 比较生硬   对于摇杆的实现 我们使用了一个数学模型 ...
编写程序，实现使用键盘上的上下左右箭头控制界面上图片的移动。
热门推荐
Wang_Hong_Yi的博客
06-11 1万+
编写程序，实现使用键盘上的上下左右箭头控制界面上图片的移动。
方向键控制移动移动.cpp
Lyntion的Blog
10-14 2163
Code: #include    #include    #include    #include    #include       void gotoxy(int x,int y)    {        COORD c;        c.X=x;        c.Y=y;        SetConsoleCursorPosition(GetStdHandle(S
键盘控制方块下落的代码
06-08
以下是一个示例代码，可以通过键盘控制方块下落： ```python import pygame # 初始化 Pygame pygame.init() # 定义颜色 BLACK = (0, 0, 0) WHITE = (255, 255, 255) RED = (255, 0, 0) GREEN = (0, 255, 0) BLUE = (0, 0, 255) # 设置屏幕大小 SCREEN_WIDTH = 700 SCREEN_HEIGHT = 500 screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT)) # 设置标题 pygame.display.set_caption("方块下落") # 定义方块大小和速度 BLOCK_SIZE = 20 BLOCK_SPEED = 5 # 定义方块初始位置和速度 block_x = SCREEN_WIDTH / 2 - BLOCK_SIZE / 2 block_y = 0 block_speed_x = 0 block_speed_y = BLOCK_SPEED # 游戏循环 done = False clock = pygame.time.Clock() while not done: # 处理事件 for event in pygame.event.get(): if event.type == pygame.QUIT: done = True elif event.type == pygame.KEYDOWN: if event.key == pygame.K_LEFT: block_speed_x = -BLOCK_SPEED elif event.key == pygame.K_RIGHT: block_speed_x = BLOCK_SPEED # 移动方块 block_x += block_speed_x block_y += block_speed_y # 检测方块是否超出边界 if block_x < 0: block_x = 0 elif block_x + BLOCK_SIZE > SCREEN_WIDTH: block_x = SCREEN_WIDTH - BLOCK_SIZE # 绘制屏幕 screen.fill(WHITE) pygame.draw.rect(screen, BLUE, [block_x, block_y, BLOCK_SIZE, BLOCK_SIZE]) pygame.display.flip() # 控制帧率 clock.tick(60) # 退出 Pygame pygame.quit() ``` 这个示例代码使用 Pygame 库来创建一个窗口，并在窗口中绘制一个蓝色的方块。通过监听键盘事件来控制方块的左右移动，每次循环更新方块的位置并重新绘制屏幕。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值