看你有多色游戏开发

游戏很简单,就是找到不同颜色的一个正方形,点击它就会加大难度,最多可以变成横排7个,竖排7个。
引了一个基于canvas开发的easeljs框架,可以去网站去下载一下http://createjs.com/

看你有多色游戏开发_第1张图片
Paste_Image.png

HTML



    
        
        
        
        
    
    
        
        
    


rect.js

function Rect(n,color,RectColor){
    //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,400/n-5,400/n-5);
        this.graphics.endFill();
    }
    this.getRectType = function(){
        return this._RectType;
    }
    this.setRectType(1);
    
}
Rect.prototype = new createjs.Shape();

appcolor.js

var stage= new createjs.Stage("gameView");
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",stage);
var gameView = new createjs.Container();
stage.addChild(gameView);
//n  列数 最少等于2
var n = 2;
function addRect(){
    //随机生成一个颜色
    var cl = parseInt(Math.random() * 1000000);
    var color = "#"+cl;
    //根据n 生成不同的颜色  n越大生成的颜色越接近
    var lhh = cl+(10-n)*500;
    var RectColor = "#"+lhh;
    var x = parseInt(Math.random() * n);
    var y = parseInt(Math.random() * n);
    //渲染页面
    for (var indexX = 0; indexX < n ;indexX++) {
        for (var indexY = 0;indexY 

逻辑很简单,以及我也注释了好多,希望大家可以用的到。

你可能感兴趣的:(看你有多色游戏开发)