首页 > 代码库 > HTML5小游戏——看你有多色
HTML5小游戏——看你有多色
使用了封装了canvas的create.js库来实现的。
最终效果:
工程:
Rect.js
/* * 方块类 */ function Rect(n,color,specialColor){ createjs.Shape.call(this); /** * 设置方块的类型 */ this.setRectType=function(type){ this._RectType=type; switch(type){ case 1: this.setColor(color); break; case 2: this.setColor(specialColor); break; } } /** * 获取方块的类型 */ this.getRectType=function(){ return this._RectType; } /** * 设置方块的颜色+绘制方块 */ this.setColor=function(colorString){ this.graphics.beginFill(colorString); this.graphics.drawRect(0,0,400/n-5,400/n-5); this.graphics.endFill(); } //方块的默认类型是1 this.setRectType(1); } Rect.prototype=new createjs.Shape();
seeColor.js
/** * 绘制舞台 */ var stage=new createjs.Stage("gameView"); var gameView=new createjs.Container(); stage.addChild(gameView); //var s=new createjs.Shape(); //s.graphics.beginFill("#00FF00"); //s.graphics.drawRect(0,0,100,100); //s.graphics.endFill(); //gameView.addChild(s); createjs.Ticker.setFPS(30); createjs.Ticker.addEventListener("tick",stage); //特殊的那个方块的容差 var diffDegree=30; //n*n的矩阵 var n=2; var maxN=7; //在随机生成颜色的时候[0,500] [500,255*255*255]这两个区间内的颜色将被排除 var edgeColor=10; function addRect(){ //随机颜色 var randR=Math.floor(Math.random()*255-edgeColor*2)+edgeColor; var randG=Math.floor(Math.random()*255-edgeColor*2)+edgeColor; var randB=Math.floor(Math.random()*255-edgeColor*2)+edgeColor; //特殊方块的颜色 var specialR=randR-diffDegree>edgeColor?randR-diffDegree:randR+diffDegree; var specialG=randG-diffDegree>edgeColor?randG-diffDegree:randG+diffDegree; var specialB=randB-diffDegree>edgeColor?randB-diffDegree:randB+diffDegree; var color="rgb("+randR+","+randG+","+randB+")"; var specialColor="rgb("+specialR+","+specialG+","+specialB+")"; //特殊方块的位置 var specialX=Math.floor(Math.random()*n); var specialY=Math.floor(Math.random()*n); //绘制所有方块 for(var indexX=0;indexX<n;indexX++){ for(var indexY=0;indexY<n;indexY++){ var r=new Rect(n,color,specialColor); gameView.addChild(r); r.x=indexX; r.y=indexY; if(r.x==specialX && r.y==specialY){ r.setRectType(2); } r.x=indexX*(400/n); r.y=indexY*(400/n); if(r.getRectType()==2){ //点到特殊方块的时候重绘 r.addEventListener("click",function(){ if(n<maxN){ ++n; } gameView.removeAllChildren(); addRect(); }); } } } } addRect();
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>See Color</title> </head> <body> <canvas id="gameView" width="400px" height="400px"></canvas> <script type="text/javascript" src="http://www.mamicode.com/js/easeljs-0.8.2.min.js"></script> <script type="text/javascript" src="http://www.mamicode.com/js/Rect.js"></script> <script type="text/javascript" src="http://www.mamicode.com/js/seeColor.js"></script> </body> </html>
github下载地址:https://github.com/BenDanChen/seeColor
参考资料:
极客学院视频教程地址 http://www.jikexueyuan.com/course/167.html
create.js
英文站 http://createjs.com/
中文站 http://www.createjs.cc/
HTML5小游戏——看你有多色
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。