js实现超级玛丽小游戏

本文实例为大家分享了js超级玛丽小游戏的具体代码，供大家参考，具体内容如下

怎么用通过按键，来控制图片的位置
这个小游戏，用面向对象会很方便，不用面向对象会很麻烦很麻烦，比如以后要讲解的坦克大战的游戏，要是用纯的面向过程或函数式的方式写，那维护起来会非常的麻烦。

游戏分析：

看看如何通过按钮来控制mario的位置

设计相关的对象（Mario x y ...）

onclick属性：当用户点击某个对象时调用的事件句柄

素材

代码在目录：超级玛利亚.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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript实现打地鼠小游戏

    JavaScript实现打地鼠小游戏

    在写这个打地鼠的游戏开始首先要清楚每一步该做什么 然后再一步一步搭好框架再完善功能. 1.创建table三行三列,用来存放坑(图片) 2.获得所有的图片标签 3.老鼠的动作有①.冒出来 4.②. 老鼠跑了 5.③.老鼠被打死了 6.完善功能 一.首先实现第一步,用table创建一个三行三列的坑 <div id = "content"> <h2>打地鼠</h2><br/> <table id = "background&qu

  • 原生JavaScript实现连连看游戏(附源码)

    原生JavaScript实现连连看游戏(附源码)

    向大家推荐一款原生JavaScript版连连看游戏,源码下载,首页如下图所示:  首先看一下html的布局方式在index.html文件中: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head>

  • JavaScript 打地鼠游戏代码说明

    演示地址:http://demo.jb51.net/js/mouse/index.html打包下载地址 http://www.jb51.net/jiaoben/32434.html这个是我无聊的时候写的,先看看效果(UI做得比较丑):  说明:红色的点击得分100,蓝色的点击扣分100. 只是想用js来写个小游戏,顺便练练js的代码. 先看html部分: html 复制代码 代码如下: <style> #panel{height:300px;width:300px;background:#cc

  • js实现贪吃蛇小游戏（容易理解）

    js实现贪吃蛇小游戏（容易理解）

    话不多说,请看代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <link rel="stylesheet" href="style.css"> <script src="style.js" >

  • js实现超级玛丽小游戏

    本文实例为大家分享了js超级玛丽小游戏的具体代码,供大家参考,具体内容如下 怎么用通过按键,来控制图片的位置 这个小游戏,用面向对象会很方便,不用面向对象会很麻烦很麻烦,比如以后要讲解的坦克大战的游戏,要是用纯的面向过程或函数式的方式写,那维护起来会非常的麻烦. 游戏分析: 看看如何通过按钮来控制mario的位置 设计相关的对象(Mario x y ...) onclick属性:当用户点击某个对象时调用的事件句柄 素材 代码在目录:超级玛利亚.html <html> <meta http

  • js仿3366小游戏选字游戏

    js仿3366小游戏选字游戏

    本文实例为大家分享了js仿3366小游戏中"你是色盲吗"游戏,大家先来挑战一下 游戏目标: 按画面中出现的文字的颜色来选择颜色,千万不要被颜色的困局打扰,眼睛一定要放亮哦,游戏开始时会有10分,每答对一题得一分,总共有10分,时间用完游戏会结束. 操作说明: 鼠标点击选择颜色 1.效果图: 原图: 模仿: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

  • js消除图片小游戏代码

    js消除图片小游戏代码

    js消除图片小游戏,效果如下所示: 做了一个简易的消除图片的小游戏,没有连线的规则. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta

  • js实现翻牌小游戏

    本文实例为大家分享了js实现翻牌小游戏的具体代码,供大家参考,具体内容如下 效果图 需求分析 1.生成两组顺序随机的1-8数据 2.卡片需要有翻转效果 3.两次翻转数据不相等,回复原状 4.两次翻转数据相等,卡片相等,不能再被点击 5.当所有卡片不能被点击游戏结束 6.限制最大点击次数50次 HTML结构 <div class="wrap"> <div> <p class="top"></p> <p class=

  • 用js实现拼图小游戏

    用js实现拼图小游戏

    本文实例为大家分享了js实现拼图小游戏的具体代码,供大家参考,具体内容如下 一.js拼图是什么? 用js做得小游戏 二.使用步骤 1.先创建div盒子 <style> div,body{ margin: 0; height: 0; } #box{ width: 800px; height: 800px; background-color: burlywood; position: relative; } #box div { width: 200px; height: 200px; backg

  • JS原生2048小游戏源码分享(全网最新)

    JS原生2048小游戏源码分享(全网最新)

    最近在学习算法方面的知识,看到了一个由算法主导的小游戏,这里给大家分享下代码: 效果: 代码: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=360px,user-scalable=no" /> <title>2048小游戏</title> <style> body,h1,div,tabl

  • Vue2+JS实现扫雷小游戏

    目录 实现步骤 1.场景布局实现 2.初始化事件 3.游戏动作(action) 游戏收尾 总结 实现步骤 1.场景布局实现 布局就是经典的方格布局,对于场景的美观度可以自行找几个配色网站作为参考. 出现问题: 先初始化一个二维数组对应方块坐标,然后依次渲染 or 直接通过预期的行.列数渲染空白方块 区别: 直接初始化二维数组,可以对坐标进行一些属性操作,例如标记.是否为地雷等等,之后操作的时候会方便很多,缺点在初始化的时候需要进行大量的计算工作(因为在点开一个安全坐标时需要显示周围的地雷个数,还

  • 利用原生js实现html5小游戏之打砖块（附源码）

    利用原生js实现html5小游戏之打砖块（附源码）

    前言 PS:本次项目中使用了大量 es6 语法,故对于 es6 语法不太熟悉的小伙伴最好能先了解一些基本的原理再继续阅读. 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语法,个人认为以后 es6 语法会越来越普及,所以算是提前熟悉语法使用技巧.小游戏的实现逻辑上可能并不完善,也许会有一些 bug ,但是毕竟只是为了提升编程能力与技巧,希望大家不要太较

  • 原生js实现抽奖小游戏

    原生js实现抽奖小游戏

    这个小游戏可以设置为抽奖小游戏,也可以设置为随机点名器,这个软件实现可以多次获取同一个元素的 1.HTML结构代码如下: <div class="wrapper"> <ul class="box"></ul> <button class="start">开始点名</button> <button class="stop">停止</button>

  • js实现随机数小游戏

    抛出随机数实现一个"谁取餐的小游戏",供大家参考,具体内容如下 1.HTML结构代码如下 <div class="mask"> <div class="contents"> <div class="head"> <p>谁去拿外卖</p> <a href="#" rel="external nofollow" id=&quo

随机推荐