2D遊戲開發——CreateJS

基於CreateJS的遊戲製做css

CreateJS爲CreateJS庫，是一款爲HTML5遊戲開發的引擎。包含如下四個部分： EASELJS：提供了一套完整的，層次化的顯示列表的互動方式來更簡單的處理HTML5畫布。html

TWEENJS：主要用來調整和動畫HTML5和Javascript屬性。提供了簡單而且強大的tweening接口。canvas

SOUNDJS：提供了簡單而強大的API來處理音頻。經過插件來執行實際的音頻實現，無需學習平臺相關的知識，簡單直接的處理聲音。app

PRELOADJS：是一個用來管理和協調相關資源加載的類庫，它能夠方便的幫助你預先加載相關資源，例如：圖片、文件、音頻、數據等等。框架

開發工具：Adobe Dreamweaver CC 2019dom

開發框架：CreateJS函數

圍住神經貓工具

遊戲介紹：圍住中間那隻「貓」，使其不逃出地圖。遊戲開始會有幾堵牆，玩家須要造新的牆困住貓。學習

代碼以下：開發工具

cat.cs

<html>
<head>
<meta charset="utf-8">
<title>圍住神經貓</title>
<script src="Js/easeljs.min.js"></script>
<script src="Js/Circle.js"></script>
</head>
<body>
<canvas width="800px" height="800px" id="gameView"></canvas>
<script src="Js/app.js"></script>
</body>
</html>```

circle.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;```

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;//保存這隻貓
//貓移動的六個方向的參數
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.indexY;
            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){//判斷貓移動的方向總共有6個，當此方向的圓形未使用時設置該方向爲貓跳躍的方向，二原來貓的位置改成未使用狀態，當全部方向都走不通時，彈出對話框，遊戲結束
        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();```

找顏色

遊戲介紹：找出全部方格中顏色不同的的，主要是考眼力和注意力，難度隨關卡逐漸增長。代碼以下

sex.html

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalabe=no">
<script src="Js/easeljs.min.js"></script>
<script src="Js/Rect.js"></script>
<link rel="stylesheet" type="text/css" href="Css/style.css">
<title>看你有多色</title>
</head>

<body>
<div class="main">
	<canvas id="gameView"></canvas>
</div>
<script src="Js/apps.js"></script>
</body>
</html>```

rect.js

function Rect(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,getSize()/n-2,getSize()/n-2);
		this.graphics.endFill();
	}
	this.getRectType = function(){
		return this._RectType;
	}
	this.setRectType(1);
}
Rect.prototype = new createjs.Shape();```

apps.js

var stage = new createjs.Stage("gameView");
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick",stage);
var gameView = new createjs.Container();
stage.addChild(gameView);

function startGame(){//函數入口
	getCanvasSize();
	n = 2;
	addRect();
}
function addRect(){//添加方格
	var c1 = parseInt(Math.random()*1000000);//設定放個顏色爲一個隨機值
	var color = ("#"+c1);
	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 c2 = parseInt((c1-10*(n-indexY)>0)?(c1-10*(n-indexY)):(c1+10*indexY));
			var Rectcolor = ("#"+c2);
			var c3 = parseInt((c2-10*(n-indexY)>0)?(c2-10*(n-indexY)):(c2+10*indexY));
			var Rectcolor = ("#"+c3);
			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 * (getSize()/n);
			r.y = indexY * (getSize()/n);
			if(r.getRectType() == 2){
				r.addEventListener("click",clickRect);
			}
		}
	}
}

function clickRect(){
	//判斷方格爲最大七個時（若是不是繼續添加），清除全部子元素，從新調用addRect()繪製方格
	if(n<7){
		++n;
	}
	gameView.removeAllChildren();
	addRect();
}

function getCanvasSize(){
	var gView = document.getElementById("gameView");
	gView.height = window.innerHeight-4;
	gView.width = window.innerWidth-4;
}

function getSize(){
	if(window.innerHeight>=window.innerWidth){
		return window.innerWidth;
	}else{
		return window.innerHeight;
	}
}

startGame();//函數入口```

結果如圖：