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 相关文章推荐
web前端开发也需要日志
Dec 09 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
Sep 02 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
7个你应该知道的JS原生错误类型
Apr 29 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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
jqPlot Option配置对象详解
2009/07/25 Javascript
JavaScript 常用函数库详解
2009/10/21 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
python目录与文件名操作例子
2016/08/28 Python
Python reduce()函数的用法小结
2017/11/15 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
python中logging包的使用总结
2018/02/28 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
Python小进度条显示代码
2019/03/05 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
美术教师个人工作总结
2015/02/06 职场文书
清洁工工作总结
2015/08/11 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers