createjs之easeljs【游戏看你有多色（一）】

小游戏，点不同颜色的矩形块就算闯关成功了。

<script src="rect.js"></script>

<canvas height="400px" width="400px" id="gameView">您的浏览器无法显示</canvas>
<script src="app.js"></script>         html文件中引入两个js文件

rect.js

   rect封装类  rect具备的属性：大小与n相关，颜色与color和Rectcolor相关，传入这三个参数

function Rect(n,color,Rectcolor)
{createjs.Shape.call(this);  构造函数this.setRectType= function (type) {this._RectType=type;switch (type){case 1:this.setColor(color);break;case 2://this.setColor("#ff0000");
                this.setColor(Rectcolor);break;}}this.setColor=function(colorString){this.graphics.beginFill(colorString);this.graphics.drawRect(0,0,400/n-5,400/n-5);  每两个矩形中间都有5cm空隙this.graphics.endFill();}this.getRectType= function () {return this._RectType;}this.setRectType(1);  初始化为全是1类型
}
Rect.prototype=new createjs.Shape();  prototype意为rect是shape的一个实例化对象

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);                必须的几句，这个就不多说了。

var n=2;  宏定义每行/列有多少个矩形

function addRect()
{var cl=parseInt(Math.random()*1000000);var color="#"+cl;           随机color颜色，普通矩形               var cl2=parseInt(Math.random()*1000000);  随机Rectcolor颜色，要点的矩形。待我再研究研究颜色之间的关系吧，木有接触过啊。while(cl2==cl){var cl2=parseInt(Math.random()*1000000);}var rectcolor="#"+cl2;var x=parseInt(Math.random()*n);var y=parseInt(Math.random()*n);  随机要点矩形的位置for(var indexX=0;indexX<n;indexX++){for(var indexY=0;indexY<n;indexY++){var r=new Rect(n,color,rectcolor);gameView.addChild(r);   r.x=indexX;r.y=indexY;if(r.x==x&& r.y==y){r.setRectType(2);}r.x=indexX*(400/n);r.y=indexY*(400/n);     这里才是为矩形设置位置。if(r.getRectType()==2){r.addEventListener("click",function(){if(n<7){++n;}gameView.removeAllChildren();    清除所有图形addRect();     然后再加入下一组图形

                })}}}
}
addRect();   外部调用一定要有哦

createjs之easeljs【游戏看你有多色（一）】相关推荐

HTML5游戏-看你有多色
需引入easeljs-0.7.1.min.js html: <div align="center"><canvas width="400px" ...
html5黄游戏,HTML5游戏-看你有多色
需引入easeljs-0.7.1.min.js html: 倒计时:60s 分数:0Rect.js,在html中需要引入: function Rect(n,color){//个数 createjs.S ...
createjs之easeljs【游戏围住神经猫】
在html文件中引入 <script src="circle.js"></script> 创建圆类 <canvas width="800px ...
canvas 动画库 CreateJs 之 EaselJS（下篇）
本文来自网易云社区作者:田亚楠继承对应原文:Inheritance 我们可以继承已有的「显示对象」,创建新的自定义类.实现方法有很多种,下面介绍其中之一. 举例:实现一个继承于 Containe ...
createjs之Easeljs
Easeljs是什么 easeljs是在HTML5构建高性能2D交互的库,它提供了功能丰富的显示列表去允许你操作以及设置动画于图形.同时它对于鼠标以及移动端触摸交互提供了强劲的交互模型. 它在构建游戏 ...
从翻硬币游戏看敏捷开发
摘要: 敏捷开发还能这么玩? 本文分享自华为云社区<从翻硬币游戏看敏捷开发>,作者:敏捷的小智. 为了推广敏捷开发的理念,很多敏捷教练都会带领团队做一些敏捷小游戏,今天咱们就来聊聊&quo ...
1、CreateJS介绍-EaselJS
需要在html5文件中引入的CreateJS库文件是easeljs-0.7.1.min.js HTML5文件如下: 1 <!DOCTYPE html> 2 <html lang=&q ...
eos源码赏析（十二）：EOS之从“狼人游戏”看智能合约调用及权限分配（下）
接上篇,本篇从智能合约内部权限使用出发,结合"狼人游戏"源码,谈谈eosio中权限的分配及使用,本文主要分为以下三部分: 狼人团队的声明探析多签名账户权限eosio.code的 ...
c语言写一个格子涂色的游戏,不一样的涂色游戏小程序，这个魔力贴贴涂色游戏有点意思...
原标题:不一样的涂色游戏小程序,这个魔力贴贴涂色游戏有点意思 30000+游戏爱好者已加入我们! 沐沐带你发现好游戏! <魔力贴贴>游戏小程序好玩吗? <魔力贴贴>小游戏怎么玩 ...
Html5游戏框架createJS组件--EaselJS
CreateJS库是一款HTML5游戏开发的引擎,是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低HTML5项目的开发难度和成本,让开发者以熟悉的方式打造更具现代感的网络交互体验. 掌 ...

createjs之easeljs【游戏看你有多色（一）】

createjs之easeljs【游戏看你有多色（一）】相关推荐

最新文章

热门文章