使用switch让方块移动

最新推荐文章于 2021-10-13 20:38:44 发布
最新推荐文章于 2021-10-13 20:38:44 发布
阅读量467 收藏
点赞数
文章标签： js html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57726512/article/details/116912840
版权

今天我们将使用JavaScript中的switch让方块在页面上移动

switch是什么呢？switch是选择要执行的多个代码块之一的语句。今天我们要用到的不止是switch语句还有keyCode，keyCode也是这次小案例中必不可少的元素。

为什么说keyCode也是必不可少的一个元素？因为我们让方块移动需要用到键盘事件，而keyCode可以检测到键盘那个键被按下了，它的代号是多少，所以keyCode元素会在我们的小案例中发挥非常大的作用。话不多说，我们进入正题。

获取键盘代号

在计算机中键盘的每一个键都有属于自己的代号。这些代号我们看不到，所以要通过keyCode事件来获取键盘某一个键的代号。 

首先用一个input标签作为获取值，赋予这个input标签一个id，然后我们就开始写JavaScript 的代码了。通过var声明一个变量，获取到input标签的值，并给我们声明的变量绑定一个onkeydown事件。（函数后面的参数要加event），为了兼容性我们还需要加一个

event=event||window.event;

因为在IE8以下没有event的事件，而event事件在IE8 中是在window中的所以我们需要从window事件中调出event事件。

然后，我们console.log输出event.keyCode。输出后我们运行代码，在网页中右键打开“检查”

“检查”打开后我们会看到这样一个框

点击上方的Console紧接着在文本框中输入“上下左右”就能获取到上下左右的代号了。38 40 37 39分别对应上 下 左 右

获取到代号后就开始写我们的代码了

HTML只有一个div标签，CSS中也没有太多的样式需要设置，只要给div一个不同于背景的颜色就好了。真正要花功夫的是JS代码。

我们先来一个window．onload事件，也就是页面加载完成事件。在函数中用getElementsByTagName，一定要用ByTagName，因为我们并没有给div一个ID也没有给他一个类，所以只能用ByTagName。（也不是不可以使用getElementById，如何使用取决于使用者）

获取到元素后，还是和上面获取键盘代码一样给它一个onkeydown事件。（普及以下什么是onkeydown事件 onkeydown事件是指键盘被按下事件如果一直按着某个键不松开，则会一直触发该事件，当onkeydown事件连续触发时，第一次和第二次之间的间隔时间稍微长一点，其他则会非常快。这是为了防止误操作的发生。这就是onkeydown事件）

接着我们用var声明一个变量，并将这个变量赋值为20。在这个变量的参数中传入event.keyCode，以便于获取我们给按键绑定的事件。

case 37:xo.style.left=xo.offsetLeft-20+"px";break;
case 38:xo.style.top=xo.offsetTop-20+"px";break;
case 39:xo.style.left=xo.offsetLeft+20+"px";break;
case 40:xo.style.top=xo.offsetTop+20+"px";break;

前面获取到的每个代号都给一个style事件和向左，向上事件，并在键盘被按下时执行，向左向右向上下向下移动多少个单位。最后用break结尾。以下是整体的代码

<style>
		div{
			width: 100px;
			height: 100px;
			background:#FF00DF;
			position: absolute;
			top:0;
			left:0;
		}
</style>
<body>
	<div></div>

	<script>
	window.onload=function(){
		var xo=document.getElementsByTagName("div")[0];
		document.onkeydown=function(event){
			event=event||window.event;
			var speed=20;
			switch(event.keyCode){
				case 37:xo.style.left=xo.offsetLeft-20+"px";break;
				case 38:xo.style.top=xo.offsetTop-20+"px";break;
				case 39:xo.style.left=xo.offsetLeft+20+"px";break;
				case 40:xo.style.top=xo.offsetTop+20+"px";break;
			}
		}
	}
	</script>

代码中包括CSS，HMTL，JavaScript在style标签中的是CSS代码，而HTML代码只有一个div，script标签中的则是JavaScript代码

 

 

 

 

 

 

 

 

 

 

码外狂徒——张三
关注
前端技术搭建俄罗斯方块（内含源码）
官方推荐
06-05 2万+
通过前端基础HTML、CSS、JS来搭建一个俄罗斯方块小游戏，内附源码直接拷贝即可运行！
canvas方块移动
Frost666的博客
07-26 1260
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;Title&lt;/title&gt;     &lt;style&gt;         *{             margin: 0;
键盘事件(使用switch语句改写 div 上下左右移动的功能)
weixin_57783177的博客
07-17 651
键盘事件 开发工具与关键技术：DW HTML 作者：尘则 撰写时间：2021/7/17 使用switch语句改写 div 上下左右移动的功能 先看结果： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>键日</title> </head> ...
jquery 滑块_使用SwipeJS和jQuery创建支持触摸的滑块[教程]
cune1359的博客
06-29 318
图片/内容滑块是我们在网站上发现的常见组件之一。 用jQuery创建一个非常简单。 事实上; 我们在上一教程中已经讨论过一次。 但是，如今，随着使用触摸功能的设备的人越来越多，我们可能不得不重新考虑我们如何构建它。 通常，滑块配有“ 下一步”和“上一步”按钮来浏览内容，在台式机上可以正常工作。 但是，在触摸设备中，如果用户还能够通过手指滑动来滑动导航，那将更好。 在今天的教程中，我们将向您...
实现switch 按钮滑动块
onlyformyself的博客
12-28 270
实现switch 按钮滑动块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>switch button</title> <script src="./jquery.min.js"></script> </head> <style> .switch {
swt 键盘响应的KEY
zhuzhenlong998的专栏
03-02 1189
按键 keyCode常量 方向键下 SWT.ARROW_DOWN 方向键上 SWT.ARROW_UP 方向键左 SWT.ARROW_LEFT 方向键右 SWT.ARROW_RIGHT Alt键 SWT.ALT 空格键 SWT.BS Enter键 SWT.CR Ctrl键 SWT.CTRL E
SWT –如何捕获键盘事件
一名可爱的技术搬运工
05-19 640
在SWT中，键盘事件由KeyEvent类表示。 我们可以使用KeyListener来接收和处理KeyEvent 。 KeyEvent类具有三个成员字段，以提供有关事件生成的密钥的信息。 1）字符–显示所按下键的字符值。 2）stateMask –检查当前是否有其他按键被按下。 （通常用于捕获CTRL，ALT和SHIFT键）。 3）keyCode –显示所按下键的数字值。 我们可以...
使用C做的移动方块游戏
The_Crazy_Turtle的博客
10-12 839
使用C做的移动方块游戏 写在开头：第一次在CSDN发布文章，也不知道会咋样。 作为大一新生，这是目前我用C写过最长的代码，扒拉了个晚自习，学校还没开始上机实践，全靠翻书+百度+CSDN+Runoob凑合，所以写得估计比较低级（但也更适合向我这样的新手看看），有些细节还可以完善，但目前想想先放着，怕牵一发而动全身把自己绕进去了。 希望各位客官看在新人的份上不喜勿喷，谢谢。 #include<stdio.h> #include <iostream> #include <time.h
JS实战之使用键盘方向键控制方块的上下左右移动
weixin_44278828的博客
10-13 2445
使用键盘方向键控制方块的上下左右运动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>控制方块的上下左右移动</title> <style type="text/css"> #box1{ width: 100px; height: 100px;
使用C语言开发的俄罗斯方块游戏源码，适合刚入门学习C语言编程的爱好者
最新发布
03-22
俄罗斯方块是一款经典的电子游戏，其主要机制包括生成随机形状的方块、方块的移动、旋转以及消除行。在C语言中实现这个游戏，我们需要掌握以下关键知识点： 1. **基本数据类型与变量**：C语言中的int、char、float...
JS写的一个方块移动游戏
03-27
NULL 博文链接：https://zjixuanlv.iteye.com/blog/1159829
如何将下载的Nintendo Switch游戏移至microSD卡
cum88284的博客
10-10 6491
If your Nintendo Switch is running low on internal system storage, you can easily move games you’ve already downloaded from the Nintendo eShop to a microSD card without having to download them again. ...
swt键盘监听（使用组合键）
后飞IT
05-26 2964
转自：http://www.jdon.com/15155 比如：QQ中我们会用回车来发送信息。这个时候就需要用到课键盘的监听了（keyTraversed） 多按键监听实现, 使用KeyEvent的stateMask方法监听SWT.SHIFT、SWT.CTRL、SWT.ALT等组合按键，使用keyCode方法监听键盘可视字符如A、B、1、2、F1、F2等。例如监听CTRL + ALT + F1按
SWT中的常用组件（转载）
lydia88的专栏
09-28 1110
SWT类所代表的事件常量：         事件类型常量 说明 SWT.Activate 当激活窗口时 SWT.Arm 菜单项被选中之前 SWT.Close 关闭窗口时 SWT.Collapse 折叠树的节点时
SWT中判断Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X组合键
kdevn的专栏
07-30 4727
在开发中，Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X是较常用的组合键，判断方法如下： final Text t = new Text(shell, SWT.BORDER | SWT.MULTI);...t.addKeyListener(new KeyListener() {    @Override    public void keyPressed(KeyEvent
js按键上下左右按键触发函数的写法（按键按下触发）
weixin_44354089的博客
05-31 1554
onkeydown事件，按键按下触发 function onKeyDown() { document.onkeydown = function (event) { var event = event || window.event; // 为了方便理解可以写成这种形式var event=event?event:window.event实现浏览器的兼容 var keycode = event.which || eve.
Appium键盘处理
JingHJ_2008的专栏
01-05 1938
Appium的键盘处理。
转：event.keyCode用法及列表
u010100177的专栏
01-10 628
event.keyCode用法及列表 HTML 用户名： 密码： JavaScript： JumpByEnter(UserPwd) 函数功能：输入完用户名按回车，焦点转向密码输入框 IsEnterKeyPress()功能：输入完密码并按回车，则登录 function JumpByEnter(NextElement){      var lKe
KeyCode
衣乌安、随笔
05-18 370
const KeyCode = { /** * MAC_ENTER */ MAC_ENTER: 3, /** * BACKSPACE */ BACKSPACE: 8, /** * TAB */ TAB: 9, /** * NUMLOCK on FF/Safari Mac */ NUM_CENTER: 12, // ...
使用C语言实现俄罗斯方块
"俄罗斯方块游戏开发教程，使用C语言实现" 在这个教程中，我们将学习如何使用C语言开发经典的"俄罗斯方块"游戏。首先，我们需要一个编程环境，这里提到的是Turbo C 2.0 或 3.0，或者使用win-tc。我们将创建一个新的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值