当前位置：
文档之家› HTML5游戏开发案例教程PPT-第五章
HTML5游戏开发案例教程PPT-第五章
编写app.js源代码画出神经猫所站立的圆形测试脚本。
var stage = new createjs.Stage("gameView"); var gameView = new createjs.Container(); stage.addChild(gameView);
var s = new createjs.Shape(); s.graphics.beginFill("#ff0000"); s.graphics.drawCircle(50,50,25); s.graphics.endFill(); gameView.addChild(s); createjs.Ticker.setFPS(30); createjs.Ticker.addEventListener("tick",stage); 程序运行的效果如下如图5-6所示。
App.js中添加如下代码。
var stage = new createjs.Stage("gameView"); createjs.Ticker.setFPS(30); createjs.Ticker.addEventListener("tick",stage); var gameView = new createjs.Container(); stage.addChild(gameView);
5.5.2使用CreateJS围住神经猫
CreateJS的主要中提供了EaselJS、TwenJS、SoundJS和PreloadJS的下载， 前面章节已经做过详细的说明，神经猫开发只用到EaselJS，点击主页的EaselJS链接，EaselJS 库文件下载界面如图5-5所示。
案例实战篇
第5章 HTML5小型游戏
引入：
CreateJS 是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包，旨在降低 HTML5 项目的开发难度和成本，让开发者以熟悉的方式打造更具现代感的网络交 互体验，本章主要用CreateJS来编写两款非常流行的小型游戏：围住神经猫和看 你有多色游戏，可以看出，只要很少的代码块就可以实现让人意想不到的游戏效 果，心动了吧，一起开始学习吧。
function Circle()用面向对象的方法来定义Circle类的一个实 体 ， createjs.Shape.call(this) 回 调 一 下 这 个 方 法 ， setCircleType 方法设置圆的三种颜色 1 为 ("#cccccc") 、 2 为 ("#ff6600")、3为("#0000ff")；setColor 方法绘制制定颜色的 圆形；getCircleType得到圆形的颜色； setCircleType(1)默认 的圆形颜色为("#cccccc")；
5.1.3绘制围住神经猫游戏页面元素
本节主要学习HTML5游戏围住神经猫UI的绘制。这里没有神经猫的那张图片，所以不引入这张 图片，而用另外一张颜色的圆形代表这只神经猫。
增加主要的<script src="Circle.js"></script>代码，修改<script src="app.js"></script>来绘制 神经猫游戏的圆形背景与神经猫效果。
加Hale Waihona Puke 库代码<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="easeljs-0.7.1.min.js"></script> </head> <body> <canvas width="800px" height="800px" id="gameView"></canvas> <script src="app1.js"></script> </body> </html>
添加舞台stage，setFPS(30)刷新频率为30帧/秒，createjs.Container();创建一个container对 象来舞台元素。
接着创建Circle.js文件来绘制圆形形状。
function Circle(){ createjs.Shape.call(this); this.setCircleType = function(type){ this._circleType = type; switch (type){ case 1: this.setColor("#cccccc"); break; case 2: this.setColor("#ff6600"); break; case 3: this.setColor("#0000ff"); break; } } this.setColor = function (colorString){ this.graphics.beginFill(colorString); this.graphics.drawCircle(0,0,25); this.graphics.endFill(); } this.getCircleType = function(){ return this._circleType; } this.setCircleType(1); } Circle.prototype = new createjs.Shape();
5.5.1介绍围住神经猫游戏的玩法
图5-1所示是其初始界面。 神经猫游戏界面上只有2种颜色，猫只能走灰色的点，而用鼠标点击灰色点后就会变成橙色的 点，只要点到橙色部分点围住小猫就算成功，如图5-2所示。 如图5-3所示，每次围住小猫后都会弹出一个系统全国排名比分，看看用了几步就可将小猫围 住 如图5-4所示，如果没有围住，则跳出一个如下对话框。 本节HTML5围住神经猫游戏网页版是一款基于HTML5 canvas、egret_loader.js和jquery.min.js、 Createjs等技术制作的围住神经猫网页版游戏围住神经猫的游戏，该代码都是开源的，对学习 网页游戏制作的学员有非常好的借鉴作用。
