HTML遊戲開發案例（二）

今天咱們要再次分享兩個遊戲案例

（一）圍住神經貓

遊戲規則介紹

經過點擊空白的方塊，將不斷移動的」神經貓「圍住

遊戲運行截圖以下

代碼以下

1. 新建JS：app.js,

var stage = new createjs.Stage("gameView");
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",stage);
var gameView = new createjs.Container();
gameView.x = 30;
gameView.y = 30;
stage.addChild(gameView);
var circleArr = [[],[],[],[],[],[],[],[],[]];
var currentCat;
//定義7種狀態 表示 移動位置
var MOVE_NONE = -1,MOVE_LEFT = 0,MOVE_UP_LEFT = 1,MOVE_UP_RIGHT = 2,MOVE_RIGHT = 3,MOVE_DOWN_RIGHT = 4,MOVE_DOWN_LEFT = 5;
function getMoveDir(cat){
    //分別判斷能走的位置
    var distanceMap = [];
    //left
    var can = true;
    for (var x = cat.indexX;x>=0;x--) {
        if(circleArr[x][cat.indexY].getCircleType() == Circle.TYPE_SELECTED){
            can = false;
            distanceMap[MOVE_LEFT] = cat.indexX - x;
            break;
        }
    }
    if(can){
        return MOVE_LEFT;
    }
    //left up
    can =true;
    var x = cat.indexX , y = cat.indexY;
    while(true){
        if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){
            can = false;
            distanceMap[MOVE_UP_LEFT] = can.indexY-y;
            break;
        }
        if(y%2 == 0){
            x--;
        }
        y--;
        if(y<0 ||x<0){
            break;
        }
    }
    if(can){
        return MOVE_UP_LEFT;
    }

    //right up
    can =true;
    var x = cat.indexX , y = cat.indexY;
    while(true){
        if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){
            can = false;
            distanceMap[MOVE_UP_RIGHT] = can.indexY-y;
            break;
        }
        if(y%2 == 1){
            x++;
        }
        y--;
        if(y <0||x>8){
            break;
        }
    }
    if(can){
        return MOVE_UP_RIGHT;
    }
    //right
    can =true;
    for (var x= cat.indexX;x<9;x++) {
        if(circleArr[x][cat.indexY].getCircleType() == Circle.TYPE_SELECTED){
            can =false;
            distanceMap[MOVE_RIGHT] = x -cat.indexX;
            break;
        }
    }
    if(can){
        return MOVE_RIGHT;
    }
    //ritht down
    can = true;
    x= cat.indexX,y = cat.indexY;
    while(true){
        if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){
            can =false;
            distanceMap[MOVE_DOWN_RIGHT] = y -cat.indexY;
            break;
        }
        if(y%2 == 1){
            x++;
        }
        y++;
        if(y>8 ||x>8){
            break;
        }
    }
    if(can){
        return MOVE_DOWN_RIGHT;
    }
    //left down
    can = true;
    x= cat.indexX,y = cat.indexY;
    while(true){
        if(circleArr[x][y].getCircleType() == Circle.TYPE_SELECTED){
            can = false;
            distanceMap[MOVE_DOWN_LEFT] = y -cat.index;
            break;
        }
        if(y%2 == 0){
            x--;
        }
        y++;
        if(y>8 || x<0){
            break;
        }
    }
    if(can){
        return MOVE_DOWN_LEFT;
    }
    var maxDir = -1,maxValue = -1;
    for (var dir = 0;dir<distanceMap.length;dir++) {
        if(distanceMap[dir]>maxValue){
            maxValue = distanceMap[dir];
            maxDir = dir;
        }
    }
    if(maxValue > 1){
        return maxDir;
    }else{
        return MOVE_NONE;
    }
}
function circleClicked(event){
    if(event.target.getCircleType() != Circle.TYPE_CAT){
        event.target.setCircleType(Circle.TYPE_SELECTED);
    }else{
        return;
    }
    //表示碰到邊緣 遊戲結束
    if(currentCat.indexX == 0 ||currentCat.indexX == 8 ||currentCat.indexY==0 ||currentCat.indexY==8){
        alert("遊戲結束");
        return;
    }
    var dir = getMoveDir(currentCat);
    switch (dir){
        //判斷他要走那一個方向
        case MOVE_LEFT:
            currentCat.setCircleType(Circle.TYPE_UNSELECTED);
            currentCat = circleArr[currentCat.indexX - 1][currentCat.indexY];
            currentCat.setCircleType(Circle.TYPE_CAT)
        break;
        case MOVE_UP_LEFT:
            currentCat.setCircleType(Circle.TYPE_UNSELECTED);
            currentCat = circleArr[currentCat.indexY%2?currentCat.indexX:currentCat.indexX- 1][currentCat.indexY-1];
            currentCat.setCircleType(Circle.TYPE_CAT)
        break;
        case MOVE_UP_RIGHT:
            currentCat.setCircleType(Circle.TYPE_UNSELECTED);
            currentCat = circleArr[currentCat.indexY%2?currentCat.indexX+1:currentCat.indexX][currentCat.indexY-1];
            currentCat.setCircleType(Circle.TYPE_CAT)
        break;
        case MOVE_RIGHT:
            currentCat.setCircleType(Circle.TYPE_UNSELECTED);
            currentCat = circleArr[currentCat.indexX+1][currentCat.indexY];
            currentCat.setCircleType(Circle.TYPE_CAT)
        break;
        case MOVE_DOWN_RIGHT:
            currentCat.setCircleType(Circle.TYPE_UNSELECTED);
            currentCat = circleArr[currentCat.indexY%2?currentCat.indexX+1:currentCat.indexX][currentCat.indexY+1];
            currentCat.setCircleType(Circle.TYPE_CAT)
        break;
        case MOVE_DOWN_LEFT:
            currentCat.setCircleType(Circle.TYPE_UNSELECTED);
            currentCat = circleArr[currentCat.indexY%2?currentCat.indexX:currentCat.indexX-1][currentCat.indexY+1];
            currentCat.setCircleType(Circle.TYPE_CAT)
        break;
        //沒有方向走 遊戲結束
        default:
            alert("遊戲結束");
    }
}



function addCircles(){
    //生成遊戲背景
    for (var indexY = 0; indexY <9;indexY++ ) {
        for (var indexX = 0;indexX<9;indexX++) {
            var c = new Circle();
            gameView.addChild(c);
            circleArr[indexX][indexY] = c;
            c.indexX = indexX;
            c.indexY = indexY;
            //由於Y軸是 一前一後 全部判斷一下 Y%2
            c.x = indexY%2?indexX*55+25:indexX*55;
            c.y = indexY * 55;
            if(indexX == 4 && indexY == 4){

                //中間出現一隻貓
                c.setCircleType(3);
                currentCat = c;
            }else if(Math.random() <0.1){
                //讓頁面上隨機出現 不能走的方框 方便圍這隻貓
                c.setCircleType(Circle.TYPE_SELECTED);
            }
            //添加事件
            c.addEventListener("click",circleClicked);
        }
    }
}
addCircles();

2. 新建JS：circle.js，設置畫布的JS

function Circle(){
    createjs.Shape.call(this);
    this.setCircleType = function(type){
        this._circleType = type;
        switch (type){
            //沒有點擊過的顏色
            case Circle.TYPE_UNSELECTED:
            this.setColor("#cccccc");
                break;
            //點擊過的顏色
            case Circle.TYPE_SELECTED:
            this.setColor("#ff6600");
            break;
            //貓的顏色
            case Circle.TYPE_CAT:
            this.setColor("#0000ff");
            break;
        }
    }
    this.setColor = function(colorString){
        this.graphics.beginFill(colorString);
        this.graphics.drawCircle(0,0,25);
        this.graphics.endFill();
    }
    this.getCircleType = function(){
        return this._circleType;
    }
    this.setCircleType(1);
}
Circle.prototype = new createjs.Shape();
//三種狀態    表示 一個爲點擊以後的  一個點擊以前  一個是貓
Circle.TYPE_UNSELECTED = 1;
Circle.TYPE_SELECTED = 2;
Circle.TYPE_CAT = 3;

** 3.新建Html文件，引入JS和畫布**

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>game1</title>
        <script src="js/easeljs.min.js"></script>
        <script src="js/Circle.js"></script>
    </head>
    <body>
        <canvas id="gameView" width="800px" height="800px"></canvas>
        <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

---

（二）看你有多色

遊戲規則

經過色塊的顏色差距來進行「找色」；點擊不一樣顏色的色塊。遊戲難度會愈來愈大，愈來愈考驗你的眼神

遊戲運行截圖以下

代碼設計以下

1.新建JS：app1.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);//var r = new Rect(n,color,RectColor);
            gameView.addChild(r);
            r.x = indexX;
            r.y = indexY;
            if(r.y == y&&r.x == x){
                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();

2.新建JS：rect.js，設置初始化，遊戲規則。

function Rect(n,color){                    
	//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("#ff0000");
                break;
        }
    }
    this.setColor = function(colorString){
        this.graphics.beginFill(colorString);        //開始繪製
        this.graphics.drawRect(0,0,400/n-5,400/n-5);//左居左爲0，上居上爲0，右居左爲寬400px/n-5(計算列數，-5是爲了設置列間距)，下居上爲400/n-5（正好爲正方形）
        this.graphics.endFill();                    //結束繪製
    }
    //設置類型
    this.getRectType = function(){
        return this._RectType;
    }
    this.setRectType(1);
}
//初始化
Rect.prototype = new createjs.Shape();

3.新建Html：looku.html，引入JS和畫布

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>game2</title>
<script src="js/easeljs.min.js"></script>
<script src="js/Rect.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <canvas id ="gameView" width="400px" height="400px"></canvas>
        
        <script src="js/app.js"></script>
    </body>
</html>