06js超级玛丽小游戏

最新推荐文章于 2024-10-04 12:40:32 发布

Liangyi_J

最新推荐文章于 2024-10-04 12:40:32 发布

阅读量960

点赞数

分类专栏： JavaScript 文章标签： js js超级玛丽亚

本文链接：https://blog.csdn.net/qq_36125138/article/details/81917104

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

js超级玛丽小游戏

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

游戏分析：

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

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

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

素材

代码在目录：超级玛利亚.html

、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   

<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>