使用了封装了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="js/easeljs-0.8.2.min.js"></script>

<script type="text/javascript" src="js/Rect.js"></script>

<script type="text/javascript" src="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/

H5小游戏——看你有多色的更多相关文章

  1. 青瓷qici - H5小游戏 抽奖机 “one-arm bandit”

    写在前面 本文实现一个简单的抽奖效果,使用青瓷qici引擎,其中应用了Tween动画,粒子系统,遮罩,UI界面布局,项目设置,发布等功能呢. 目前开发采用1.0.7版本,后续如果界面有所变化请参考这个 ...

  2. “倔驴”一个h5小游戏的实现和思考（码易直播）——总结与整理

    3月23日晚上8点半(中国队火拼韩国的时候),做了一期直播分享.15年做的一个小游戏,把核心代码拿出来,现场讲写了一遍,结果后面翻车了,写错了两个地方,导致运行效果有点问题,直播边说话边写代码还真不一 ...

  3. 原生JS实现的h5小游戏-植物大战僵尸

    代码地址如下:http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结 ...

  4. 从零开始开发一款H5小游戏(二) 创造游戏世界，启动发条

    本系列文章对应游戏代码已开源 Sinuous game 上一节介绍了canvas的基础用法,了解了游戏开发所要用到的API.这篇文章开始,我将介绍怎么运用这些API来完成各种各样的游戏效果.这个过程更 ...

  5. 从零开始开发一款H5小游戏(三) 攻守阵营，赋予粒子新的生命

    本系列文章对应游戏代码已开源 Sinuous game. 每个游戏都会包含场景和角色.要实现一个游戏角色,就要清楚角色在场景中的位置,以及它的运动规律,并能通过数学表达式表现出来. 场景坐标 canv ...

  6. Egret白鹭H5小游戏开发入门（二）

    前言: 昨天的文章中简单的介绍了Egret白鹭引擎从安装到基本的使用配置等问题,今天着重介绍H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明,开始布局等等. 整体概况: 根据上一篇 ...

  7. Egret白鹭H5小游戏开发入门（三）

    前言: 在上一篇文章中着重介绍了H5小游戏开发的起步阶段,如Wing面板的使用,素材的处理,类的说明等等,那么今天主要是涉及到场景的创建,loading的修改等等的代码编写. 对于这一节,我在讲解的过 ...

  8. Egret白鹭H5小游戏开发入门（一）

    前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJS,玩得了Egret,又学过PIXI.js. ...

  9. 开发H5小游戏

    Egret白鹭H5小游戏开发入门(一)   前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJ ...

随机推荐

  1. 【Linux 命令】- tail命令

    linux tail命令用途是依照要求将指定的文件的最后部分输出到标准设备,通常是终端,通俗讲来,就是把某个档案文件的最后几行显示到终端上,假设该档案有更新,tail会自己主动刷新,确保你看到最新的档 ...

  2. python mysql查询结果乱码

    在connect()方法中传入charset='utf8'参数即可. conn = MySQLdb.connect(host=get_config_values('mysql', 'host'), p ...

  3. Java对象空间分配流程

    对象空间分配流程如下:   针对这个流程,分别解释一下每一个选项的使用场景. 栈上分配: 栈上分配的基础在于逃逸分析,逃逸分析可以得到三种对象的逃逸状态. 全局逃逸:一个对象的引用逃出了方法或者线程. ...

  4. postman md5加密 然后传给下一个接口作为参数调用

    https://www.v2ex.com/api/nodes/show.json?name=python get请求 断言: tests["Body matches string" ...

  5. C++解析(5)：内联函数分析

    0.目录 1.常量与宏回顾 2.内联函数 3.内联函数深度探析 4.注意事项 5.小结 1.常量与宏回顾 C++中的const常量可以替代宏常数定义,如: const int A = 3; <- ...

  6. TCP/IP四层协议模型与ISO七层模型

    TCP/IP四层协议模型与ISO七层模型 在世界上各地,各种各样的电脑运行着各自不同的操作系统为大家服务,这些电脑在表达同一种信息的时候所使用的方法是千差万别.就好像圣经中上帝打乱了各地人的口音,让他 ...

  7. [COCI2011-2012#5] POPLOCAVANJE 后缀自动机

    题面:洛谷 题解: 其实还可以用AC自动机做,但是没调出来,,,不知道发生了什么... AC自动机做法如下: 观察到如果我们对给定的每个串建AC自动机,那么直接拿大串在上面匹配,如果遇到了一个单词的终 ...

  8. 【BZOJ5338】[TJOI2018]异或（主席树）

    [BZOJ5338][TJOI2018]异或(主席树) 题面 洛谷 题解 很明显的是\(Trie\)树上暴力判断答案 因为要支持区间,用主席树的结构存\(Trie\)树就好了 #include< ...

  9. 用centos 6.5 webservice 安装系统后的问题

    编译pcre时:缺少一下库: yum -y install gcc yum -y install gcc-c++

  10. 【loj6436】【pkusc2018】神仙的游戏

    Portal --> pkuscD2T2(loj6436) Solution 个人觉得是道很好的法法塔题qwq 一开始的时候想偏了想到了另一种法法塔处理字符串匹配之类的奇怪技巧(万径人踪灭qwq ...