JavaScript游戏开发之键盘控制层的移动
截图：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>键盘控制层的移动</title> <style type="text/css"> <!-- #Div { position:absolute; width:238px; height:135px; left:expression((body.clientWidth - this.offsetWidth)/2); top:expression((body.clientHeight - this.offsetHeight)/2); z-index:1; text-align:center; background:#AFDBFF; border:#006699 1px solid; } #Txt{ font-size:9pt; position:absolute; width:200px; top:expression((Div.offsetHeight - this.offsetHeight)/2); left:expression((Div.offsetWidth - this.offsetWidth)/2); } #Txt p{ font-size:9pt; margin:8px; } #Txt font{ color:#FF0000; font-size:9pt; } #Layer1 { border:#006699 1px solid; padding:10px; font-size:9pt; color:#336699; position:absolute; top:expression((body.clientHeight - this.offsetHeight)/2); left:expression((body.clientWidth - this.offsetWidth)/2 + Div.offsetWidth); } #Layer1 Input { font-size:9pt; color:#336699; } #Int { text-align:right; } --> </style> </head> <body> <div id="Div"><span id="Txt">请分别按下 <font>↑</font>、<font>↓</font>、<font>←</font>、<font>→</font>， 试试看有什么效果？ </span></div> <span id="Layer1">控制键设置: 向上移动: <input name="Up" type="text" value="↑" size="6"> 向下移动: <input name="Down" type="text" value="↓" size="6"> 向左移动: <input name="Left" type="text" value="←" size="6"> 向右移动: <input name="Right" type="text" value="→" size="6"> 每次移动 <input name="Int" type="text" id="Int" value="5" size="4" maxlength="3"> px;</span> </body> </html> <script language="javascript"> <!-- //alert(txt.style.top); var up,down,left,right; up = 38; down = 40; left = 37; right = 39; function document.onkeydown() { // alert(event.keyCode); //左：37 上：38 右：39 下：40 var int; int = parseInt(document.getElementById("Int").value); if(int == "NaN") int = 5; var str = "",press,evet; var div = document.getElementById("Div"); var txt = document.getElementById("Txt"); if(event.srcElement.tagName == "INPUT") { if(event.srcElement == document.getElementById("Int")) { if(event.keyCode == 13) document.body.focus(); if((event.keyCode < 96 || event.keyCode > 105) && event.keyCode != 8 && event.keyCode != 46 && !(event.keyCode >= 37 && event.keyCode <= 40) ) event.returnValue = false; return; } else { switch(event.keyCode) { case 37:{ event.srcElement.value = "←"; break; } case 38:{ event.srcElement.value = "↑"; break; } case 39:{ event.srcElement.value = "→"; break; } case 40:{ event.srcElement.value = "↓"; break; } } switch(event.srcElement) { case document.getElementById("Up"):{ up = event.keyCode; break; } case document.getElementById("Down"):{ down = event.keyCode; break; } case document.getElementById("Left"):{ left = event.keyCode; break; } case document.getElementById("Right"):{ right = event.keyCode; break; } } } } else { switch(event.keyCode) { case left:{ press = "<font> ← </font>"; evet = "<font>向 <b>左</b> 移动</font>" + " " + int + " px 。"; div.style.left = (parseInt(div.currentStyle.left) - int) + "px"; if(parseInt(div.style.left) <= 0) { evet = "已经到了 <font>最左边</font> ，无法再 <font>向左</font> 移动。"; div.style.left = "0px"; break ; } break; } case up:{ press = "<font> ↑ </font>"; evet = "<font>向 <b>上</b> 移动</font>" + " " + int + " px 。"; div.style.top = (parseInt(div.currentStyle.top) - int) + "px"; if(parseInt(div.style.top) <= 0) { evet = "已经到了 <font>最上边</font> ，无法再 <font>向上</font> 移动。"; div.style.top = "0px"; break ; } break; } case right:{ press = "<font> → </font>"; evet = "<font>向 <b>右</b> 移动</font>" + " " + int + " px 。"; div.style.left = (parseInt(div.currentStyle.left) + int) + "px"; if(parseInt(div.style.left) >= (parseInt(document.body.clientWidth) - parseInt(div.offsetWidth))) { div.style.left = parseInt(document.body.clientWidth) - parseInt(div.offsetWidth); evet = "已经到了 <font>最右边</font> ，无法再 <font>向右</font> 移动。"; break ; } break; } case down:{ press = "<font> ↓ </font>"; evet = "<font>向 <b>下</b> 移动</font>" + " " + int + " px 。"; div.style.top = (parseInt(div.currentStyle.top) + int) + "px"; if(parseInt(div.style.top) >= (parseInt(document.body.clientHeight) - parseInt(div.offsetHeight))) { div.style.top = parseInt(document.body.clientHeight) - parseInt(div.offsetHeight); evet = "已经到了 <font>最下边</font> ，无法再 <font>向下</font> 移动。"; break ; } break; } default: { return; } } str = "您按下了" + press + "键，"; str += "该图层" + evet; txt.innerHTML = str; } } //--> </script> [提示：你可先修改部分代码，再按运行]
请稍等，评论加载中...
请稍等，评论加载中...