html+css小游戏

游戏源码及知识来自：http://www.jikexueyuan.com/course/158_1.html?ss=1

第一部分简介：

游戏简介：

一共三种颜色球，红白蓝。目标是用红球将篮球围住算是赢，否则，算输。

三个文件：

index.html，app1.js，Circle.js

需要库:createJs,下载地址：createJs.com

本人开发环境：eclipse

第二部分代码（完整可运行源码）：

①index.html:

②app1.js

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


var gameView = new createjs.Container();
stage.addChild(gameView);
gameView.x = 30;
gameView.y = 30;
var currentcat;
var circleArr = [ [], [], [], [], [], [], [], [], [] ];
var move0 = -1, move1 = 0, move2 = 1, move3 = 2, move4 = 3, move5 = 4, move6 = 5;


function getmove(cat) {
var distance = [];
var can = true;
var x = cat.indexX, y = cat.indexY;

// 1.left
while (true) {
if (circleArr[y][x].getCircleType() == Circle.s) {
can = false;
distance[move1] = cat.indexX - x;
break;
}
x--;
if (x<0) {
break;
}
}
if (can) {
return move1;
}


// left up
can = true;
x = cat.indexX, y = cat.indexY;
while (true) {
if (circleArr[y][x].getCircleType() == Circle.s) {
can = false;
distance[move2] = cat.indexY - y;
break;
}
if (y % 2 == 0) {
x--;
}
y--;
if (y < 0 || x < 0) {
break;
}
}
if (can) {
return move2;
}





// right up;

can = true;
x = cat.indexX, y = cat.indexY;
while (true) {
if (circleArr[y][x].getCircleType() == Circle.s) {
can = false;
distance[move3] = cat.indexY - y;
break;
}
if (y % 2 == 1) {
x++;
}
y--;
if (y < 0 || x > 8) {
break;
}
}
if (can) {
return move3;
}

// right
can = true;
for (var x = cat.indexX; x < 9; x++) {
if (circleArr[cat.indexY][x].getCircleType() == Circle.s) {
can = false;
distance[move4] = x - cat.indexX;
break;
}


}
if (can) {
return move4;
}
// right down

can = true;
x = cat.indexX, y = cat.indexY;
while (true) {
if (circleArr[y][x].getCircleType() == Circle.s) {
can = false;
distance[move5] = y - cat.indexY;
break;
}
if (y % 2 == 1) {
x++;
}
y++;
if (y > 8 || x > 8) {
break;
}
}
if (can) {
return move5;
}


// left down

can = true;
x = cat.indexX, y = cat.indexY;
while (true) {
if (circleArr[y][x].getCircleType() == Circle.s) {
can = false;
distance[move6] = y-cat.indexY;
break;
}
if (y % 2 == 0) {
x--;
}
y++;
if (y > 8 || x < 0) {
break;
}
}
if (can) {
return move6;
}

var max = -1, maxv = -1;
for (var dir = 0; dir < distance.length; dir++) {
if (distance[dir] > maxv) {
maxv = distance[dir];
max = dir;
}
}
alert(distance[0]+" "+distance[1]+distance[2]+distance[3]+distance[4]+distance[5]);
if (maxv > 1) {
return max;
} else {
return move0;
}


}


function cir(e) {
if (e.target.getCircleType() != Circle.cat) {
e.target.setCircleType(Circle.s);


} else {
return;


}
if (currentcat.indexX == 0 || currentcat.indexX == 8
|| currentcat.indexY == 0 || currentcat.indexY == 8) {
alert("Game over!");
return;
}

var dir = getmove(currentcat);

switch (dir) {

case move1:
currentcat.setCircleType(Circle.uns);
currentcat = circleArr[currentcat.indexY][currentcat.indexX - 1];
currentcat.setCircleType(Circle.cat);
break;


case move2:
currentcat.setCircleType(Circle.uns);
currentcat = circleArr[currentcat.indexY - 1][currentcat.indexY % 2 ? currentcat.indexX
: currentcat.indexX - 1];
currentcat.setCircleType(Circle.cat);
break;

case move3:
currentcat.setCircleType(Circle.uns);
currentcat = circleArr[currentcat.indexY - 1][currentcat.indexY % 2 ? currentcat.indexX + 1
: currentcat.indexX];
currentcat.setCircleType(Circle.cat);
break;

case move4:
currentcat.setCircleType(Circle.uns);
currentcat = circleArr[currentcat.indexY][currentcat.indexX + 1];
currentcat.setCircleType(Circle.cat);
break;

case move5:
currentcat.setCircleType(Circle.uns);
currentcat = circleArr[currentcat.indexY + 1][currentcat.indexY % 2 ? currentcat.indexX + 1
: currentcat.indexX];
currentcat.setCircleType(Circle.cat);
break;

case move6:
currentcat.setCircleType(Circle.uns);
currentcat = circleArr[currentcat.indexY + 1][currentcat.indexY % 2 ? currentcat.indexX
: currentcat.indexX - 1];
currentcat.setCircleType(Circle.cat);
break;

default:
alert("You win!");


}
}


function addCircles() {
for (var indexY = 0; indexY < 9; indexY++) {
for (var indexX = 0; indexX < 9; indexX++) {
var c = new Circle();
gameView.addChild(c);
circleArr[indexY][indexX] = c;
c.indexX = indexX;
c.indexY = indexY;
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.2) {
c.setCircleType(Circle.s);
}
c.addEventListener("click", cir);
}
}
}
addCircles();

③Circle.js

function Circle(){
createjs.Shape.call(this);
this.setCircleType=function(type){
this.CircleType=type;
switch(type){
case Circle.uns:
this.setColor("#cccccc");
break;
case Circle.s:
this.setColor("#ff66cc");
break;
case Circle.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.uns=1;
Circle.s=2;
Circle.cat=3;

第三部分总结：

①函数当做类使用；

②监听事件内的函数不需传入参数；

③点击不移动的原因：该状态下未定义行为；循环边界不合理，导致循环不结束；

④循环内break忘记添加，导致某些状态下发生异常，需要触发该异常才能发现问题。项目中是由于最后的在直线上有遮挡，需要使用边界数组进行距离选择时，未添加break导致边界判断错误，使得红球被蓝球吃掉。