【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框架的源码下载:点击下载
欢迎转载,请标明出处:http://www.cnblogs.com/Cson/archive/2012/02/14/2350652.html
转载于:https://www.cnblogs.com/Cson/archive/2012/02/14/2350652.html
【CSON原创】基于HTML5的超级玛丽游戏demo相关推荐
- 基于HTML5的超级玛丽游戏demo
[CSON原创]基于HTML5的超级玛丽游戏demo 功能说明: 基于HTML5的超级玛丽游戏的demo,方向键左右控制移动,方向键上控制跳跃,该游戏基于本人开发的HTML5游戏框架cnGameJS( ...
- 【CSON原创】HTML5游戏框架cnGameJS开发实录
cnGameJS是本人开发的一个基于HTML5的游戏框架,包括资源加载,碰撞检测,动画等模块.本系列文章主要介绍各个模块的开发流程,以及附上两个使用该框架进行开发的游戏demo. 目录: 1.核心函数 ...
- 信息系html5论文,基于HTML5的智力游戏设计电子信息工程本科学生毕业论文.doc
基于HTML5的智力游戏设计电子信息工程本科学生毕业论文 本科学生毕业论文(设计) 题目(中文):基于HTML5的智力游戏设计 (英文):Design of Intelligent Game Base ...
- 基于java的超级玛丽游戏系统设计与实现(项目报告+答辩PPT+源代码+部署视频)
项目报告 基于java的超级玛丽游戏的设计与实现 近年来,Java作为一种新的编程语言,以其简单性.可移植性和平台无关性等优点,得到了广泛地应用.J2SE称为Java标准版或Java标准平台.J2SE ...
- html5游戏任务书,基于HTML5的智力游戏设计 毕业论文(设计).docx
PAGE 本科学生毕业论文(设计) 题目(中文):基于HTML5的智力游戏设计 (英文):Design of Intelligent Game Based on HTML5 姓 名 学 号 院 (系) ...
- 基于HTML5坦克大战游戏简化版
之前我们有分享过不少经典的HTML5游戏,有些还是很有意思的,比如HTML5版切水果游戏和HTML5中国象棋游戏.今天要分享的是一款简化版的HTML5坦克大战游戏,方向键控制坦克的行进方向,空格键发射 ...
- 基于Java的超级玛丽游戏的设计与实现
项目介绍 本软件是针对超级玛丽小游戏的JAVA程序,进入游戏后首先按空格键开始,利用方向键来控制的马里奥的移动,同时检测马里奥与场景中的障碍物和敌人的碰撞,并判断马里奥的可移动性和马里奥的生命值.当马 ...
- 【CSON原创】HTML5游戏框架cnGameJS开发实录(精灵对象篇)
返回目录 1.什么是精灵对象(sprite)? 所谓的精灵对象,就是游戏中的一个具有行为的元素,以超级玛丽为例,玛丽,敌人都算是一个精灵对象.在cnGameJS框架中,精灵对象如下几个特点: 1.添加 ...
- 【CSON原创】HTML5游戏框架cnGameJS开发实录(外部输入模块篇)
返回目录 1.为什么我们需要外部输入模块? 在游戏中我们常常用到类似这样的操作:鼠标点击某位置,玩家对象移动到该位置,或者按鼠标方向键,玩家向不同方向移动,等等.这些操作无一不用与外部输入设备打交道. ...
最新文章
- docker学习系列7 容器化Node项目
- pwn(ctf)中常见的系统调用
- linux 内存清理 释放命令,Linux系统中的内存清理和释放命令总结
- c语言指针字符串逆序存放,C语言指针实现字符串的反转
- 每天学习点--------第五天(2017-10-9) 摘要: 常用的集合
- Flutter 即将占领整个 Web 开发
- mysql5.7.76安装,win7下mysql5.7.17安装配置方法图文教程
- paper 88:人脸检测和识别的Web服务API
- php合并两个有序链表,合并两个排序的链表
- 《线性代数及其应用》前言翻译
- SqlParameter数组
- 解决 VS2008安装过程更改路径的问题
- 属于计算机审计中测试信息系统的方法是,审计信息化问题浅析论文
- vue-cli 5 搭建 vue 项目
- 雷达原理---时频分析--2.短时傅里叶变换
- 怎样更改itunes备份位置_正确修改itunes备份文件路径方法
- 计算机主板z h b,主板的A系 B系 H系 Z系有什么区别?
- sim卡没坏但苹果手机无服务_苹果6sp无服务信号不好解决办法
- 如何把多个js函数绑定到事件上面
- matlab曲面拟合例子,matlab曲线曲面拟合讲解及实例
热门文章
- nitrous.io mysql_云IDE:Nitrous.io的介绍以及活用手段
- File类及相关方法介绍
- android浮动文本,android 添加浮动标签在textView最尾端,自动换行
- JavaWeb中使用session保持用户登录状态
- xml签名和普通数字签名
- 使用dumpsys检测Activity任务栈
- 第五章 ORacle用户管理(1)
- Xshell连接服务器桌面调用服务器的图形==Xmanager的===Xbrowser===XDMCP远程桌面===调用virt-mannager管理工具;、Xshell用普通用户调用图形
- 插入顶部_声屏障顶部斜插式安装可获得10-25dB的降噪量
- python36中文手册_python_36_文件操作4