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编程起步(第三课)
Feb 27 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
微信公众号H5支付接口调用方法
Jan 10 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
详解CocosCreator项目结构机制
Apr 14 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
PHP7.0安装笔记整理
2015/08/28 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
javascript Excel操作知识点
2009/04/24 Javascript
潜说js对象和数组
2011/05/25 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
python获取豆瓣电影简介代码分享
2014/01/16 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
python实现两个文件合并功能
2018/04/01 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
python日志模块logbook使用方法
2019/09/19 Python
python cookie反爬处理的实现
2020/11/01 Python
python 实现逻辑回归
2020/12/30 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
家佳咖啡店创业计划书
2013/12/27 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
2015新员工工作总结范文
2015/10/15 职场文书