使用了封装了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. 【week10】规格说明书练习-吉林市1日游

    假设我们全班同学及教师去吉林省吉林市1日游,请为这次活动给出规格说明书. 版本:1.0 编订:于淼 团队:2016级计算机技术全体同学 日期:2016/11/19 1.引言 1.1 编写目的 1.2 ...

  2. Hibernate 中 load() 方法导致的 noSession 异常

    之所以要写这个,是因为最近碰到了一个延迟加载的 load() 导致出现 noSession 的异常. 下面第三种方式解决这个问题需要用到一个本地线程的对象,也就是 ThreadLocal 类,之前写过 ...

  3. spring学习12 -Spring 框架模块以及面试常见问题注解等

    以下为spring常见面试问题: 1.Spring 框架中都用到了哪些设计模式? Spring框架中使用到了大量的设计模式,下面列举了比较有代表性的: 代理模式—在AOP和remoting中被用的比较 ...

  4. DBGRID控件里可以实现SHIFT复选吗？怎么设置？

    //////////////////////////////////////////////////    功能概述:公用的列表框选择框,是用DBGrid网格////    注意事项:希望用Query ...

  5. 【数据库】同一字段根据不同条件更新的sql语句的写法

    语法: update test set 字段1=case when 条件1 then 值1 when 条件2 then 值2 end 示例: update PMS_ProjectInfo set Pr ...

  6. bzoj2013[CEOI2010] A huge tower

    题意 有N(2<=N<=620000)快砖,要搭一个N层的塔,要求:如果砖A恰好在砖B上面,那么A不能比B的长度+D要长.问有几种方法,输出 答案 mod 1000000009的值 分析 ...

  7. 【HLSDK系列】Delta 详解

    服务端和客户端总是需要互相交换数据,来做到实时的游戏体验. 很久之前,我们的网速都不是很快,甚至带宽只有 1Mbps (128KB/s)这样的速度,作为当时一个网络实时对战游戏,每时每刻都要传递数据, ...

  8. Spring Boot系列教程十：Spring boot集成Sentinel Redis

    前言 上一篇文章介绍了spring boot集成单点的redis,然而实际生产环境使用单点的redis风险很高,一旦宕机整个服务将无法使用,这篇文章介绍如何使用基于sentinel的redis高可用方 ...

  9. 【Learning】一步步地解释Link-cut Tree

    简介 Link-cut Tree,简称LCT. 干什么的?它是树链剖分的升级版,可以看做是动态的树剖. 树剖专攻静态树问题:LCT专攻动态树问题,因为此时的树剖面对动态树问题已经无能为力了(动态树问题 ...

  10. linux 递归删除目录文件

    比如删.svn文件 >find . -name ".svn" | xargs -exec rm -rf