首页 > 代码库 > HTML5小游戏——看你有多色

HTML5小游戏——看你有多色

2024-09-02 13:26:57   218人阅读

使用了封装了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="http://www.mamicode.com/js/easeljs-0.8.2.min.js"></script>        
<script type="text/javascript" src="http://www.mamicode.com/js/Rect.js"></script>        
<script type="text/javascript" src="http://www.mamicode.com/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/

HTML5小游戏——看你有多色


联系
我们