随笔分类 -  HTML5

HTML5游戏开发系列教程9(译)
摘要：原文地址：http://www.script-tutorials.com/html5-game-development-lesson-9/今天我们将继续使用canvas来进行HTML5游戏开发系列的文章。这次我准备了一个新游戏，是基于第4篇的游戏，但是增加了火球，敌人和碰撞检测。故，我们的龙可以发射火球来杀死敌人，并且记录分数。这样该游戏就有更多的交互性。之前的翻译文章可以点击这里：http://www.cnblogs.com/pigzhu/p/3234255.html第一步：HTML首先是我们基础的html代码： 1 2 3 4 5 HTML5... 阅读全文
posted @ 2013-08-25 22:28 bells 阅读(926) 评论(0) 推荐(0)
HTML5游戏开发系列教程8(译)
摘要：原文地址：http://www.script-tutorials.com/html5-game-development-lesson-8/ 这是我们最新一篇HTML5游戏开发系列文章。我们将继续使用canvas来进行HTML5游戏开发系列的文章。这次我将展示在你的项目中，如何使用Box2D的创建物体。Box2D是一个非常流行的开源物理引擎对于那些需要模拟2D物体的应用来说。在游戏开发中，2D物理引擎是个非常热门的话题。有了物理引擎的帮助，再设定环境和简单的规则，我们可以很容易的创建好玩的游戏。准备： 首先，你应该这里下载Box2d库。第一步：HTML 这次我们必须引用所有必需的库文件到... 阅读全文
posted @ 2013-08-03 10:19 bells 阅读(1027) 评论(0) 推荐(0)
HTML5游戏开发系列教程7(译)
摘要：原文地址：http://www.script-tutorials.com/html5-game-development-lesson-7/今天我们将完成我们第一个完整的游戏--打砖块。这次教程中，将展示怎样进行基本的碰撞检测和使用HTML5的本地存储。你可以使用鼠标和键盘来操作挡板，上一次游戏的持续时间和分数将会保存。前一篇的的介绍在HTML5游戏开发系列教程6(译)。第一步：HTML 1 2 3 4 5 HTML5 Game Development - Lesson 7 | Script Tutorials 6 7 ... 阅读全文
posted @ 2013-07-26 23:04 bells 阅读(583) 评论(0) 推荐(0)
HTML5游戏开发系列教程6(译)
摘要：原文地址：http://www.script-tutorials.com/html5-game-development-lesson-6/这是我们最新一篇HTML5游戏开发系列文章。我们将继续使用canvas来进行HTML5游戏开发系列的文章。这次是个完整的游戏例子，再现一款经典的电脑游戏--坦克大战。我将教你们使用交替的数组地图(alternative array-maps)，同时将说明如何检测活动对象(坦克)和周围环境之间的碰撞。前一篇的的介绍在HTML5游戏开发系列教程5(译)。第一步：HTMLindex.html 1 2 3 4 5 HT... 阅读全文
posted @ 2013-07-17 23:20 bells 阅读(551) 评论(0) 推荐(0)
HTML5游戏开发系列教程5(译)
摘要：原文地址：http://www.script-tutorials.com/html5-game-development-lesson-5/最终我决定准备下一篇游戏开发系列的文章，我们将继续使用canvas来进行HTML5游戏开发系列的文章。今天我准备音乐的例子(有点儿像音乐合成器)，它用到了使用CSS3来制作的基于DOM的对话框。为什么我使用独立的对话框--简单，最主要是因为CSS有很多处理标准元素的文本和样式的方法，且它可以使JS的代码简单，同时能提升例子程序的速度。所以你可以对这些对话框应用特定的样式，例如我利用CSS3定制了一个滚动条。前一篇的的介绍在HTML5游戏开发系列教程4(译)。 阅读全文
posted @ 2013-07-06 20:16 bells 阅读(719) 评论(0) 推荐(0)
HTML5游戏开发系列教程4(译)
摘要：原文地址：http://www.script-tutorials.com/html5-game-development-lesson-4/这篇文章是我们继续使用canvas来进行HTML5游戏开发系列的文章，我们要学习下一个元素：精灵动画和基本的声音处理。在我们这个示例中，你将看见一直正在飞的龙，我们能一直听见它翅膀扇动的声音，当鼠标释放事件发生时还有龙咆哮的声音。最后我们将教会龙移动到鼠标按下处。前一篇的的介绍在HTML5游戏开发系列教程3(译)。第一步：HTMLindex.html 1 2 3 4 5 HTML5 Game Developme... 阅读全文
posted @ 2013-07-06 09:00 bells 阅读(685) 评论(0) 推荐(0)
HTML5游戏开发系列教程3(译)
摘要：原文地址：http://www.script-tutorials.com/html5-game-development-navigating-your-spaceship-lesson-3/今天我们将会增加动画，和一些其他有趣的功能。我们这个示例包括一个在太空飞行的太空船，然后还有个新的组件-对话框。这个对话框包含两页，按钮用来切换这两页，并且会隐藏该对话框当第二次点击时。前一篇的的介绍在HTML5游戏开发系列教程2(译)。第一步：HTML<!DOCTYPE html><html lang="en" > <head> <meta c 阅读全文
posted @ 2013-06-10 12:32 bells 阅读(696) 评论(0) 推荐(0)
HTML5游戏开发系列教程2(译)
摘要：原文地址：http://www.script-tutorials.com/html5-game-development-lesson-2/今天我们将继续HTML5游戏开发系列。这篇文章继续学习基础知识(可能包含一些高级知识)。将会给你们介绍怎么用渐变色来填充图形，使用特定的字体来绘制文本，还有基本的动画，最重要的是UI元素Button的使用。之前的文章你可以通过访问http://www.cnblogs.com/pigzhu/archive/2013/05/26/3100018.html来读。我将继续利用前一篇的代码（增强它的功能）。我将利用特定的字体来绘制文本，用渐变色来填充变化大小的正方形， 阅读全文
posted @ 2013-06-03 16:00 bells 阅读(569) 评论(0) 推荐(0)
HTML5游戏开发系列教程1(译)
摘要：原文地址：http://www.script-tutorials.com/html5-game-development-lesson-1/ 以后的每篇文章都会加入一些新的东西。在这篇里我们创建了一个有7个顶点的图形，并在这些顶点上画圆圈，这样我们能通过拖动圆圈来改变顶点的位置。我们用半透明的颜色来填充该图形。对于刚开始来说，这样就足够了。第一步：HTMLindex.html<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> < 阅读全文
posted @ 2013-05-26 15:01 bells 阅读(745) 评论(0) 推荐(0)