请选择 进入手机版 | 继续访问电脑版
查看: 1748|回复: 193

[新手教程] 基于HTML5 - CSON的超级玛丽游戏demo

  [复制链接]
最佳答案
0 
guofinni 发表于 2017-1-3 14:13:46 | 显示全部楼层 |阅读模式


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

效果展示:
QQ截图20170103141751.jpg
QQ截图20170103142222.jpg
代码实现:
  该游戏demo主要包含的元素有:资源加载,外部输入,碰撞检测,动画,游戏循环以及场景,我将一步步进行分析讲解。


  1.资源加载:
    我们首先要有一个游戏对象,代表一个关卡。该对象有如下三个方法:initialize,update和draw。它们分别的功能是初始化,更新所有游戏元素和绘制所有游戏元素。在游戏开始前,必须先加载所有图片资源,之后就启动游戏循环,并调用游戏对象的初始化参数:
  1. /* 图片src对象 */
  2. var srcObj={
  3.     startSrc:"images/gamestart.png",
  4.     backgroundSrc:"images/background.png",
  5.     enemySrc:"images/enemy.png",
  6.     playerSrc:"images/player.png",
  7.     stoneSrc:"images/stone.png",
  8.     stoneSrc2:"images/stone2.png",
  9.     pillarSrc:"images/pillar.png",
  10.     bulletSrc:"images/bullet.png"
  11. }
  12. /* 初始化 */
  13. cnGame.init('gameCanvas',{width:500,height:400});
  14. var maryGame={
  15.     initialize:function(){
  16.     },
  17.     update:function(){

  18.     },
  19.     draw:function(){
  20.     }
  21. }
  22.     cnGame.loader.start([srcObj.backgroundSrc,srcObj.playerSrc,srcObj.enemySrc,srcObj.stoneSrc,srcObj.stoneSrc2,srcObj.bulletSrc,srcObj.pillarSrc],maryGame);
复制代码

 

 2.外部输入:
    由于需要键盘的方向键产生玛丽的移动,因此我们需要检测键盘方向键是否有按下,我们可以采用cnGameJS的isPressed(keyName)检测键盘的输入:
  1. if(cnGame.input.isPressed("up")){
  2.             this.jump();
  3.             
  4.         }
  5.         else if(cnGame.input.isPressed("right")){
  6.             this.moveRight();   
  7.         }
  8.         else if(cnGame.input.isPressed("left")){
  9.             this.moveLeft();
  10.         }
  11.         else{
  12.             this.stopMove();
  13.         }
复制代码

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

  
  3.碰撞检测:
    cnGameJS里封装了矩形和矩形的碰撞检测,因此我们可以利用来作为游戏对象与对象间的碰撞检测,这里的碰撞检测复杂点,分别检测了玛丽和敌人或石头的碰撞,并跟进情况改变玛丽的速度和加速度。
    1:玛丽与敌人碰撞,根据玛丽Y方向速度判断敌人die或者玛丽die。
    2:玛丽和石头碰撞,使玛丽Y方向速度为0,Y方向加速度为0.
    3:玛丽离开石头:恢复重力加速度。
  
  4.动画:
    这里的动画主要是指玛丽在移动时脚部的动画,我们可以在玛丽停止时使用图片,移动时使用动画。所谓的动画其实就是一张大图片内的帧动画,例如我们可以首先准备  一张这样的图片:
  
  之后只要使其每次显示不同位置的玛丽,即可完成动画:效果预览
  
  5.游戏循环
    游戏循环就是在资源加载后启动的循环,它接收用户传入的fps,从而计算出循环间隔,每次循环更新帧和绘制帧,生成游戏动画:
  1. if(cg.loop&&!cg.loop.stop){//结束上一个循环
  2.     cg.loop.end();
  3. }
  4. cg.loop=new cg.GameLoop(self.gameObj);//开始新游戏循环
  5. cg.loop.start();
复制代码

  
  6.场景:
    所谓的场景,就是玛丽移动的时候,玛丽保持在画布中央而背景相反方向移动的实现对象。场景对象不仅仅移动背景,还会把非玩家的游戏对象同样根据玩家的速度以相反方向移动:效果预览
  1. this.background=new cnGame.View({src:srcObj.backgroundSrc,player:this.player,imgWidth:2301});//场景初始化
  2. this.background.centerPlayer(true);//设置玩家在中央
  3. this.background.insideView(this.player,"x");//保持玩家在可视区域内
复制代码



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


游客,如果您要查看本帖隐藏内容请回复


打赏列表共打赏了0次

cry
还木有人打赏~
最佳答案
0 
jiangzi 发表于 2017-1-3 17:27:10 | 显示全部楼层
基于HTML5 - CSON的超级玛丽游戏
最佳答案
0 
jiangzi 发表于 2017-1-4 09:10:17 | 显示全部楼层
基于HTML5 - CSON的超级玛丽游戏demo~
最佳答案
0 
流光已逝 发表于 2017-1-4 09:36:24 | 显示全部楼层
童年的记忆
最佳答案
0 
zaqxswcde 发表于 2017-1-4 10:25:57 | 显示全部楼层
66666666666
最佳答案
0 
zhengwenyong95 发表于 2017-1-4 10:28:04 | 显示全部楼层
6666666666666666
最佳答案
0 
zhengwenyong95 发表于 2017-1-4 10:49:55 | 显示全部楼层
6666666666666
最佳答案
0 
zhengwenyong95 发表于 2017-1-4 10:50:03 | 显示全部楼层
6666666666666666666666666
您需要登录后才可以回帖 登录 | 注册

本版积分规则

推荐阅读 More>

© 2001-2015 9秒社团

合作伙伴

公司简介 | 联系方式
COPYRIGHT©2015 ZHONGQINGLONGTU NETWORK CO.LTD ALL RIGHTS RESERVED.ICP备11023195号-4
北京中清龙图网络技术有限公司
返回顶部 返回列表