使用了封装了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. Qt动态连接库/静态连接库创建与使用，QLibrary动态加载库

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Qt动态连接库/静态连接库创建与使用,QLibrary动态加载库     本文地址:https ...

  2. Mac下Git的基础操作

    目前最火的版本控制软件是Git了吧,今天简单梳理一下Mac下Git的基础操作~~ 一.什么是Git Git是一个分布式代码管理工具,用于敏捷的处理或大或小的项目,类似的工具还有svn. 基于Git的快 ...

  3. 修改Oracle redo.log文件的大小

    1.查看当前日志组成员: SQL> select member from v$logfile; MEMBER ------------------------------------------ ...

  4. influxdb 命令

    写入数据: curl -X POST -d '[{"name":"foo","columns":["val"],&quo ...

  5. perf的采样模式和统计模式

    perf的采样模式和统计模式 统计模式和采样模式使用寄存器的方法不相同; 在统计模式下,每次调度之前设置寄存器,调度之后清理寄存器,留个下个进程使用;PMU寄存器的使用方法; 在采样模式下,每次 pm ...

  6. web三大组件的加载顺序

    Web三大组件:过滤器组件  监听器组件  Servlet组件 过滤器的顶级接口:javax.servlet.Filter 监听器的顶级接口:javax.servlet.ServletContextL ...

  7. jquery不能是使用普通的for循环 因为普通的for循环通过下表获取对象 如果通过下表获取对象的话 会转成dom对象

    jquery不能是使用普通的for循环 因为普通的for循环通过下表获取对象 如果通过下表获取对象的话 会转成dom对象

  8. Solr实现SQL的查询与统计--转载

    原文地址:http://shiyanjun.cn/archives/78.html Cloudera公司已经推出了基于Hadoop平台的查询统计分析工具Impala,只要熟悉SQL,就可以熟练地使用I ...

  9. 【数据库_Postgresql】sql语句添加序号，timestamp格式时间截取日期和时间

    SELECT ROW_NUMBER() OVER (ORDER BY sr.receiptid ASC) AS 序号, sr.receiptid, sr.receiptdate, DATE(sr.re ...

  10. 【移动支付】.NET微信扫码支付接入（模式二-NATIVE）

    一.前言       经过两三天的琢磨总算完成了微信扫码支付功能,不得不感叹几句: 微信提供的DEMO不错,直接复制粘贴就可以跑起来了: 微信的配置平台我真是服了.公众平台.商户平台.开放平台,一个平 ...