如何开发一个简单的HTML5 Canvas 小游戏_百度知道
如何开发一个简单的HTML5 Canvas 小游戏
提问者采纳
那你要先了解一些HTML5 Canvas 的知识 然后准备一些你想开发的游戏的思路
其他类似问题
为您推荐：
html5的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁HTML5与Canvas做一个简单的Sokoban游戏
　作者: DoubleLife　编辑:
　　【IT168技术】在简要说明如何使用HTML5 canvas元素和JavaScript创建简单的游戏之后，我们现在需要写一个简单的Sokoban游戏。游戏的玩法是：将所有的箱子移动到指定标识的区域，游戏就结束了。　　游戏规则是：　　箱子只能推，不能拉　　一次只能移动一个箱子　　更多关于Sokoban的信息，请参见　　我们需要创建以下JavaScript类：&&&&&主要 &Game& 类&&&&&&Map& 表示&&&&&Player&&&&&Map 统计 & 显示过关数量，移动/推动数量。&&&&&Class for every &drawable& element :o&&&&Wallo&&&&Boxo&&&&Box on Goalo&&&&Flooro&&&&Empty spaceo&&&&Goalo&&&&Image Repository & 次类将存储游戏中所有的图片。　　Map表示法　　在下列代码中，所有地图都被存储在XML文件中，如下：&?xml version='<span style="color: #.0'?&&Levels&&Level No=&<span style="color: #& Width=&<span style="color: #& Height=&<span style="color: #&&&Row&&&&&&& #####&/Row&&Row&&&&&&& #&&&& #&/Row&&Row&&&&&&& #$&& #&/Row&&Row&&& ###&& $##&/Row&&Row&&& #&& $ $ #&/Row&&Row&### # ## #===######&/Row&&Row&#&&&& # ## #####&& ..#&/Row&&Row&# $&& $&&&&&&&&&&&&&&&&&& ..#&/Row&&Row&##### ### #@##&& ..#&/Row&&Row&&&&&&& #&&&&&&&& #########&/Row&&Row&&&&&&& #######&/Row&&/Level&....&/Levels&　　特殊字符的解释如下：&&&&&&#& & wall&&&&&&$& & box&&&&&& & or &=& & empty space&&&&&& & & Floor&&&&&&@& & player&&&&&&.& & goal&&&&&&*& & box on goal&&&&&&+& & player on goal　　我们为所有绘图元素创建一个基类：function DrawableElement() {this.GetImage = function () {//implement this method in your sub-class if your element is represented by image//this should return an Image objectreturn null;}this.GetFillStyle = function () {//implement this method in your sub-class if your element is represented by filled rectangle//this should return canvas &fillStyle& stringreturn null;}this.ImageRepository = null;}　　子类的样例如下：function Floor(){this.GetImage = function () {return this.ImageRepository.F}}JavaScript写法如下：Floor.prototype = new DrawableElement();Floor.prototype.constructor = F　　我们使用非常简单的WCF来返回游戏对应的某个级别。你也可以将每一级存为一个单独的XML文件，将AJAX URL的参数改为你自己的XML文件对应的URL路径，如下：　　&http:///level_& + levelNumber + &.xml&,　　使用jQuery既可以通过Web Service，也可以直接访问该XML。$.ajax({type: &GET&,url: &http://localhost/SokobanWCF/SokobanService.svc/GetMap/& + levelNumber,dataType: &xml&,success: this.ParseXmlMap,context: this});　　jQuery对于解析XML文档非常有用，以下代码展示如何构造一个地图(ParseXmlMap方法的一部分)$(xml).find(&Row&).each(function () {var wall = false;var row = $(this).text();for (var x = <span style="color: #; x & mapW x++) {// some rows are shorter than map width - fill rest with Empty elementsif (x &= row.length) {mapRef[x][y] = new Empty();} else {switch (row[x]) {case & &:// if we had wall already that mean we need to insert a Floor element,// for Empty elements that are between walls on some maps we are using '=' characterif (wall) {mapRef[x][y] = new Floor();}else {mapRef[x][y] = new Empty();}case &#&:mapRef[x][y] = new Wall();wall = true;case &$&:mapRef[x][y] = new Box();(...)　　我们这里使用二位数组来表示Map(地图)与Level(游戏等级)的映射关系。首先，我们迭代XML元素，然后再迭代Row元素中的每一个字符。　　鉴于XML文档的下载与解析是费时的，这里我们给Map对象一个Loaded标记，这样来判断XML文档是否解析完毕以及地图是否准备就绪。在Game类的LoadContent方法，我们设置一个计时器，来检查地图是否就绪(每50ms检查一次)：this.InitialUpdateDraw = setInterval(this.InitialUpdateRun, this.CheckInterval);InitialUpdateRun 方法如下 :this.InitialUpdateRun = function (ev) {if (_map.Loaded && _imageRepository.Loaded()) {document.sokobanGame.Update(ev);document.sokobanGame.Draw();//we don't need timer anymoreclearInterval(document.sokobanGame.InitialUpdateDraw);}}　　之所以这样做，是因为但某一游戏等级被加载时，我们需要更新游戏变量，并显示游戏级别。之后，用户可以根据需要选择调用游戏的Update与Draw等方法。　　Map对象的Updated方法非常简单。我们只需要检查游戏结束的条件，然后更新Move与Push操作的数量即可。this.Update = function () {//check for end game conditionsif (this._goals & <span style="color: # && this._goalsAchived == this._goals) {this.Finished = true;}_levelStatistics.Update();}　　最后是MapDraw方法。由于有了DrawableElement基类，通过继承，我们只需要迭代二位数组，既可以为每一个元素正确绘制图片。这也是正式JavaScript对于多态的实现。this.Draw = function (canvasContext) {var xCanvasPos = <span style="color: #;var yCanvasPos = <span style="color: #;var tileSize = <span style="color: #;for (var y = <span style="color: #; y & this._ y++) {xCanvasPos = <span style="color: #;for (var x = <span style="color: #; x & this._ x++) {var img = this._map[x][y].GetImage();if (img != null) {// draw imagecanvasContext.drawImage(img, xCanvasPos, yCanvasPos);} else {// draw rectanglecanvasContext.fillStyle = this._map[x][y].GetFillStyle();canvasContext.fillRect(xCanvasPos, yCanvasPos, tileSize, tileSize);}xCanvasPos += tileS}yCanvasPos += tileS}// this is used to properly position level statistics according to the levelthis.OnScreenWidht = xCanvasPthis.OnScreenHeight = yCanvasP_levelStatistics.Draw(canvasContext);}　　Player movement　　Player movement操作由事件keyup处理。这里我使用WASD按钮处理用户移动事件。W = up, S = Down, A = Left, D = Right.this.KeyCheck = function (event) {var KeyID = event.keyCswitch (KeyID) {case <span style="color: #: // Wthis.Move(this.MoveDirection.Up);case <span style="color: #: // Athis.Move(this.MoveDirection.Left);case <span style="color: #: // Dthis.Move(this.MoveDirection.Right);case <span style="color: #: // Sthis.Move(this.MoveDirection.Down);}}　　很显然，用户不可能移动两个箱子，或者穿墙。我们需要一个方法来保证用户移动的规则是正确的。this.ValidateMove = function (targetCell, nextCell) {var posToMove = targetCell.if (posToMove == Wall) {// wall is next, player cannot move therereturn false;}var nextObject = nextCell.if ((posToMove == Box || posToMove == BoxOnGoal) && (nextObject == Wall || nextObject == Box || nextObject == BoxOnGoal)) {//player attempts to push box, if the next element after the box is wall or another box & player cannot movereturn false;}return true;}　　这里比较有意思的是constructor属性。该属性表示的是一个用于创建对象的函数。那样，我们可以轻易地检查围绕Player都有哪些类型的元素。　　在前面的章节中，我们创建Wall, Floor以及DrawableElement基类的同时，我也采取了下列继承的方式。　　Floor.prototype = new DrawableElement();　　Floor.prototype.constructor = F　　第二行非常重要。没有这一行，Floor对象的返回函数为DrawableElement。这样我们就不能调用以上所述的ValidateMove方法了。　　这里我们忽略了改变玩家位置的所有的代码。实际上，代码仅仅简单的改变Player对象的位置，采取的方式的改变数组元素，通过demo页面我们可以查看相关源代码。　　游戏通关后进入下一关　　我们使用cook加载与保存前面所述的用户状态。完成通关后，我们插入cookie指定需要加载的游戏级别。LoadContent从cookie中读取数据，加载正确的地图。如此依赖，用户可以关闭浏览器，再打开时还原到上次通过状态。Cookie的加载与保存是又一个cookie插件完成的，它对应的网址/project/cookie　　这里我已经加入了&恭喜通过&字样的弹出窗口，表示用户已经完成了上一关。接着给出一个按钮，提示&进入下一关&。自动地图加载功能对我而言似乎不太友好。　　我的sokoban版本包括40个经典级别。用户通过一次就能打通关的几率应该不大。　　好了，大功告成。
大学生分期购物销量榜
已有条评论
IT168企业级
正在努力加载文档，请稍等…人气：98263
访问用户量：98
笔记经验：55
总积分：155
级别：普通会员
搜索本笔记
ta的交流分类
ta的全部笔记
浏览(4239)|(1)
&&交流分类：|笔记分类:
11.1：游戏分析、顶住物体、抛出物体基本动画效果
游戏分析：
o功能： 用蘑菇顶住香焦不给落地，香蕉碰撞完顶部的奖品为赢
o对象： a、蘑菇& b、香蕉&& c、奖品(茄子)
o界面：使用canvas (画布)来描绘游戏
顶住物体、抛出物体基本动画效果
o说明：顶住物体指蘑菇，抛出物体指香蕉 ，先使蘑菇跟随鼠标动起来，然后，让香蕉在画布上实现抛出的效果。
o实现步骤如下：
&&&&&& 1、定义全局变量
&&&&&& 2、定义蘑菇实例
&&&&&& 3、用canvas把蘑菇绘制出来
&&&&&& 4、使蘑菇随鼠标动起来
&&&&&& 5、定义香蕉实例
&&&&&& 6、用canvas把香蕉绘制出来
&&&&&& 7、使香蕉在画布中显现抛出来的效果
o代码编写与效果演示
11.2：抛出物体碰到边界、顶住物体的处理
抛出物体移动碰到边界时的反弹处理
o写一个碰撞处理函数 HasActHitEdge()
o在游戏循环GameLoop()尾部中加入检测边界函数
抛出物体移动碰到顶住物体向上反弹的效果
o写一个通用的判断2个物体是否碰撞的函数 chkHitEach
o2个物体碰撞发生的事件以及处理 HasActHitMov()
o在游戏循环GameLoop()尾部中加入2个物体碰撞函数 HasActHitMov()
o先来分析如何检测两个物体是否碰撞上了，请看示意图：
o1。碰撞前，各位置点说明图。
2。碰撞后，各位置点说明图。
11.3：绘制奖品、抛出物体碰到奖品的处理方法。
使用一个数组装载所有奖品
o& 1、定义全局变量
o& 2、初始化全局变量
o& 3、定义奖品数据及实例
o& 4、把奖品装进数组
o& 5、从数组中取出奖品并描绘
o& 6、在游戏循环GameLoop()中加入描绘奖品的函数
撞到奖品之后的处理
o1、增加奖品的hit属性
o增加奖品的hit属性 ，默认值为false。当奖品撞到的时候，hit的属性值为true。描绘奖品的时候检测该hit值。
o2、增加抛出物体撞到奖品的事件
o3、在描绘奖品函数中检测是否被碰撞，没被撞过，则描绘出来
11.4：增加开关按钮、添加生命数条、添加得分的处理方法。
添加开始按钮
o1、在页面中增加一个位于画布中间的开始按钮
o2、定义控制游戏开始的全局变量
o3、编写一个开始或暂停的函数
o4、为开始按钮增加相应事件
添加生命数条
o1、定义生命所需的全局变量
o2、初始化生命图片
o3、在画布中绘制生命条数图形
o4、当抛出物体碰到底线时，减少1条生命
o5、当生命条数等于0或者奖品消灭完，显示游戏结束的提示，并终止游戏
o1、定义分数所需的全局变量
o2、初始化分数图片
o3、为奖品对象新增加一个分数属性
o4、在初始化奖品数组时，加入分数
o5、当抛出物体撞到奖品时，根据被撞奖品的分数增加总分值
o6、最后绘制该总分数
o代码编写与效果演示
&转载请注明【
相关笔记推荐
浏览(4239)|(1)
&&交流分类：|笔记分类:
学习了，不错
版权所有 Copyright(C) 私塾在线学习网HTML5打地鼠小游戏
相关最新源码
HTML5打地鼠小游戏是一个基于HTML5 Canvas和Audio开发的网页版小游戏。游戏建议:1.全神贯注，手眼并用，左右两手分别负责各自一边会更加有效。2.偶尔会看到出来的不是地鼠而是更可爱的兔子，也不要心软，照样砸下去。3.不仅要求速度快，而且要准，有时候因为心急，可能砸错了洞口，也是要扣分的哦！
&&&&&&&&&&&&&&&&&&&&&&&&&
源码下载地址