js实现超级玛丽小游戏


Posted in Javascript onMarch 18, 2020

本文实例为大家分享了js超级玛丽小游戏的具体代码,供大家参考,具体内容如下

js实现超级玛丽小游戏

怎么用通过按键,来控制图片的位置
这个小游戏,用面向对象会很方便,不用面向对象会很麻烦很麻烦,比如以后要讲解的坦克大战的游戏,要是用纯的面向过程或函数式的方式写,那维护起来会非常的麻烦。 

游戏分析:

看看如何通过按钮来控制mario的位置

设计相关的对象(Mario x y ...)

onclick属性:当用户点击某个对象时调用的事件句柄 

素材

js实现超级玛丽小游戏

代码在目录:超级玛利亚.html

<html> 
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
 <style>
 
  .gamediv{ 
  width: 500px; 
  height: 400px; 
  background-color: pink; 
 
 } 
  
 
 /*表格样式*/ 
 .controlcenter{ 
  width: 200px; 
  height: 200px; 
  border: 1px solid red; 
  text-align:center; 
 
 } 
 
 </style> 
 
 <head> 
 
 <script language="javascript"> 
  //设计Mario类 
  function Mario(){ 
  this.x=0; 
  this.y=0; 
  //移动 顺时针 0->上 1->右 2->下 3->左 
  this.move=function(direct){ 
   switch(direct){ 
 
   case 0: //向上 
    //window.alert("mario 右移动"); 
    //这里为了改变 img的left 和top,我们需要得到 img元素。需要用到javascript的DOM编程。img 对象 
    var mymario=document.getElementById('mymario'); 
    //取出 img 的top值 
    //window.alert(mymario.style.top); 
 
    //怎样去掉50px的px 
    var top=mymario.style.top; 
    //px占据两个,即lenght-2 
    //window.alert(top.substr(0,top.length-2)); 
 
    //现在还是串,要转成数值才能加减 
    top=parseInt(top.substr(0,top.length-2)); 
 
    //window.alert(top); 
    mymario.style.top=(top-2)+"px"; //开始移动2px,看怎么拼接的,字符串和数值之间的转换 
 
    //此时mario就可以向下移动了,把上面的打印调试输出代码都注释掉 
 
    break; 
 
   case 1: //向右 
 
    var mymario=document.getElementById('mymario'); 
    var left=mymario.style.left; 
    left=parseInt(left.substr(0,left.length-2)); 
    mymario.style.left=(left+2)+"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+2)+"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-2)+"px"; 
    break; 
 
   } 
 
  } 
 
  } 
 
 
  //创建Mario对象 
  var mario=new Mario(); 
 
 </script> 
 </head> 
 <body> 
 
 <div class="gamediv"> 
  <img id="mymario" src="person.png" style="left:100px; top:50px; position:absolute;" /> <!--用到了绝对定位--> 
  </div> 
  <table border="1px" class="controlcenter"> 
   <tr > 
   <td colspan="3" >游戏键盘</td> 
  </tr> 
  <tr> 
   <td>**</td> 
   <td><input type="button" value="向上" onclick="mario.move(0)" /></td>
   <!-- <td><input type="button" value="向上" onclick="marioMove(0)" /></td> -->
   <td>**</td> 
  </tr> 
 
  <tr>
 
   <td><input type="button" value="向左" onclick="mario.move(3)" /> </td>
   <td>**</td> 
   <td><input type="button" value="向右" onclick="mario.move(1)" /> </td> 
  </tr> 
 
  <tr> 
   <td>**</td> 
   <td><input type="button" value="向下" onclick="mario.move(2)" /> </td>
   <td>**</td> 
 
  </tr> 
 
  </table> 
 </body> 
 
</html>

js实现超级玛丽小游戏

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript textContent与innerText的异同分析
Oct 22 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 Javascript
javascript操作向表格中动态加载数据
Aug 27 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 #Javascript
JavaScript仿京东秒杀倒计时
Mar 17 #Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 #Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 #Javascript
js实现简单点赞操作
Mar 17 #Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 #Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 #Javascript
You might like
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
自动更新作用
2006/10/08 Javascript
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
PHP守护进程实例
2015/03/06 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
js实现星星打分效果
2020/07/05 Javascript
Python中用sleep()方法操作时间的教程
2015/05/22 Python
python动态加载包的方法小结
2016/04/18 Python
python简单读取大文件的方法
2016/07/01 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
keras 权重保存和权重载入方式
2020/05/21 Python
戴尔美国官网:Dell
2016/08/31 全球购物
交通文明倡议书
2014/05/16 职场文书
三八节标语
2014/06/27 职场文书
投资意向书
2014/07/30 职场文书
党支部四风整改方案
2014/10/25 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
学校教学管理制度
2015/08/06 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书