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>
分享到：
相关推荐
在提供的文档中，详细介绍了如何使用JavaScript来实现一个方块在网页上进行上下左右移动的动画效果。这个例子使用了HTML、CSS和JavaScript，涉及到了关键的Web技术，下面将详细阐述如何实现这一效果。 首先，文档...
在JavaScript中，我们通常会使用DOM（Document Object Model）来操作游戏界面，包括绘制方块、移动方块、消除行等操作。 1. **基本结构** JavaScript俄罗斯方块首先需要一个HTML页面作为游戏的容器，`block.html`...
在JavaScript中，我们还需要处理用户输入，例如键盘事件，用于控制方块的左右移动和旋转。此外，为了使游戏更有趣，还可以添加一些额外的功能，如暂停/继续、速度调整、等级升级等。 游戏界面的渲染是通过Canvas的...
【标题】"js俄罗斯方块网页游戏代码"所涉及的知识点主要集中在JavaScript编程语言和网页游戏开发上。JavaScript，简称JS，是一种轻量级的解释型编程语言，主要用于客户端的网页脚本，使得用户与网页交互更加动态和...
《JavaScript实现的俄罗斯方块源码解析》 俄罗斯方块是一款经典的电子游戏，自1984年诞生以来，就以其简洁的规则和无尽的挑战性吸引了无数玩家。在这个数字化时代，用JavaScript来实现俄罗斯方块是一个很好的编程...
Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、易学易用和高效渲染著称。在这个"全新版vue.js俄罗斯方块"项目中，开发者利用Vue.js的强大功能，结合算法，创建了一个完整的俄罗斯方块游戏。让我们深入...
《JavaScript实现俄罗斯方块》 在编程世界里，游戏开发是一项既能锻炼逻辑思维，又能提升技术实践能力的有趣任务。本文将围绕“JavaScript实现俄罗斯方块”这一主题，深入探讨如何利用JavaScript、CSS和HTML这三种...
- **方块移动**：通过监听键盘事件，实现方块的左右移动和自动下落。 - **方块旋转**：设计一个旋转算法，确保方块旋转后不会超出游戏边界或与已存在的方块重叠。 - **碰撞检测**：检查方块与游戏板边缘以及现有...
【标题】"JS写的一个方块移动游戏"揭示了这个项目是使用JavaScript编程语言实现的一款简单游戏。JavaScript，通常简称为JS，是一种广泛应用于Web开发的脚本语言，它允许在浏览器端执行代码，为用户提供动态交互体验...
在这款游戏中，JavaScript用于控制游戏的逻辑，如方块的生成、移动、旋转、消除行以及计分系统等。开发者通过编写JavaScript代码实现了游戏规则，并利用事件监听来响应用户的键盘输入，确保游戏的实时性和互动性。 ...
4. **事件处理**: JavaScript的事件监听器用于捕捉用户的输入，如键盘按键，控制方块的移动和旋转。例如，`addEventListener('keydown', handleKeyDown)`用于监听键盘事件。 5. **动画与定时器**: 为了实现平滑的...
2. **事件监听与处理**：JS通过addEventListener方法监听用户输入，如键盘按键，用于控制方块的移动和旋转。这涉及到事件对象和事件处理函数的使用。 3. **定时器与动画**：使用`setInterval`或`...
在JavaScript中，我们通常会定义一个方块类，包含位置、形状等属性，并提供移动、旋转的方法。每个方块由多个小正方形组成，这些正方形的位置通过坐标系统在Canvas上绘制出来。当方块到达底部或与其他方块碰撞时，...
在本项目中，我们利用JavaScript的事件监听、定时器、数组操作等特性，实现方块的移动、旋转、消除等功能。 二、HTML布局 HTML用于构建游戏界面的基本结构，包括游戏区域、得分显示、游戏控制等元素。通过定义div...
JavaScript打方块游戏是一款利用JavaScript编程语言开发的经典小游戏，它结合了编程技术和游戏设计的精髓，为用户提供了简单而有趣的娱乐体验。JavaScript是一种轻量级的脚本语言，广泛应用于网页和网络应用开发，...
【标题】"简单的js俄罗斯方块游戏源码"是一个基于JavaScript实现的俄罗斯方块小游戏，它展示了如何在网页上创建一款基本的休闲游戏。通过学习和分析这个源码，你可以了解JavaScript编程、HTML布局以及CSS样式在网页...
【标题】"简单的js俄罗斯方块游戏源码.zip"是一个包含JavaScript实现的俄罗斯方块小游戏的源代码包。这款游戏以简洁的线条设计风格呈现，旨在为玩家提供一个基础的在线娱乐体验。 【描述】提到的"简单的js俄罗斯...
在JavaScript中，游戏循环、方块移动、旋转、消除行等核心功能都是通过JavaScript代码实现的。 2. **窗口类**: 这个类通常用于表示游戏的主视图，包括游戏区域的大小、颜色设置以及与用户的交互接口。窗口类可能会...
综上所述，JS版俄罗斯方块的实现涉及JavaScript基础、DOM操作、图形绘制、游戏逻辑和用户交互等多个方面，是一个很好的学习JavaScript编程和游戏开发的实践项目。通过这个项目，开发者不仅可以提升JavaScript技能，...
《原生JS实现的俄罗斯方块小游戏解析》 在编程世界中，小游戏是学习和实践技术的绝佳途径，尤其对于JavaScript这种广泛应用于网页开发的脚本语言来说。本篇文章将详细解析一个使用原生JavaScript编写的俄罗斯方块小...