JS移动的方块

来源：互联网发布：油罐容积计算软件编辑：程序博客网时间：2024/04/28 13:13
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>
0 0