HTML5吃豆豆游戏开发实战（四）2d碰撞检测、重构-第二篇

最新推荐文章于 2023-03-04 22:15:46 发布
最新推荐文章于 2023-03-04 22:15:46 发布
阅读量2.6k 收藏 8
点赞数 1
分类专栏： HTML5 文章标签： javascript html5 html5游戏开发 js 重构
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjc_game_coder/article/details/44873813
版权

           今天下午在家没事，写代码。先总结一下学习HTML5和JS的一些经验，再来说游戏的事吧！

        这完全是一个HTML5和JS的入门新手的见解，如果您和我一样是新手的话，欢迎交流，当然，高手如果不介意的话，帮小弟指点一二那就更好啦，谢谢，嘿嘿！入正题吧！

        1.语法方面

            1.1  JS关于数组的定义方法要注意：

                  比如：var walls = [new Wall(262,200,100,30),new Wall(662,60,30,400),new Wall(762,300,200,30)];

                  这是定义一个墙壁对象数组，基本元素是Wall对象，然后是构造函数（坐标，长宽）

                  更多的关于JS数组定义的可以看这里：JS定义数组以及初始化

            1.2  JS定义了一个类，在类的成员变量初始化的时候，似乎不可以调用成员函数来初始化它？？

                   比如：

                  

function Wall(x_,y_,width_,height_)
{
    this.x = x_;
    this.y = y_;
    this.width = width_;
    this.height = height_;
    this.test = this.M();
    /**
     * @return {number}
     */
    this.M = function()
    {
        alert("....");
        return 1;
    };
.....(只是部分代码)

这样就不会看到alert效果，怎么回事呢？恳请各位指点下我初学者。

               1.3 注意我写的代码中的注释：

                

 this.hero = hero_;        //玩家
    this.walls = walls_;      //阻碍物数组
    this.enemys = enemy_;     //敌人数组
    this.isFind = false;      //临时变量，是否找到
    this.tempWall = null;     //临时变量
   // alert("cc");
    this.walls_y = this.walls.slice();  //这里不要写walls_，因为写这个的话，就和this.walls指向一个地方，排序后，walls也变了，终于找到原因，所以我用了复制

             函数传参的时候，若传的是对象，则是引用传递，如果是传数值类型，则是值传递。

           2. 一点点感想，JS是弱类型语言，var其实用着开始还觉得不习惯，因为以前一直写C，C++，JAVA，C#之类的强类型语言的原因吧，但是后来还是感觉很方便的，因为定义一个变量就是var，数值类型不用自己去考虑，但是这样也会有它的缺点，因为可能存在数据类型的使用是否正确，有没有重复定义、相互覆盖之类的，程序运行前的正确性判断基本靠人了，出错的可能性比较大，这里要注意，尤其是变量名的重复要注意！

          3.关于重构的一点点初步认识

        好的结构是后面更大的发展的基础，如果架子都不稳，怎么建高楼，所以我觉得重构确实还是很有必要的，尤其是稍微大一点点的，层次结构又模糊的项目，如果需要继续写下去，就最好重构一下。

       我个人认为重构的目的就是理清该项目的脉络，使各块代码到正确的位置上，而不是“你中有我，我中有你”

这种混乱不堪的局面，嘿嘿，比喻比喻，把代码模块儿理清楚，哪一部分该做什么，这样自己看得清楚，别人也看得清楚，同时为以后的扩展也打下基础。一个好的结构是很有必要的。

         好了，总结完毕，回到游戏中来。

         这是目前的工程文件目录截图：

        

       

             
        然后说一下完成的碰撞检测吧，其实核心就是坐标的比较，图形都很规范，所以不涉及复杂计算。

        当然，具体说一下，当玩家在同一个方向前进时，找到离自己最近的障碍物wallTemp，这就是继续在该方向行走下去一定会碰到的，只寻找一次，找到了把isFind=true。如果改变方向，则重新寻找wallTemp。玩家在某方向移动时，则比较自己和wallTemp之间的距离即可。上下左右都是这样。

        全部代码：

        1.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>物体移动简单演示</title>
</head>
<!--注意在body这里添加按键响应事件,引号内为函数名-->
<body οnkeydοwn="onGetKey()">
<h1>小球上下移动</h1>
<canvas id="test" width="1200px" height="600px" style="background-color: white"></canvas>
<!--把引用的资源引入本页面-->
<script type="text/javascript" src="Ball.js"></script>
<script type="text/javascript" src="Wall.js"></script>
<script type="text/javascript" src="Collide.js"></script>
<script type="text/javascript" src="GameSys.js"></script>
<script type="text/javascript" src="Control.js"></script>
<script type="text/javascript">
    //1.定义游戏世界原点坐标 窗口宽高
    var Ox = 162;
    var Oy = 0;
    var WinWidth = 900;
    var WinHeight = 500;
    //2.实例化游戏管理类
    var mana = new GameSys(Ox,Oy,WinWidth,WinHeight);
    //3.获取画布
    var can = document.getElementById("test");
    var cxt = can.getContext("2d");
    //4.实例化小球对象
    var ball = new Ball(30 + mana.ox,30,20,3);
    //walls先按x从小到大排序
    //5.
    var walls = [new Wall(262,200,100,30),new Wall(662,60,30,400),new Wall(762,300,200,30)];
    //6.
    FreshWindow(162,0,900,500,walls);
    //7.玩家控制类
    var ctrl = new Control(ball,walls,null);
    //8.设置小球的动画循环
    setInterval("ball.drawBall()",100);

    function FreshWindow(ox,oy,winWidth,winHeight,walls_)       //参数代表地图上的静态景物
    {
        cxt.clearRect(ox,oy,winWidth,winHeight);    //清理画布
        cxt.strokeRect(ox,oy,winWidth,winHeight);
        //document.write("xx");
        for(var i=0;i<walls_.length;i++)
        {
            cxt.strokeRect(walls_[i].x,walls_[i].y,walls_[i].width,walls_[i].height);
        }
       // alert("alter");
    }
    function onGetKey()
    {
        ctrl.moveCtrl();

    }
</script>
</body>
</html>

        2.

//玩家操控类，封装了W,A,S,D等等操作
function Control(hero_,walls_,enemies_)
{
    this.keyTemp = 0;//按键寄存器，存放上一次的按键值
    this.ball = hero_;
    this.wall = walls_;
    this.enemy = enemies_;
    this.collide = new Collide(hero_,walls_,enemies_);
    this.moveCtrl = function()
    {
        var code = event.keyCode;//对应字母的ascii
        //如果上一次的按键和这一次的不相等
        if(this.keyTemp != code)
        {
            this.keyTemp = code;         //更新按键值
            this.collide.ColideReferenceClean();  //修改了方向，清空上一次的计算值(待碰撞物体)，重新的方向计算新的待碰撞物体
        }
        switch(code)
        {
            //数字是ASCII码，记不住的话可以对照ASCII码表
            //上
            case 87:
                this.ball.dir=0;
                // document.write("c");
                //if(this.ball.getMinY() >= mana.topY)
                if( !this.collide.IsCollide() && this.ball.getMinY() >= mana.topY)
                    this.ball.moveUp();
                break;
            //下
            case 83:
                this.ball.dir=1;
                //if(this.ball.getMaxY() <= mana.buttomY)
                if( !this.collide.IsCollide() && this.ball.getMaxY() <= mana.buttomY)
                    this.ball.moveDown();
                break;
            //左
            case 65:
                this.ball.dir=2;
                if( !this.collide.IsCollide() && this.ball.getMinX() >= mana.leftEgdeX)
                    this.ball.moveLeft();
                break;
            //右
            case 68:
                this.ball.dir=3;
                if( !this.collide.IsCollide() && this.ball.getMaxX() <= mana.rightEdgeX)
                    this.ball.moveRight();
                break;
            default :break;
        }
    };
}

3.

//小球类
//注意js里面类的定义方法，直接类加函数参数的形式，就相当于定义了，然后里面直接this.xx=xx_，很高效
//参数：x,y坐标,球的方向,球的半径,运动速度
function Ball(x_,y_,r_,sp_)
{

    this.x = x_;
    this.y = y_;
    this.dir = 0;
    this.r = r_;    //灰色表示还没用
    this.sp = sp_;
    this.state = 0;
    //定义上下左右：0,1,2,3
    this.moveUp = function()
    {
        this.y -= this.sp;//上
        this.dir = 0;
    };
    this.moveDown = function()
    {
        this.y += this.sp;//下
        this.dir = 1;
    };
    this.moveLeft = function()
    {
        this.x -= this.sp;//左
        this.dir = 2;
    };
    this.moveRight = function()
    {
        this.x += this.sp;//右
        this.dir = 3;
    };
    //获得小球的坐标
    this.getX = function()
    {
        return this.x;
    };
    this.getY = function()
    {
        return this.y;
    };
    //获得球的各个方向的边界值
    this.getMaxX = function() {
        return this.x + this.r;
    };
    this.getMaxY = function()
    {
        return this.y + this.r;
    };
    /**
     * @return {number}
     */
    this.getMinX = function()
    {
        return this.x - this.r;
    };
    /**
     * @return {number}
     */
    this.getMinY = function()
    {
        return this.y - this.r;
    };
    this.getDir = function()
    {
        return this.dir;
    };
    this.drawBall = function()
    {
        FreshWindow(Ox,Oy,WinWidth,WinHeight,walls);
        switch (this.dir)
        {
            case 0:
                this.drawBall_UpOrDown(true);
                break;
            case 1:
                this.drawBall_UpOrDown(false);
                break;
            case 2:
                this.drawBall_RightOrLeft(false);
                break;
            case  3:
                this.drawBall_RightOrLeft(true);
                break;
            default :
                break;
        }
    };
    this.drawBall_RightOrLeft = function(isRight)
    {
        //document.write(state);
        //画眼睛，眼睛是公共的
        //画眼睛-外圈
        var eyeX;
        if(isRight == true)     //右
            eyeX = this.x - 5;
        else eyeX = this.x + 5;//左
        var eyeY = this.y-8;
        var eyeR = 6;//目前限定死这个
        cxt.beginPath();
        cxt.fillStyle="#000000";
        cxt.arc(eyeX,eyeY,eyeR,0,Math.PI * 2,false);
        cxt.fill();
        cxt.closePath();
        //画眼睛-眼球
        var qiuR = eyeR / 2;
        cxt.beginPath();
        cxt.fillStyle="#FF0000";
        cxt.arc(eyeX,eyeY,qiuR,0,Math.PI * 2,false);
        cxt.fill();
        cxt.closePath();
        switch(this.state)
        {
            //张嘴
            case 1:
                //画红球
                cxt.beginPath();
                cxt.fillStyle="#FF0000";
                //嘴巴大小为90°
                //画圆弧--脸
                if(isRight)
                    cxt.arc(this.x,this.y,this.r,1/4 * Math.PI,3/2 * Math.PI + 1/4 * Math.PI,false);
                else
                    cxt.arc(this.x,this.y,this.r,3/4 * Math.PI, Math.PI + 1/4 * Math.PI,true);
                cxt.stroke();
                cxt.closePath();
                cxt.beginPath();
                //画嘴巴
                var ax = 0,ay = 0;
                var bx = 0,by = 0;
                var temp = this.r * Math.sqrt(2)/2;
                if(isRight)
                    ax = this.x + temp;
                else
                    ax = this.x - temp;
                ay = this.y - temp;
                bx = ax;
                by = this.y + temp;
                cxt.moveTo(this.x,this.y);
                cxt.lineTo(ax,ay);
                cxt.moveTo(this.x,this.y);
                cxt.lineTo(bx,by);
                cxt.closePath();
                cxt.stroke();
                this.state = 0;
                break;
            //闭嘴
            case 0:
                //画圆弧--脸
                cxt.beginPath();
                cxt.arc(this.x,this.y,this.r,0,Math.PI * 2,false);
                cxt.stroke();
                cxt.closePath();
                //从圆心到嘴巴末点的连线
                cxt.beginPath();
                cxt.moveTo(this.x,this.y);
                if(isRight)
                    cxt.lineTo(this.x + this.r,this.y);
                else
                    cxt.lineTo(this.x - this.r,this.y);
                cxt.stroke();
                cxt.closePath();
                this.state = 1;
                break;
            default :
                break;
        }
    };
    this.drawBall_UpOrDown = function(isUp)
    {
        //document.write(state);
        //画眼睛，眼睛是公共的
        //画眼睛-外圈
        var eyeX = this.x - 5;
        var eyeY = this.y + 8;
        if(!isUp)
        {
            eyeX = this.x + 5;
            eyeY = this.y - 8;
        }

        var eyeR = 6;//目前限定死这个
        cxt.beginPath();
        cxt.fillStyle="#000000";
        cxt.arc(eyeX,eyeY,eyeR,0,Math.PI * 2,false);
        cxt.fill();
        cxt.closePath();
        //画眼睛-眼球
        var qiuR = eyeR / 2;
        cxt.beginPath();
        cxt.fillStyle="#FF0000";
        cxt.arc(eyeX,eyeY,qiuR,0,Math.PI * 2,false);
        cxt.fill();
        cxt.closePath();
        switch(this.state)
        {
            //张嘴
            case 1:
                //画红球
                cxt.beginPath();
                cxt.fillStyle="#FF0000";
                //嘴巴大小为90°
                //画圆弧--脸
                if(!isUp)
                    cxt.arc(this.x,this.y,this.r,1/4 * Math.PI ,3/4 * Math.PI,true);
                else
                    cxt.arc(this.x,this.y,this.r,Math.PI +  1/4 * Math.PI,3/2 * Math.PI+  1/4 * Math.PI,true);
                cxt.stroke();
                cxt.closePath();
                cxt.beginPath();
                //画嘴巴
                var ax = 0,ay = 0;
                var bx = 0,by = 0;
                var temp = this.r * Math.sqrt(2)/2;
                ax = this.x - temp;
                ay = this.y - temp;
                by = ay;
                bx = this.x + temp;
                if(!isUp)
                {
                    ax = this.x + temp;
                    ay = this.y + temp;
                    by = ay;
                    bx = this.x - temp;
                }
                cxt.moveTo(this.x,this.y);
                cxt.lineTo(ax,ay);
                cxt.moveTo(this.x,this.y);
                cxt.lineTo(bx,by);
                cxt.closePath();
                cxt.stroke();
                this.state = 0;
                break;
            //闭嘴
            case 0:
                //画圆弧--脸
                cxt.beginPath();
                cxt.arc(this.x,this.y,this.r,0,Math.PI * 2,false);
                cxt.stroke();
                cxt.closePath();
                //从圆心到嘴巴末点的连线
                cxt.beginPath();
                cxt.moveTo(this.x,this.y);
                if(!isUp)
                    cxt.lineTo(this.x ,this.y + this.r);
                else
                    cxt.lineTo(this.x ,this.y- this.r);
                cxt.stroke();
                cxt.closePath();
                this.state = 1;
                break;
            default :
                break;
        }

    };
}

4.

//2d碰撞检测引擎
//参数：玩家，阻碍物数组，敌人数组
function Collide(hero_,walls_,enemy_)
{
    this.hero = hero_;        //玩家
    this.walls = walls_;      //阻碍物数组
    this.enemys = enemy_;     //敌人数组
    this.isFind = false;      //临时变量，是否找到
    this.tempWall = null;     //临时变量
   // alert("cc");
    this.walls_y = this.walls.slice();  //这里不要写walls_，因为写这个的话，就和this.walls指向一个地方，排序后，walls也变了，终于找到原因，所以我用了复制
    this.isSort = false;      //数组是否排序。好像不能调用类中的函数，调用了没反应。。。。

    alert(this.walls);
    /**
     * @return {boolean}
     */
    //检测是否碰到,返回true,碰到，else没碰到
    this.IsCollide = function()
    {
        //是否找到离自己最近的墙壁

        //如果没有找到，则寻找

        switch (this.hero.getDir())
        {

            //上:
            case 0:
                if(this.tempWall == null)
                {
                    //     alert("wall_已被清空");
                    this.tempWall = this.getUpNestWall();
                }
                else
                {
                    if(this.hero.getMinY() <= this.tempWall.getWY()+this.tempWall.getHeight())
                    {

                      //  alert(this.tempWall.getWX());
                        return true;
                    }

                }
                break;
            //下
            case 1:
                if(this.tempWall == null)
                {
                    //     alert("wall_已被清空");
                    this.tempWall = this.getButtomNestWall();
                }
                else
                {
                    if(this.hero.getMaxY() >= this.tempWall.getWY())
                    {

                      //  alert(this.tempWall.getWX());
                        return true;
                    }

                }
                break;
            //左
            case 2:
                // alert("按左");//因为按下左的瞬间，球是先判断，并不是先转向，所以此时的方向还是上一个方向，这样便造成了错误，逻辑bug，应该按下后先转向，再判断该方向的障碍

                if(this.tempWall == null)
                {
                    //     alert("wall_已被清空");
                    this.tempWall = this.getLeftNestWall();
                }
                else
                {
                    if(this.hero.getMinX() <= this.tempWall.getWX()+this.tempWall.getWidth())
                    {

                        alert(this.tempWall.getWX());
                        return true;
                    }

                }
                break;
            //右
            case 3:
                //alert(this.hero.getMaxX());
                if(this.tempWall == null)
                {
                    //alert("NULL");
                    this.tempWall = this.getRightNestWall();
                }
                else
                {

                    //alert("墙壁的是：");
                    return this.hero.getMaxX() >= this.tempWall.getWX();
                }
                break;
            default : return false;
                break;

        }
    };
    //获得向右方向离自己最近的墙壁
    this.getRightNestWall = function ()
    {
        var y;
        y = 0;
        var temp = 0;
        //往右
        y = this.hero.getY();
        var i;
        var wallTemp = null;
        if(!this.isFind)
        {
                for(i = 0;i<this.walls.length;i++)
                {
                    temp = this.walls[i].getWY();
                    if(y >= temp && y<=temp + this.walls[i].height)
                    {
                        if(this.hero.getMaxX() <= this.walls[i].getWX())
                        {
                            wallTemp = this.walls[i];
                           // alert("......find");
                            alert("i="+i+"x="+wallTemp.getWX()+"y="+wallTemp.getWY()+"width="+wallTemp.getWidth()+"height="+wallTemp.getHeight());
                            this.isFind = true;      //找到
                           // alert("i="+i+"y="+wallTemp.getWY()+"height="+wallTemp.getHeight()+"temp="+temp+"dir="+ball.getDir()+"isRight="+isRight);
                            return wallTemp;//已经找到自己前进方向上离自己最近的墙壁，不再寻找，跳出循环
                        }
                    }

                }


        }
    };
    //获得左边离自己最近的墙
    this.getLeftNestWall = function()
    {
        var y;
        y = 0;
        var temp = 0;
        //往左
        y = this.hero.getY();
        var i;
        var wallTemp = null;
        var end = this.walls.length - 1;
        if(!this.isFind)
        {
            for(i = end;i>=0;i--)
            {
                temp = this.walls[i].getWY();
                if(y >= temp && y<=temp + this.walls[i].height)
                {
                    if(this.hero.getMinX() >= this.walls[i].getWX() + this.walls[i].getWidth() )
                    {

                        wallTemp = this.walls[i];
                        // alert("i="+i+"y="+wallTemp.getWY()+"height="+wallTemp.getHeight()+"temp="+temp+"dir="+ball.getDir()+"isRight="+isRight);


                        this.isFind = true;      //找到
                        //alert("i="+i+"y="+wallTemp.getWY()+"height="+wallTemp.getHeight()+"temp="+temp+"dir="+ball.getDir()+"isRight="+isRight);
                        return wallTemp;//已经找到自己前进方向上离自己最近的墙壁，不再寻找，跳出循环
                    }
                }

            }


        }
    };
    //获得上边离自己最近的墙
    this.getUpNestWall = function()
    {
        //如果没有排序，先排序
        if(this.isSort == false)
        {
            this.sortBy_y(this.walls_y);
            this.isSort = true;
            //alert(this.walls_y);
        }
        else
        {
            var x = 0;
            var temp = 0;
            //往右
            x = this.hero.getX();
            var i;
            var wallTemp = null;
            var end = this.walls_y.length - 1;
            if(!this.isFind)
            {
                for(i = end;i >= 0;i--)
                {
                    temp = this.walls_y[i].getWX();
                    if(x >= temp && x<=temp + this.walls_y[i].width)
                    {
                        if(this.hero.getMinY() >= this.walls_y[i].getWY() + this.walls_y[i].height)
                        {
                            wallTemp = this.walls_y[i];
                            // alert("i="+i+"y="+wallTemp.getWY()+"height="+wallTemp.getHeight()+"temp="+temp+"dir="+ball.getDir()+"isRight="+isRight);
                            this.isFind = true;      //找到
                            //alert("i="+i+"y="+wallTemp.getWY()+"height="+wallTemp.getHeight()+"temp="+temp+"dir="+ball.getDir()+"isRight="+isRight);
                            return wallTemp;//已经找到自己前进方向上离自己最近的墙壁，不再寻找，跳出循环
                        }
                    }

                }


            }
        }
    };
    this.getButtomNestWall = function()
    {
        //如果没有排序，先排序
        if(this.isSort == false)
        {
            this.sortBy_y(this.walls_y);
            this.isSort = true;
            //alert(this.walls_y);
        }
        else
        {
            var x = 0;
            var temp = 0;
            //往右
            x = this.hero.getX();
            var i;
            var wallTemp = null;
            if(!this.isFind)
            {
                for(i = 0;i<this.walls_y.length;i++)
                {
                    temp = this.walls_y[i].getWX();
                    if(x >= temp && x<=temp + this.walls_y[i].width)
                    {
                        if(this.hero.getMaxY() <= this.walls_y[i].getWY())
                        {
                            wallTemp = this.walls_y[i];
                            // alert("i="+i+"y="+wallTemp.getWY()+"height="+wallTemp.getHeight()+"temp="+temp+"dir="+ball.getDir()+"isRight="+isRight);
                            this.isFind = true;      //找到
                            //alert("i="+i+"y="+wallTemp.getWY()+"height="+wallTemp.getHeight()+"temp="+temp+"dir="+ball.getDir()+"isRight="+isRight);
                            return wallTemp;//已经找到自己前进方向上离自己最近的墙壁，不再寻找，跳出循环
                        }
                    }

                }


            }
        }
    };
    //排序，根据y来排，由小到大
    //冒泡排序算法
    this.sortBy_y = function(arr)
    {
       // alert("endxxxxx");
        var temp = null;
        var l =  arr.length;
        //alert("length="+l);
        for(var i = 0;i < l-1;i++)
        {
            for(var j = 0;j<l -1- i;j++)
            {

                if(arr[j].getWY() >= arr[j + 1].getWY())
                {
                    //交换
                    temp = arr[j];
                    arr[j] = arr[j+1];
                    arr[j+1] = temp;
                }

            }
        }


    };
    this.ColideReferenceClean = function()
    {
        this.isFind=false;
        //存放离自己最近的、如果继续直线前进不转向将会碰撞的wall
        this.tempWall=null;
       // alert("clean");
    };
}


5.

//游戏系统管理类

function GameSys(ox_,oy_,winWidth_,winHeight_)
{
   // this.can = document.getElementById(id_);//画布id
   // this.cxt = can.getContext("2d");
    this.ox = ox_;                      //游戏窗口的坐标原点
    this.oy = oy_;
    this.winWidth = winWidth_;          //窗口宽高
    this.winHeight = winHeight_;
    this.rightEdgeX = ox_ + winWidth_;  //四周边界值
    this.leftEgdeX =  ox_;
    this.topY =   oy_;
    this.buttomY = oy_ + winHeight_;
    this.walls = null;                  //地图上的静态景物，不会多，也不会少的物体，是一个数组

    document.write("xx");


}

6.

function Wall(x_,y_,width_,height_)
{
    this.x = x_;
    this.y = y_;
    this.width = width_;
    this.height = height_;
    this.getWX = function()
    {
        return this.x;
    };
    this.getWY = function()
    {
        return this.y;
    };
    this.getWidth = function()
    {
        return this.width;
    };
    this.getHeight = function()
    {
        return this.height;
    };

}



游戏运行截图：





                 

          

        

介于近期有其他优先级更高的事要做，此篇暂停更。抱歉。


GPU小码农
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
吃豆豆HTML5游戏源码
06-23
吃豆豆HTML5游戏源码，运行需要服务器环境，已经反复测试，放心使用。
html吃豆豆游戏代码,HTML5 Canvas 来回简单版吃豆豆
weixin_39613637的博客
05-31 304
JavaScript语言：JaveScriptBabelCoffeeScript确定//吃豆豆动画//var radius = 100; //大球半径var x = 150; //大球球的圆心坐标var y = 300;var bol = true;var canvas, cxt;window.onload = function() {canvas = document.getElementByI...
Unity项目 - 吃豆人Pacman
dhj66039的博客
05-26 2470
项目展示 Github项目地址：Pacman 试玩下载：Pacman 吃豆人 提取码brkv 涉及知识 切片制作 Animations 状态机设置，any state切换，重写状态机 按键读取进行整数距离的刚体移动 用射线检测碰撞性 渲染顺序问题 单、多路径的实现 协程延时 Button 按键功能 准备工作 Pixels Per Unit：多少像素相当于Unity一个单位，迷宫M...
学习2 游戏交互界面设计（贪食豆）
purers的博客
09-04 2742
说明： 课程教材《计算机游戏程序设计》（基础篇）（第3版） 提供示例代码，而课程实验在示例代码的基础上提出更高的实验要求。除此之外，本人也会额外加入些个人创意，希望同学们在参考之余也能加入自己的想法。 实现效果： 实验报告： 一、实验目的与要求 1.熟悉交互界面设计原理。 2.了解Cocos2d-x中的用户交互、触摸事件、碰撞检测机制。 二、实验内容与方法 1．完成...
HTML（1）吃豆豆网页代码
洛尧的博客
05-23 854
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>吃豆豆</title> <style> body{ margin: 0; } .main{ width: 200px; height:200px; border-radius:50%; margin:200px; animation: peas 1
HTML5+CSS3 吃豆豆代码
记录学编程后遇到的问题，注意点以及相关知识
10-25 1444
吃豆豆 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>吃豆豆动画</title> <style> body {
html吃豆豆小游戏源码,HTML5 Canvas吃豆豆动画
weixin_42525261的博客
06-03 253
JavaScript语言：JaveScriptBabelCoffeeScript确定var radius = 100; //大球半径var x = 200; //大球球的圆心坐标var y = 200;var bol = true;var canvas = document.getElementById('chidoudou');canvas.height = 800;canvas.width =...
Java语言制作吃豆人游戏
weixin_46353892的博客
03-04 2240
使用Java语言编程吃豆人游戏
【动画消消乐 】HTML+CSS 吃豆豆动画 073
海到无边天作岸 山登绝顶我为峰
06-11 5126
前言 Hello！小伙伴！ 首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ 哈哈 自我介绍一下 昵称：海轰 标签：程序猿一只｜C++选手｜学生 简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～） 学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！ 日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享一些源代码或者学习资料，欢迎关注～ 效果展示 思路 Demo代码 HTML <
经典游戏-吃豆豆
12-05
经典的小游戏，吃豆豆，分享！是一个FLA的源文件，喜欢的可以拿走！
吃豆豆游戏源码
01-07
基于JavaScript的h5游戏吃豆豆经典吃豆子游戏是一款益智类游戏，目标就是避开小怪物的追赶吃完所有豆子，吃了咖啡会暂时无敌，拿着大锤子追得怪物满处跑。
HTML5吃豆人游戏源码
08-01
HTML5有望成为网络游戏开发的热门新平台，其跨平台性已奠定了其未来发展的基础。本专题为那些愿意学习或使用HTML5及相关Web技术开发交互式游戏的开发者而编写，为大家讲解HTML5游戏开发基础教程及分享实战经验。 今时今日，我们将加入HTML5游戏开发的急先锋，明日将成为时代的弄潮儿。
基于HTML5的吃豆人游戏经典游戏开发样例
08-10
Pacman based on HTML5. 基于HTML5的吃豆人游戏 - 经典游戏开发样例
HTML5_canvas（设置画笔样式、左右跑动的小块、绘制路径的方法、写字板、绘制圆形的方法、吃豆豆、绘制文本、环形进度条）设置一个模板-附件资源
03-02
HTML5_canvas（设置画笔样式、左右跑动的小块、绘制路径的方法、写字板、绘制圆形的方法、吃豆豆、绘制文本、环形进度条）设置一个模板-附件资源
吃豆豆源代码
12-27
这个是简单的吃豆豆源代码，技术含量不高。
html5微信小游戏源码 吃豆豆游戏源码（仅用于参考）
01-25
html5微信小游戏源码 吃豆豆游戏源码（仅用于参考）html5微信小游戏源码 吃豆豆游戏源码（仅用于参考）html5微信小游戏源码 吃豆豆游戏源码（仅用于参考）html5微信小游戏源码 吃豆豆游戏源码（仅用于参考）html5...
html5微信小游戏源码 吃豆豆（仅用于参考）
01-25
html5微信小游戏源码 吃豆豆（仅用于参考）html5微信小游戏源码 吃豆豆（仅用于参考）html5微信小游戏源码 吃豆豆（仅用于参考）html5微信小游戏源码 吃豆豆（仅用于参考）html5微信小游戏源码 吃豆豆（仅用于参考）...
H5微信小游戏源码-吃豆豆游戏源码.zip
11-11
H5微信小游戏源码-吃豆豆游戏源码.zip
html5微信小游戏-吃豆豆游戏源码.zip
最新发布
06-18
html5微信小游戏-吃豆豆游戏源码.zip

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值