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>