JS移动的方块

最新推荐文章于 2021-10-07 10:05:26 发布
最新推荐文章于 2021-10-07 10:05:26 发布
阅读量1.1k 收藏
点赞数
分类专栏： JavaScript HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/relucent/article/details/45748727
版权

PS:WASD上下左右，双击加速. 同时按下WASD任意2个按钮，事件不会冲突。

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
WASD上下左右，双击加速
<div id="CANVAS" style="position:absolute;left:50px;top:50px;width:500px;height:200px;border-color:#0000FF;border-style:solid;border-width:1px;">
<div id="GENERAL" style="position:absolute;left:10px;top:10px;width:10px;height:10px;border-color:#FF0000;border-style:solid;border-width:1px;overflow:hidden;">
</div>
</div>
</body>
<script type="text/javascript">
$ = function(id) {
return document.getElementById(id)
}

var Canvas = {
dom : $("CANVAS"),
width : function() {
return parseInt(this.dom.style.width);
},
height : function() {
return parseInt(this.dom.style.height);
},
top : function() {
return parseInt(this.dom.style.top);
},
left : function() {
return parseInt(this.dom.style.left);
}
};

var General = {
dom : $("GENERAL"),
"move" : 0x00,
'moveSize' : {},
width : function() {
return parseInt(this.dom.style.width);
},
height : function() {
return parseInt(this.dom.style.height);
},
top : function(top) {
if (top == undefined) {
return parseInt(this.dom.style.top);
} else {
if (top < 0) {
top = 0;
}
if (top + this.height() > Canvas.height()) {
top = Canvas.height() - this.height() - 1;
}
this.dom.style.top = parseInt(top) + "px";
return this;
}
},
left : function(left) {
if (left == undefined) {
return parseInt(this.dom.style.left)
} else {
if (left < 0) {
left = 0;
}
if (left + this.width() > Canvas.width()) {
left = Canvas.width() - this.width() - 1;
}
this.dom.style.left = parseInt(left) + "px";
return this;
}
}
};

var Clock_Interval = 20;
var db_key = {};

document.onkeydown = document.body.onkeydown = function(event) {
var keyCode = (event || window.event).keyCode;

if (db_key[keyCode + "+"] && db_key[keyCode + "-"] && (db_key[keyCode + "-"] > Clock_Interval)) {
db_key[keyCode] = Clock_Interval * 10;
}
if (!db_key[keyCode + "+"]) {
db_key[keyCode + "+"] = Clock_Interval * 9;
}

switch (keyCode) {
case 87 :
General["move"] |= 0x1;
if(!General["moveSize"][0x1]){
General["moveSize"][0x1]=1;
}
if (db_key[keyCode] > Clock_Interval * 9) {
General["moveSize"][0x1] = 3;
}
break;
case 68 :
General["move"] |= 0x2;
if(!General["moveSize"][0x2]){
General["moveSize"][0x2]=1;
}
if (db_key[keyCode] > Clock_Interval * 9) {
General["moveSize"][0x2] = 3;
}
break;
case 83 :
General["move"] |= 0x4;
if(!General["moveSize"][0x4]){
General["moveSize"][0x4]=1;
}
if (db_key[keyCode] > Clock_Interval * 9) {
General["moveSize"][0x4] = 3;
}
break;
case 65 :
General["move"] |= 0x8;
if(!General["moveSize"][0x8]){
General["moveSize"][0x8]=1;
}
if (db_key[keyCode] > Clock_Interval * 9) {
General["moveSize"][0x8] = 3;
}
break;
}
}
document.onkeyup = document.body.onkeyup = function(event) {
var keyCode = (event || window.event).keyCode;
switch (keyCode) {
case 87 :
General["move"] &= 0xE;
General["moveSize"][0x1] = 1;
db_key[keyCode + "-"] = Clock_Interval * 9;
break;
case 68 :
General["move"] &= 0xD;
General["moveSize"][0x2] = 1;
db_key[keyCode + "-"] = Clock_Interval * 9;
break;
case 83 :
General["move"] &= 0xB;
General["moveSize"][0x4] = 1;
db_key[keyCode + "-"] = Clock_Interval * 9;
break;
case 65 :
General["move"] &= 0x7;
General["moveSize"][0x8] = 1;
db_key[keyCode + "-"] = Clock_Interval * 9;
break;
}
}

setInterval(function() {
for (var key in db_key) {
if (db_key[key] && db_key[key] > 0) {
db_key[key] -= Clock_Interval;
} else {
db_key[key] = 0;
}
}
if ((General["move"] & 0x1) == 0x1) {
General.top(General.top() - General["moveSize"][0x1]);
}
if ((General["move"] & 0x2) == 0x2) {
General.left(General.left() + General["moveSize"][0x2]);
}
if ((General["move"] & 0x4) == 0x4) {
General.top(General.top() + General["moveSize"][0x4]);
}
if ((General["move"] & 0x8) == 0x8) {
General.left(General.left() - General["moveSize"][0x8]);
}
}, Clock_Interval); 
</script>
</html>
　

 

 

relucent
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
教你用JavaScript实现键盘控制小方块移动
小院里的霍大侠
12-14 2125
关注我，学习更多简单易懂的编程实战案例。进主页获取更多编程/就业/副业/创业/资源。
JS做移动方块
qq_59082106的博客
09-02 378
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-equiv="X-UA-Compatible"content="ie=edge"> <title>Doc...
自己运动的方块（JS）
Shellin_F的博客
05-25 1136
感觉自己最近也是石乐志了 什么都不记得了  但是，我会学的很快的 今天就是上次说了  那个方块  用JS 写哎 真的是很简单的东西 觉得自己最近 真的是诚惶诚恐 一个方块 从 左上  到右下 移动  就是用的是定时器 setinterval  连续的  然后  获取他的当前位置 判断 之后 加10px 下面是代码： HTML，css我就 不写了  CSS上就是定位了一下 JS
js实现小方块上下左右移动
蒲小若的博客
08-16 9747
#box{ width: 50px; height: 50px; position: absolute; background: palevioletred; } stop var speed = 10; var flag = true; var interId; function moveLeft(){
JS写的一个方块移动游戏
03-27
NULL 博文链接：https://zjixuanlv.iteye.com/blog/1159829
js 实现三个多个方块绕边框连续移动
12-15
js 实现多个div标签绕表框连续移动。页面加载时添加设定边框大小。
JS控制方块自动移动
wyjie1987的专栏
01-30 4500
通过JS的setTimeout事件来控制一个小方块绕屏幕移动： function autoMoveBox() { //debugger; var windowHeight = window.innerHeight; var windowWidth = window.innerWidth; var box = document.getElementById(
js实现方块上下左右移动效果
10-19
主要为大家详细介绍了js实现方块上下左右移动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript定时器的简单应用示例【控制方块移动】
10-16
在这个示例中，我们将深入理解JavaScript定时器的工作原理，并通过一个控制方块移动的简单应用来演示其实际应用。 首先，定时器在JavaScript中有两种主要类型：`setTimeout()` 和 `setInterval()`。`setTimeout()` ...
js俄罗斯方块游戏代码
06-24
【js俄罗斯方块游戏代码】是一款使用纯JavaScript语言编写的简单网页版俄罗斯方块游戏。在这款游戏中，开发者充分利用了JavaScript的DOM操作、事件监听和定时器等特性，实现了方块的生成、移动、旋转、消除以及得分...
js俄罗斯方块网页游戏代码
06-11
【标题】"js俄罗斯方块网页游戏代码"所涉及的知识点主要集中在JavaScript编程语言和网页游戏开发上。JavaScript，简称JS，是一种轻量级的解释型编程语言，主要用于客户端的网页脚本，使得用户与网页交互更加动态和...
js 实现键盘控制方块移动
有酒醉三生丶
09-29 4098
需求： 在网页上有一个方块，我们需要键盘上下左右键控制方块的移动。 代码： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;移动方块&lt;/title&gt; &lt;/head&gt; &lt;body&amp
使用JavaScript左右移动方框
longting_的博客
06-02 2022
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
js实现会移动的方块
gu_sheng2的博客
10-07 442
《--内部样式--》 <style> div{ width:200px; height:200px; background-color:red; /*这里要开启绝对定位*/ position:absolute; } </style> 《--js--》 <script> ...
JS实现小方块上下移动
weixin_45746054的博客
10-16 1148
**JS实现小方块上下移动 效果图 HTML代码展示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 50px; ...
JS之键盘控制div移动
沙漠皇帝本拉登
03-16 1001
普通实现 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;键盘控制div移动&lt;/title&gt; &lt;style type="tex
JavaScript 俄罗斯方块
最新发布
04-01
在 JavaScript 俄罗斯方块游戏中，玩家需要控制一个方块，让它在下落的过程中旋转和移动，使得方块能够完整地堆叠在底部。当一行方块被完整地填满时，这一行就会被清除，玩家可以获得得分。如果方块堆到了屏幕顶部，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值