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 相关文章推荐
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
多个js与css文件的合并方法详细说明
Dec 26 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
angularjs中的e2e测试实例
Dec 06 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
React实现评论的添加和删除
Oct 20 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
星际争霸兵种名称对照表
2020/03/04 星际争霸
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
python中bisect模块用法实例
2014/09/25 Python
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
酒店总经理欢迎词
2014/01/15 职场文书
元旦活动感言
2014/03/08 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
医院保洁服务方案
2014/06/11 职场文书
2014年保密工作总结
2014/11/22 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
golang 如何用反射reflect操作结构体
2021/04/28 Golang
python爬虫之selenium库的安装及使用教程
2021/05/23 Python
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript