使用了封装了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. Windows下基于http的git服务器搭建-gitstack

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Windows下基于http的git服务器搭建-gitstack     本文地址:http: ...

  2. [转帖]Linux 的UTC 和 GMT

    1.问题 对于装有Windows和Linux系统的机器,进入Windows显示的时间和Linux不一致,Linux中的时间比Windows提前8个小时. 2.解决方法 修改/etc/default/r ...

  3. windows安装安卓开发环境Eclipse+SDK+ADT

    准备条件 操作系统:win7 64位 需要的资源:JDK.Eclipse.SDK.ADT 步骤简介: 第一步:下载安装最新版JDK 第二步:下载安装Eclipse 第三步:下载安装SDK 第四步:安装 ...

  4. 【bzoj3992】[SDOI2015]序列统计 原根+NTT

    题目描述 求长度为 $n$ 的序列,每个数都是 $|S|$ 中的某一个,所有数的乘积模 $m$ 等于 $x$ 的序列数目模1004535809的值. 输入 一行,四个整数,N.M.x.|S|,其中|S ...

  5. 【bzoj3560】DZY Loves Math V 欧拉函数

    题目描述 给定n个正整数a1,a2,…,an,求 的值(答案模10^9+7). 输入 第一行一个正整数n. 接下来n行,每行一个正整数,分别为a1,a2,…,an. 输出 仅一行答案. 样例输入 3 ...

  6. 转载--------Python中：self和__init__的含义 + 为何要有self和__init__

    背景 回复:我写的一些Python教程,需要的可以看看,中SongShouJiong的提问: Python中的self,__init__的含义是啥?为何要有self,__init这些东西? 解释之前, ...

  7. java学习2-webserver测试工具soapUI使用

    file-->new soap project-->输入project Name(随便)输入 WSDL地址,其他默认,点ok展开左侧加载的项目下的方法名,双击Request ,右侧出现测试 ...

  8. 基于三个kinect的人体建模

       单个kinect的人体重建,在Kinect SDK 1.8中,Kinect Fusion的效果已经很不错了.其缺点显而易见,一是扫描时间长,重建对象也需要长时间保持静态:二是需要人体或者kine ...

  9. Codeforces 578B. "Or" Game（思维题）

    我们知道所有sigma(2^i){i<n}比2^n小,所以我们肯定是把这k次操作全部丢到一个数上看看能不能凑出二进制下一个更高位的1. 因为k最大只有10,我们可以求出每一个数乘以k次之后的值, ...

  10. [JOI 2015 Final] 分蛋糕 2

    link 试题分析 容易发现性质,选择的是一段区间,但是贪心无法去维护这件事情,所以考虑$dp$,且我们只要去设计关于$JOI$的选择. 设$dp(i,j)$为现在要在$[l,r]$区间内选择,然后就 ...