canvas游戏开发系列（1）:基础知识

canvas基础知识 canvas是什么? canvas是html5的一个元素,可以说他的功能是html元素中最强大的一个. 举个栗子: 第一步:在页面中引入canvas标签,并且设置好宽高背景等样式 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"&g…

原文地址:http://www.script-tutorials.com/html5-game-development-lesson-9/ 今天我们将继续使用canvas来进行HTML5游戏开发系列的文章.这次我准备了一个新游戏,是基于第4篇的游戏,但是增加了火球,敌人和碰撞检测.故,我们的龙可以发射火球来杀死敌人,并且记录分数.这样该游戏就有更多的交互性. 之前的翻译文章可以点击这里:http://www.cnblogs.com/pigzhu/p/3234255.html 第一步:HTML 首…

HTML5 Canvas游戏开发实战 PDF扫描版

HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读者不仅知其然,而且知其所以然.在本书中,除了介绍了HTML5 Canvas的基础API之外,还重点阐述了如何在JavaScript中运用面向对象的编程思想来进行游戏开发. 本书在介绍每个游戏开发的过程时,都会包括游戏分析.开发过程.代码解析和小结等相关内容,以帮助读者了解每种类型游戏开发的详细步骤,…

前端开发：css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局前言楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^ 下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们…

炸弹人游戏开发系列（7）：加入敌人，使用A*算法寻路

前言上文中我们实现了炸弹人与墙的碰撞检测,以及设置移动步长来解决发现的问题.本文会加入1个AI敌人,敌人使用A*算法追踪炸弹人. 本文目的加入敌人,追踪炸弹人本文主要内容开发策略加入敌人实现寻路算法重构本文最终领域模型高层划分演示本文参考资料回顾上文更新后的领域模型查看大图开发策略首先实现“加入敌人”功能.通过参考“炸弹人游戏开发系列(4):炸弹人显示与移动“中的实现,可以初步分析出需要加入敌人图片.敌人帧数据和精灵数据.敌人精灵类EnemySprite.敌人层E…

HTML5游戏开发系列教程10(译)

原文地址:http://www.script-tutorials.com/html5-game-development-lesson-10/ 最后我们将继续使用canvas来进行HTML5游戏开发系列的文章.今天我准备了一个新游戏--SkyWalker.这游戏基本上算是一个射击模拟类型的游戏(有飞机和敌人).我们的目标是到达终点线.该游戏有几个关键的特征:使用了精灵来处理飞机和爆炸,可以按下多个按键(比如你可以移动飞机的同时发射子弹),a certain level length,增强的碰撞检测…

HTML5游戏开发系列教程8(译)

原文地址:http://www.script-tutorials.com/html5-game-development-lesson-8/ 这是我们最新一篇HTML5游戏开发系列文章.我们将继续使用canvas来进行HTML5游戏开发系列的文章.这次我将展示在你的项目中,如何使用Box2D的创建物体.Box2D是一个非常流行的开源物理引擎对于那些需要模拟2D物体的应用来说.在游戏开发中,2D物理引擎是个非常热门的话题.有了物理引擎的帮助,再设定环境和简单的规则,我们可以很容易的创建好玩的游戏.…

HTML5游戏开发系列教程7(译)

原文地址:http://www.script-tutorials.com/html5-game-development-lesson-7/ 今天我们将完成我们第一个完整的游戏--打砖块.这次教程中,将展示怎样进行基本的碰撞检测和使用HTML5的本地存储.你可以使用鼠标和键盘来操作挡板,上一次游戏的持续时间和分数将会保存. 前一篇的的介绍在HTML5游戏开发系列教程6(译). 第一步:HTML <!DOCTYPE html> <html lang="en"> &l…

HTML5游戏开发系列教程6(译)

原文地址:http://www.script-tutorials.com/html5-game-development-lesson-6/ 这是我们最新一篇HTML5游戏开发系列文章.我们将继续使用canvas来进行HTML5游戏开发系列的文章.这次是个完整的游戏例子,再现一款经典的电脑游戏--坦克大战.我将教你们使用交替的数组地图(alternative array-maps),同时将说明如何检测活动对象(坦克)和周围环境之间的碰撞. 前一篇的的介绍在HTML5游戏开发系列教程5(译). 第一…

HTML5游戏开发系列教程5(译)

原文地址:http://www.script-tutorials.com/html5-game-development-lesson-5/ 最终我决定准备下一篇游戏开发系列的文章,我们将继续使用canvas来进行HTML5游戏开发系列的文章.今天我准备音乐的例子(有点儿像音乐合成器),它用到了使用CSS3来制作的基于DOM的对话框.为什么我使用独立的对话框--简单,最主要是因为CSS有很多处理标准元素的文本和样式的方法,且它可以使JS的代码简单,同时能提升例子程序的速度.所以你可以对这些对话框应…