看你有多色 | 易学教程

开发工具： VS code

游戏案例： 看你有多色

游戏玩法： 点击与图片颜色不一样的区域进入下一关

游戏截图：

HTML

<!DOCTYPE html>
 <html>
     <head lang="en">
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width,user-scalable=no">
         <script src="easeljs.min.js"></script>
         <script src="Rect.js"></script>
         <link rel="stylesheet" type="text/css" href="Style.css">
     </head>
     <body>
     </div>
     <div class="main">
         <canvas id="gameView"></canvas>
     </div>
     <script src="app.js"></script>
     </body>
 </html>

Style.css

*{
    margin:0px;
    padding: 0px;
}
.main{
    width: 80%;
    margin: 0px 2px;
}
#gameView{
    width:100%;
    margin: 20px auto;
}

Rect.js

function Rect(n,color,Rectcolor){
    createjs.Shape.call(this);
    this.setRectType=function(type){
        this._RectType=type;
        switch(type){
            case 1:
                this.setColor(color);
                break;
            case 2:
                this.setColor(Rectcolor);
                break;
        }
    }
    this.setColor=function(colorString){
        this.graphics.beginFill(colorString);
        this.graphics.drawRect(0,0,getSize()/n-2,getSize()/n-2);
        this.graphics.endFill();
    }
    this.getRectType=function(){
        return this._RectType;
    }
    this.setRectType(1);
}
Rect.prototype=new createjs.Shape();

app.js

var stage=new createjs.Stage("gameView");
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",stage);
var gameView=new createjs.Container();
stage.addChild(gameView);

function startGame(){
    getCanvasSize();
    n=2;
    addRect();
}

function addRect(){
    var c1=parseInt(Math.random()*1000000);
    var color =("#"+c1);
    var x =parseInt(Math.random()*n);
    var y =parseInt(Math.random()*n);
    for(var indexX=0;indexX<n;indexX++){
        for(var indexY=0;indexY<n;indexY++){
            var c2=parseInt((c1-10*(n-indexY)>0)?(c1-10*(n-indexY)):(c1+10*indexY));
            var Rectcolor =("#"+c2);
            var c3=parseInt((c2-10*(n-indexY)>0)?(c2-10*(n-indexY)):(c2+10*indexY));
            var Rectcolor =("#"+c3);
            var r =new Rect(n,color,Rectcolor);
            gameView.addChild(r);
            r.x=indexX;
            r.y=indexY;
            if(r.x==x && r.y==y){
                r.setRectType(2);
            }
            r.x=indexX*(getSize()/n);
            r.y=indexY*(getSize()/n);
            if(r.getRectType()==2){
                r.addEventListener("click",clickRect)
            }
        }
    }
}

function clickRect(){
    if(n<7){
        ++n;
    }
    gameView.removeAllChildren();
    addRect();
}

function getCanvasSize(){
    var gView=document.getElementById("gameView");
    gView.height=window.innerHeight-4;
    gView.width=window.innerWidth-4;
}
function getSize(){
    if(window.innerHeight>=window.innerWidth){
        return window.innerWidth;
    }else{
        return window.innerHeight;
    }
}
startGame();

easeljs.min.js为CreateJS套件的JS

来源：oschina

链接：https://my.oschina.net/u/4463082/blog/3211471

标签

var