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 技巧小结
Apr 02 Javascript
jQuery1.6 使用方法二
Nov 23 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 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自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
PHP编程函数安全篇
2013/01/08 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
php socket通信简单实现
2016/11/18 PHP
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
python reverse反转部分数组的实例
2018/12/13 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
wxpython绘制圆角窗体
2019/11/18 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
半年思想汇报
2013/12/30 职场文书
房地产广告词大全
2014/03/19 职场文书
五年级下册复习计划
2015/01/19 职场文书
我的收音机情缘
2022/04/05 无线电