首页 > 代码库 > JavaScript基础--超级玛丽(七)（上下左右控制）
JavaScript基础--超级玛丽(七)（上下左右控制）
相信大家都玩过超级玛丽，下面实现控制玛丽的上、下、左、右等基本功能，本篇只是在练习JavaScript的用法
1、创建一个HTML页面
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus?"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title>Document</title> 10 <link href="Mario.css" type="text/css" rel="stylesheet" /> 11 <script language="javascript" type="text/javascript"> 12 //设计Mario类 13 function Mario(){ 14 this.x =0; 15 this.y =0; 16 this.mymario = document.getElementById(‘mymario‘); 17 this.move = function(direct){ 18 switch(direct){ 19 case 0: 20 //window.alert("mario上移动"); 21 upControl(mymario); 22 break; 23 case 1: 24 //这里为了改变img的left和Top值，需要先要得到img这个元素 25 //var mymario =document.getElementById(‘mymario‘); 26 rightControl(mymario); 27 break; 28 case 2: 29 //window.alert("mario下移动"); 30 downControl(mymario); 31 break; 32 case 3: 33 //window.alert("mario左移动"); 34 leftControl(mymario); 35 break; 36 } 37 } 38 } 39 40 //创建Mario对象 41 var mario = new Mario(); 42 //创建计数器，计算一行是否走到边界处。 43 var countWidth = 0; 44 //全局函数 45 function marioMove(direct){ 46 switch(direct){ 47 //0表示向上走 48 case 0: 49 mario.move(direct); 50 break; 51 //1表示向右走 52 case 1: 53 mario.move(direct); 54 break; 55 //2表示向下走 56 case 2: 57 mario.move(direct); 58 break; 59 //3表示向左走 60 case 3: 61 mario.move(direct); 62 break; 63 } 64 } 65 66 67 //控制向右的方法 68 function rightControl(mymario){ 69 //countWidth判断Mario是否可以前进的条件，450表示已走到X轴的最后位置，再继续走要超出div层 70 if(countWidth<450){ 71 //获取mario的img元素的left属性：9px 72 //截取left属性的px,并把值转换成整型 73 var left = window.leftPosition(mymario); 74 //mario每次前进150px,并把累加的值 赋给img的left属性 75 mymario.style.left = (left+150) + "px"; 76 //计数器，每次累加的结果保存在计数器中，用于判断一行是否结束 77 countWidth+=150; 78 }else{ 79 //获取当前mario图片的高度 80 y = window.heightPosition(mymario); 81 //获取图片相对于浏览器上边界的高度 82 var top = window.topPosition(mymario); 83 //判断mario是否走到div的最后一行的尽头了，如果没有，就继续一行一行往下走 84 //359px是y轴坐标，如果超过359px，表示mario的y轴坐标再加70px,div的底层坐标就是359px 85 if(top < 359){ 86 //y轴坐标每次加70px,sum完后放在top属性中 87 mymario.style.top = y + top + "px"; 88 //每行的x轴坐标都是从9px开始的 89 mymario.style.left = "9px"; 90 //重置计数器，用于判断x轴的是否可以继续的条件，换行后计数器要清零，否则计数器的值还为450； 91 countWidth = 0; 92 }else{ 93 window.alert("游戏结束了"); 94 //判断mario已走到了尽头（最后一行和最后一列的位置），重置游戏起始位置 95 mymario.style.top = "9px"; 96 mymario.style.left = "9px"; 97 } 98 99 } 100 } 101 102 //向下移动 103 function downControl(mymario){ 104 var top = window.topPosition(mymario); 105 y = window.heightPosition(mymario); 106 if(top <359){ 107 mymario.style.top = y + top + "px"; 108 }else{ 109 window.alert("到底了，再往下就掉下去了！"); 110 } 111 } 112 113 //向上移动 114 function upControl(mymario){ 115 var top = window.topPosition(mymario); 116 var height = window.heightPosition(mymario); 117 if(top >9){ 118 mymario.style.top = (top -height) + "px"; 119 }else{ 120 window.alert("到顶了，在往上头就碰这天花板了！"); 121 } 122 } 123 124 //向左移动 125 function leftControl(mymario){ 126 //设置初始位置(从图片的最后一行开始，而不是Div的。最后一行一列位置是left=459px,top=359px) 127 //向左移动 128 var left = window.leftPosition(mymario); 129 var top = window.topPosition(mymario); 130 var height = window.heightPosition(mymario); 131 //判读是否左移动到边界处，边界位置left ==9 132 if(left > 9){ 133 //继续左移动 134 mymario.style.left = (left - 150) + "px"; 135 }else{ 136 //判读是否到达游戏开始位置 137 if(left - top !=0){ 138 //退回上一行的最后一列的位置：left = 459px的位置，left相当于x轴 139 mymario.style.left ="459px"; 140 //退回上一行的最后一行的位置：top-height的位置，top 相当于y轴 141 mymario.style.top = (top - height) + "px"; 142 }else{ 143 window.alert("已回到开始位置！"); 144 } 145 } 146 } 147 148 //获取img元素top属性 149 var topPosition =function(mymario){ 150 var top = mymario.style.top; 151 top = window.removeSuffixAndToInt(top); 152 return top; 153 } 154 155 //获取img元素的left属性 156 var leftPosition = function(mymario){ 157 var left = mymario.style.left; 158 left = window.removeSuffixAndToInt(left); 159 return left; 160 } 161 162 163 //获取img元素的height 164 var heightPosition = function(mymario){ 165 var height = mymario.style.height; 166 //height = parseInt(height.substr(0,height.length-2)); 167 height = window.removeSuffixAndToInt(height); 168 return height; 169 } 170 171 //截取字符串并转换整型，把字符串后面的px去掉 172 var removeSuffixAndToInt = function(imgStyleAttribute){ 173 //接受传过过来的坐标值（字符串），例如：79px,去掉px,再把字符串79转换成整型 174 var imgAttriIntValue=parseInt(imgStyleAttribute.substr(0,imgStyleAttribute.length-2)); 175 return imgAttriIntValue; 176 } 177 178 //注意：被调用的方法名不能与HTML元素里的属性相同，否则调用是方法名跟属性名冲突，被调方法不起任何作用 179 //在谷歌浏览器是不能这样调用的，但是在IE中这样的是可以，由于IE浏览器支持的JavaScript语法属于弱类型，所以 180 //在IE是可用的 181 </script> 182 </head> 183 184 <body> 185 <div class="gamediv"> 186 <img id="mymario" style="height:70px;width:50px;left:9px;top:9px;position:absolute;" src="mario.jpg"/> 187 </div> 188 189 <table border="1px" class="controlcenter"> 190 <tr><td colspan="3">游戏键盘</td></tr> 191 <tr><td>**</td><td><input type="button" value="↑" onclick="marioMove(0)"/></td><td></td></tr> 192 <tr><td><input type="button" value="←" onclick="marioMove(3)"/></td><td>**</td><td><input type="button" value="→" onclick="marioMove(1)"/></td></tr> 193 <tr><td>**</td><td><input type="button" value="↓" onclick="marioMove(2)"/></td><td></td></tr> 194 </table> 195 </body> 196 </html>
实现控制Mario的基本功能（上、下、左、右）
2、创建一个名为Mario.css
1 .gamediv{ 2 width:500px; 3 height:420px; 4 background-color:pink; 5 /*position:absolute;*/ 6 } 7 8 /*表格样式*/ 9 .controlcenter{ 10 width:200px; 11 height:100px; 12 border:1px solid black; 13 }
3、在网页中显示：
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。