1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 基于HTML5的超级玛丽游戏demo

基于HTML5的超级玛丽游戏demo

时间:2023-01-21 22:42:25

相关推荐

基于HTML5的超级玛丽游戏demo

【CSON原创】基于HTML5的超级玛丽游戏demo

功能说明:

基于HTML5的超级玛丽游戏的demo,方向键左右控制移动,方向键上控制跳跃,该游戏基于本人开发的HTML5游戏框架cnGameJS(详情点击这里:HTML5游戏框架cnGameJS开发实录)。

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

效果展示:

代码实现:

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

1.资源加载:

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

/* 图片src对象 */

var 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});

var maryGame={

initialize:function(){

},

update:function(){

},

draw:function(){

}

}

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

2.外部输入:

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

if(cnGame.input.isPressed("up")){

this.jump();

}

else if(cnGame.input.isPressed("right")){

this.moveRight();

}

else if(cnGame.input.isPressed("left")){

this.moveLeft();

}

else{

this.stopMove();

}

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

3.碰撞检测:

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

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

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

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

4.动画:

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

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

5.游戏循环

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

if(cg.loop&&!cg.loop.stop){//结束上一个循环

cg.loop.end();

}

cg.loop=new cg.GameLoop(self.gameObj);//开始新游戏循环

cg.loop.start();

6.场景:

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

this.background=new cnGame.View({src:srcObj.backgroundSrc,player:this.player,imgWidth:2301});//场景初始化

this.background.centerPlayer(true);//设置玩家在中央

this.background.insideView(this.player,"x");//保持玩家在可视区域内

最后附上游戏以及cnGameJS框架的源码下载:点击下载

欢迎转载,请标明出处:/Cson/archive//02/14/2350652.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。