Html5开发小游戏看你有多色

最新推荐文章于 2024-08-06 18:58:51 发布

Hi喵仔

最新推荐文章于 2024-08-06 18:58:51 发布

阅读量1.1k

点赞数

分类专栏： Html5 游戏开发文章标签： html5 游戏开发极客 createjs

Html5 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

游戏开发

1 篇文章 0 订阅

订阅专栏

极客学院

看你有多色HTML游戏开发视频播放网址:点击打开链接

以下代码为看视频后敲得。可供参考。

1.index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>看你有多色</title>
    <script src="easeljs-0.7.1.min.js"></script>
    <script src="Rect.js"></script>
</head>
<body>
    <canvas id="gameView" width="400px" height="400px"></canvas>
    <script src="app.js"></script>
</body>
</html>

2.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);
var n=2;
function addRect() {
    var cl=parseInt(Math.random()*1000000);
    var color="#"+cl;
    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);
            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();

3.Rect.js

/**
 * Created by Administrator on 2014/8/9.
 */
function Rect(n,color) {
    createjs.Shape.call(this);
    this.setRectType= function (type) {
        this._RectType=type;
        switch (type){
            case 1:
                this.setColor(color);
                break;
            case 2:
                this.setColor("#ff0000");
                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();