详细介绍基于HTML5的超级玛丽游戏demo的示例代码-H5教程-PHP中文网

详细介绍基于HTML5的超级玛丽游戏demo的示例代码

黄舟

发布： 2017-03-24 15:54:54

原创

3663人浏览过

功能说明：

　　基于HTML5的超级玛丽游戏的demo，方向键左右控制移动，方向键上控制跳跃，该游戏基于本人开发的HTML5游戏框架cnGameJS。

　　请用最新版本浏览器查看。

效果展示：

立即学习“前端免费学习笔记（深入）”；

代码实现：

　　该游戏demo主要包含的元素有：资源加载，外部输入，碰撞检测，动画，游戏循环以及场景，我将一步步进行分析讲解。

　　1.资源加载：

　　　　我们首先要有一个游戏对象，代表一个关卡。该对象有如下三个方法：initialize，update和draw。它们分别的功能是初始化，更新所有游戏元素和绘制所有游戏元素。在游戏开始前，必须先加载所有图片资源，之后就启动游戏循环，并调用游戏对象的初始化参数：

 srcObj={
    startSrc:"images/gamestart.png",
    backgroundSrc:"images/background.png",
    enemySrc:"images/enemy.png",
    playerSrc:"images/player.png",
    stoneSrc:"images/stone.png",
    stoneSrc2:"images/stone2.png",
    pillarSrc:"images/pillar.png",
    bulletSrc:"images/bullet.png"
}

cnGame.init('gameCanvas',{width:500,height:400});
 maryGame={
    initialize:(){
    },
    update:(){

    },
    draw:(){
    }
}
    cnGame.loader.start([srcObj.backgroundSrc,srcObj.playerSrc,srcObj.enemySrc,srcObj.stoneSrc,srcObj.stoneSrc2,srcObj.bulletSrc,srcObj.pillarSrc],maryGame);

登录后复制

　2.外部输入：

　　　　由于需要键盘的方向键产生玛丽的移动，因此我们需要检测键盘方向键是否有按下，我们可以采用cnGameJS的isPressed（keyName）检测键盘的输入：

        (cnGame.input.isPressed("up")){
.jump();

        }
 (cnGame.input.isPressed("right")){
.moveRight();    
        }
 (cnGame.input.isPressed("left")){
.moveLeft();
        }
{
.stopMove();
        }

登录后复制

　　　　这样就可以通过不同的键盘输入使玛丽进行不同的行为。　　

　　3.碰撞检测：

CodeSquire

AI代码编写助手，把你的想法变成代码

103

查看详情

　　　　cnGameJS里封装了矩形和矩形的碰撞检测，因此我们可以利用来作为游戏对象与对象间的碰撞检测，这里的碰撞检测复杂点，分别检测了玛丽和敌人或石头的碰撞，并跟进情况改变玛丽的速度和加速度。

　　　　1：玛丽与敌人碰撞，根据玛丽Y方向速度判断敌人die或者玛丽die。

　　　　2：玛丽和石头碰撞，使玛丽Y方向速度为0，Y方向加速度为0.

　　　　3：玛丽离开石头：恢复重力加速度。　　

　　4.动画：

　　　　这里的动画主要是指玛丽在移动时脚部的动画，我们可以在玛丽停止时使用图片，移动时使用动画。所谓的动画其实就是一张大图片内的帧动画，例如我们可以首先准备　　一张这样的图片：

　　之后只要使其每次显示不同位置的玛丽，即可完成动画：效果预览　　

　　5.游戏循环

　　　　游戏循环就是在资源加载后启动的循环，它接收用户传入的fps，从而计算出循环间隔，每次循环更新帧和绘制帧，生成游戏动画：

                    (cg.loop&&!cg.loop.stop){                        cg.loop.end();
                    }
                    cg.loop= cg.GameLoop(self.gameObj);                    cg.loop.start();

登录后复制

　　6.场景：

　　　　所谓的场景，就是玛丽移动的时候，玛丽保持在画布中央而背景相反方向移动的实现对象。场景对象不仅仅移动背景，还会把非玩家的游戏对象同样根据玩家的速度以相反方向移动：效果预览

            .background= cnGame.View({src:srcObj.backgroundSrc,player:.player,imgWidth:2301});            .background.centerPlayer();            .background.insideView(.player,"x");

登录后复制

以上就是详细介绍基于HTML5的超级玛丽游戏demo的示例代码的详细内容，更多请关注php中文网其它相关文章！