游戏2:HTML5制作网页游戏看看你有多色--createjs

效果:

游戏2:HTML5制作网页游戏看看你有多色--createjs_第1张图片

index.html

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

app.js

/**
 * Created by xxc on 2018/11/24.
 */
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){
        for(var indexY = 0;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();

Rect.js

/**
 * Created by xxc on 2018/11/24.
 */
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();

 

转载于:https://www.cnblogs.com/alex-xxc/p/10013349.html

你可能感兴趣的:(游戏2:HTML5制作网页游戏看看你有多色--createjs)