createjs | 易学教程

Createjs之围住神经猫

阅读更多关于 Createjs之围住神经猫

游戏介绍：包围移动的小球则游戏结束。 index.html  <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="easeljs.min.js"></script> <script src="Circle.js"></script> </head> <body> <canvas id="gameView" width="800px" height="800px"></canvas> <script src="app.js" type="text/javascript" charset="utf-8"></script> </body> </html> app.js /* * @Author: your name * @Date

基于Createjs的两个HTML5游戏案例

阅读更多关于基于Createjs的两个HTML5游戏案例

开发工具： vscode 一、什么是Createjs？二、Createjs之围住神经猫三、Createjs之看你有多色一、什么是Createjs？官网： http://www.createjs.cc/ createjs中包含以下四个部分： EaselJS：用于 Sprites、动画、向量和位图的绘制，创建 HTML5 Canvas 上的交互体验（包含多点触控） TweenJS：用于做动画效果 SoundJS：音频播放引擎 PreloadJS：网站资源预加载类似于SoundJS，PreloadJS，如果自己处理起来比较方便的话，也可以自己写，总的来说，它们相当于一个辅助作用，可选可不选。二、Createjs之围住神经猫游戏介绍： 1、首先这个游戏的玩法非常的简单，就是将图中的那只猫围住，不让它从旁边跑掉； 2、在游戏开始会有几个随机分布的点亮了的格子； 3、你需要点一个圈将猫围起来，这时候你会发现猫的姿势会改变； 4、而此时最终的目的就是让它无路可走 5、最终游戏结束了，看看你用了几步。主要代码： 1.判断可以走的方向 function getMoveDir(cat){ //分别判断能走的位置 var distanceMap = []; //left var can = true; for (var x = cat.indexX;x>=0;x--) { if

看你有多色游戏

阅读更多关于看你有多色游戏

运行截图： rect.js： createjs.Shape.call(this); this.setRectType = function (type) { this._RectType = type; switch (type) { case 1: this.setColor(color); break; case 2: this.setColor(Rectcolor); break; } } this.setColor = function (colorString) { this.graphics.beginFill(colorString); this.graphics.drawRect(0,0,getSize()/n-2,getSize()/n-2); this.graphics.endFill(); } this.getRectType = function () { return this._RectType; } this.setRectType(1); } Rect.prototype = new createjs.Shape();``` app.js: ```var stage = new createjs.Stage("gameView"); createjs.Ticker.setFPS(30); createjs.Ticker

CreateJS函数库简单效果案例

阅读更多关于 CreateJS函数库简单效果案例

开发工具：VsCode 案例一：围住神经猫小游戏游戏介绍：鼠标点击围住猫，不让它从旁边溜走。 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="easeljs.min.js"></script> <script src="circle.js"></script> </head> <body> <canvas id="gameView" width="800px" height="800px"></canvas> <script src="app.js" type="text/javascript" charset="utf-8"></script> </body> </html> app.js var stage = new createjs.Stage("gameView"); createjs.Ticker.setFPS(30); createjs.Ticker.addEventListener("tick",stage); var gameView = new createjs.Container(); gameView.x = 30; gameView.y = 30; stage.addChild(gameView); var

2D游戏开发课程第6次作业——CreateJs游戏案例

阅读更多关于 2D游戏开发课程第6次作业——CreateJs游戏案例

一、围住神经猫游戏案例游戏介绍：点击圆圈即可将圆圈点亮，用橘色圆圈将蓝色圆圈全部围住游戏结束。运行结果：代码： html代码—cat.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="easeljs.min.js"></script> <script src="Circle.js"></script> </head> <body> <canvas id="gameView" width="800px" height="800px"></canvas> <script src="app.js" type="text/javascript" charset="utf-8"></script> </body> </html> html代码—cicrle.html function Circle(){ createjs.Shape.call(this); this.setCircleType = function(type){ this._circleType = type; switch (type){ //初始颜色 case Circle.TYPE_UNSELECTED: this.setColor("#cccccc"); break; //点击过的颜色

HTML游戏开发

阅读更多关于 HTML游戏开发

一，寻找不同颜色游戏代码参考： index.html文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no"> <script src="easeljs.min.js"></script> <script src="Rect.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <title>Title</title> </head> <body> <div class="main"> <canvas id="gameView"></canvas> </div> <script src="app.js"></script> </body> </html> app.js文件： function Rect(n, color, Rectcolor) { createjs.Shape.call(this); this.setRectType = function (type) { this._RectType = type; switch (type) { case 1: this

HTML网页游戏测试

阅读更多关于 HTML网页游戏测试

本次课堂测验的内容为，围住猫，找出一个颜色不同的，并将之围困。实验代码如下： 1:app.js /* * @Author: your name * @Date: 2020-03-28 16:01:27 * @LastEditTime: 2020-03-28 16:01:28 * @LastEditors: your name * @Description: In User Settings Edit * @FilePath: \3.14d:\schoolsoftware\2d\3.28\app.js */ var stage = new createjs.Stage("gameView"); createjs.Ticker.setFPS(30); createjs.Ticker.addEventListener("tick",stage); var gameView = new createjs.Container(); gameView.x = 30; gameView.y = 30; stage.addChild(gameView); var circleArr = [[],[],[],[],[],[],[],[],[]]; var currentCat; //定义7种状态表示移动位置 var MOVE_NONE = -1,MOVE_LEFT = 0,MOVE_UP

基于CreateJS的HTML5的游戏开发案例

阅读更多关于基于CreateJS的HTML5的游戏开发案例

一、CreateJS的介绍 CreateJS为CreateJS库，是一款为HTML5游戏开发的引擎。官网： http://www.createjs.cc/ CreateJS 分为四个库： EaselJS：这个是核心，包括显示列表和事件机制； TweenJS：用于控制元件的缓动； SoundJS：用于播放声音； PreloadJS：用于预加载图片等；二、围住神经猫开发工具：vscode 游戏规则： 1、首先这个游戏的玩法非常的简单，就是将图中的那只猫围住，不让它从旁边跑掉； 2、在游戏开始会有几个随机分布的点亮了的格子； 3、你需要点一个圈将猫围起来，这时候你会发现猫的姿势会改变； 4、而此时最终的目的就是让它无路可走 5、最终游戏结束了，看看你用了几步。新建JS：app.js （1）创建画布 var stage = new createjs.Stage("gameView"); createjs.Ticker.setFPS(30); createjs.Ticker.addEventListener("tick",stage); var gameView = new createjs.Container(); gameView.x = 30; gameView.y = 30; stage.addChild(gameView); var circleArr = [

分享一个帮助你快速构建HTML5游戏的javascript类库

阅读更多关于分享一个帮助你快速构建HTML5游戏的javascript类库

3 月，跳不动了？>>> 日期：2012-4-23 来源： GBin1.com HTML5是一个非常重要的web标准，针对HTML5衍生了很多的富客户端javascript开发类库，今天这里我们将介绍一个非常棒的帮助你开发基于HTML5游戏的类库 - createJS 。 CreateJS是一个整合的模块化的类库，使用它可以帮助你开发富客户端的互动应用，这些类库的设计非常独立，包含了不同的模块，如下： EASEJS：用来处理HTML5的canvas TWEENJS：用来处理HTML5的动画调整和javascript属性 SOUNDJS：用来帮助简化处理音频相关的API PRELOADJS：管理和协调程序加载项的类库 ZOE：将SWF动画导出为EaseIJS的sprite的工具以上几个模块分别用来处理不同的功能，你可以根据自己的需要下载自己需要的类库。以下是一个使用createjs开发的在线HTML5游戏。在线HTML5游戏请使用Safari, Chrome, Firefox 或者 IE 9+ 来运行以上游戏。希望大家喜欢这个类库套件，如果你有什么建议和问题，请给我们留言！来源：分享一个帮助你快速构建HTML5游戏的javascript类库 - CreateJS 来源： oschina 链接： https://my.oschina.net/u/156697/blog

CreateJs游戏案例

阅读更多关于 CreateJs游戏案例

3 月，跳不动了？>>> 一、围住神经猫游戏游戏介绍：这个游戏的玩法非常的简单，就是蓝色色块（把它当作猫）围住，不让它从旁边跑掉；点击圆圈即可将圆圈点亮，当猫的周围都是橘色圆，游戏结束。运行结果：代码： cat.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="easeljs.min.js"></script> <script src="Circle.js"></script> </head> <body> <canvas id="gameView" width="800px" height="800px"></canvas> <script src="app.js" type="text/javascript" charset="utf-8"></script> </body> </html> cicrle.html function Circle(){ createjs.Shape.call(this); this.setCircleType = function(type){ this._circleType = type; switch (type){ //初始颜色 case Circle.TYPE_UNSELECTED: this

订阅 createjs