Html5开发小游戏看你有多色

来源：互联网发布：星际争霸2机枪兵数据编辑：程序博客网时间：2024/04/29 03:32

极客学院

看你有多色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();

0 0