看你有多色游戏开发

作者: 会飞的猪l | 来源:发表于2017-06-06 13:21 被阅读61次

看你有多色游戏开发
看你有多色-iOS项目案例
#Cocos2dx手游开发#7 游戏开发流程总览
修行！
2019-03-16
新手如何从零开始学习unity
测试妹子内心是不是很黄
大行
你沉迷的游戏不要卸载！
Cocos2d-x开发学习之环境的搭建

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

Paste_Image.png

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/easeljs-0.8.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/rect.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <canvas id="gameView" width="400px" height="400px"></canvas>
        <script src="js/appcolor.js" type="text/javascript" charset="utf-8"></script>
    </body>
</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 <n;indexY++) {
            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 * (400/n);
            r.y = indexY * (400/n);
            if(r.getRectType() == 2){
                r.addEventListener("click",function(){
                    if(n<7){
                        ++n;
                    }
                    gameView.removeAllChildren();
                    addRect()
                })
            }
        }
    }
}
addRect()

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