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 相关文章推荐
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 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 中的一些经验积累
2006/10/09 PHP
php 清除网页病毒的方法
2008/12/05 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
javascript 写类方式之八
2009/07/05 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
python实现的文件同步服务器实例
2015/06/02 Python
Python中django学习心得
2017/12/06 Python
在python中用url_for构造URL的方法
2019/07/25 Python
Python 处理文件的几种方式
2019/08/23 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
高三学习决心书
2014/03/11 职场文书
法人授权委托书范本
2014/04/04 职场文书
职务说明书范文
2014/05/07 职场文书
数据库连接池
2021/04/06 MySQL
Python中request的基本使用解决乱码问题
2022/04/12 Python
MongoDB数据库之添删改查
2022/04/26 MongoDB