本次課堂測驗的內容為，圍住貓，找出一個顏色不同的，并將之圍困。

實驗代碼如下： 1:app.js

/*

* @Author: your name

* @Date: 2020-03-28 16:01:27

* @LastEditTime: 2020-03-28 16:01:28

* @LastEditors: your name

* @Description: In User Settings Edit

* @FilePath: \3.14d:\schoolsoftware\2d\3.28\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

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:index.html

3:circle.js

/*

* @Author: your name

* @Date: 2020-03-28 16:01:52

* @LastEditTime: 2020-03-28 16:01:52

* @LastEditors: your name

* @Description: In User Settings Edit

* @FilePath: \3.14d:\schoolsoftware\2d\3.28\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;

運行結果如下：

總結

以上是生活随笔為你收集整理的fps射击HTML网页游戏,HTML网页游戏测试的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。