使用了封装了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. win7 64位机ODBC的数据源DSN添加和移除问题

    64位机器上ODBC的操作方法与32位机器是不一样的,如果直接从控制面板上-管理员工具-ODBC进去的话会发现User DSN以及System DSN里面都为空,ADD的时候连ODBC Driver都 ...

  2. LoadRunner脚本增强技巧之参数化（二）

    特别提醒: 1.在形成数据池之后,数据库中的数据变化不会影响数据池中的数据. 2.数据文件一定要以一个空行结束,否则,最后一行输入的数据不会被参数所使用. 3.一般我们用到的很多的都是使用数据文件来保 ...

  3. Guide: Solr performance tuning--转载

    原文地址:http://h3x.no/2011/05/10/guide-solr-performance-tuning Introduction I have for the last year be ...

  4. DAVY的神龙帕夫——读者的心灵故事|十二橄榄枝的传说

    再次听Puff的时候我想起了Davy. 文理分班后我坐到了他后面.Davy天生一头黄毛,黑头发”not even one”.上课时他若不是肆无忌惮地舒开四肢呼呼大睡,便是如受惊一般伸长他的细脖子,直挺 ...

  5. Day21-获取用户请求相关信息及请求头

    1. request里面还包含请求头等信息,可以打印看一下. views.py中的程序 from django.shortcuts import render,HttpResponse from dj ...

  6. 【hdu6093】Rikka with Number

    多校第五場的題. 首先是一個好數只在某個進制下,不會是在兩個進制下都爲好數. 另外每個進制好數的個數爲d!-(d-1)!,因爲要保證第一位不爲0. 然後就是在臨界進制下有多少個好數的問題,可以變成兩個 ...

  7. 常州day1p5

    给一个 n∗m 的矩阵,矩阵的每个格子上有一个不超过 30 的非负整数. 我们定义一条合法的路线是从(1,1)开始只能向右和向下移动到达(n,m)的路线. 定义数列 A1,A2,A3,..,An+m− ...

  8. 洛谷P4609 [FJOI2016]建筑师 【第一类斯特林数】

    题目链接 洛谷P4609 题解 感性理解一下: 一神带\(n\)坑 所以我们只需将除了\(n\)外的\(n - 1\)个元素分成\(A + B - 2\)个集合,每个集合选出最大的在一端,剩余进行排列 ...

  9. SMBv3空指针引用dos漏洞复现

    0x01 前言 去年年底,当设置一个模拟器来定位SMB协议时,发现了一个如此简单而又非常有效的攻击大型企业的漏洞.TL; DR:一个拒绝服务错误允许BSOD协议向Windows 8.1和Windows ...

  10. 在VS2010中使用Git【图文】

    http://blog.csdn.net/laogong5i0/article/details/10974285 在之前的一片博客<Windows 下使用Git管理Github项目>中简单 ...