js 超级玛丽(面板)
HTML
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="css/game.css" type="text/css" rel="stylesheet" /> <script language="JavaScript" type="text/javascript"> function Mario() { this.x = 0; this.y = 0; this.move = function(direct) { switch(direct) { case 1: var mymario = document.getElementById("mymario"); var left = mymario.style.left; left = parseInt(left.substr(0, left.length - 2)); mymario.style.left = (left+10) + "px"; break; case 2: var mymario = document.getElementById("mymario"); var top = mymario.style.top; top = parseInt(top.substr(0, top.length - 2)); mymario.style.top = (top+10) + "px"; break; case 3: var mymario = document.getElementById("mymario"); var left = mymario.style.left; left = parseInt(left.substr(0, left.length - 2)); mymario.style.left = (left-10) + "px"; break; case 4: var mymario = document.getElementById("mymario"); var top = mymario.style.top; top = parseInt(top.substr(0, top.length - 2)); mymario.style.top = (top-10) + "px"; break; default: break; } } } //全局函数 function move(direct) { switch(direct) { case 1: mario.move(direct); break; case 2: mario.move(direct); break; case 3: mario.move(direct); break; case 4: mario.move(direct); break; default: break; } } var mario = new Mario(); </script>> </head> <body> <div class="game"> <img id="mymario" style="left: 100px;top: 50px; width: 40px;position: absolute;" src="img/u=797375903,2847618050&fm=26&gp=0.jpg" /> </div> <table class="control" border="1px"> <tr> <td colspan="3">操作靶子</td> </tr> <tr border="1px"> <td></td> <td><input type="button" value="up" onclick="move(4)" /></td> <td></td> </tr> <tr> <td><input type="button" value="left" onclick="move(3)" /></td> <td>mid</td> <td><input type="button" value="right" onclick="move(1)" /></td> </tr> <tr> <td></td> <td><input type="button" value="down" onclick="move(2)" /></td> <td></td> </tr> </table> </body> </html>
css
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.game{
width:500px;
height: 400px;
background: pink;
position: absolute;
}
.control{
width: 200px;
height: 100px;
border: 1px solid red;
}
删除全局函数的实现方法:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="css/game.css" type="text/css" rel="stylesheet" /> <script language="JavaScript" type="text/javascript"> function Mario() { this.x = 0; this.y = 0; this.move = function(direct) { switch(direct) { case 1: var mymario = document.getElementById("mymario"); var left = mymario.style.left; left = parseInt(left.substr(0, left.length - 2)); mymario.style.left = (left+10) + "px"; break; case 2: var mymario = document.getElementById("mymario"); var top = mymario.style.top; top = parseInt(top.substr(0, top.length - 2)); mymario.style.top = (top+10) + "px"; break; case 3: var mymario = document.getElementById("mymario"); var left = mymario.style.left; left = parseInt(left.substr(0, left.length - 2)); mymario.style.left = (left-10) + "px"; break; case 4: var mymario = document.getElementById("mymario"); var top = mymario.style.top; top = parseInt(top.substr(0, top.length - 2)); mymario.style.top = (top-10) + "px"; break; default: break; } } } //全局函数 function move(direct) { switch(direct) { case 1: mario.move(direct); break; case 2: mario.move(direct); break; case 3: mario.move(direct); break; case 4: mario.move(direct); break; default: break; } } var mario = new Mario(); </script> </head> <body> <div class="game"> <img id="mymario" style="left: 100px;top: 50px; width: 40px;position: absolute;" src="img/u=797375903,2847618050&fm=26&gp=0.jpg" /> </div> <table class="control" border="1px"> <tr> <td colspan="3">操作靶子</td> </tr> <tr border="1px"> <td></td> <td><input type="button" value="up" onclick="mario.move(4)" /></td> <td></td> </tr> <tr> <td><input type="button" value="left" onclick="mario.move(3)" /></td> <td>mid</td> <td><input type="button" value="right" onclick="mario.move(1)" /></td> </tr> <tr> <td></td> <td><input type="button" value="down" onclick="mario.move(2)" /></td> <td></td> </tr> </table> </body> </html>