以保存对javascript的些许理解
/*
**************
*/
/* ****game.js*** */
/* ************** */
Array.prototype.remove = function (obj) {
for ( var i = 0, l = this.length; i < l; i++) {
if ( this[i] == obj) {
this.splice(i, 1);
break;
}
}
}
var Game = {
// 循环ID
timeId: -1,
// context2d对象
gamebg: null,
// 游戏背景信息
gameinfo: {},
// 开始按钮
btn: null,
// 初始化
snake: null,
food: null,
init: function () {
// 获取游戏背景dom
var game_dom = document.getElementById('gamebg'),
This = this;
// 设置游戏背景信息
this.gameinfo = {
width: game_dom.clientWidth,
height: game_dom.clientHeight,
left: game_dom.offsetLeft,
top: game_dom.offsetTop
};
// 获取context2d对象
this.gamebg = game_dom.getContext('2d');
// 绑定键盘按下事件
document.onkeydown = function (e) { This.keyDown(e); };
// 创建小球
this.snake = new Snake(7, this.gameinfo.width, this.gameinfo.height);
this.food = new Food(100, 100, 4, 'red');
// this.createFood();
},
keyDown: function (e) {
var d = this.snake.direction;
switch (e.keyCode) {
case 37:
d = 9;
break;
case 38:
d = 12;
break;
case 39:
d = 3;
break;
case 40:
d = 6;
break;
case 32:
this.pause(document.getElementById('Button2'));
break;
}
if (Math.abs( this.snake.direction - d) != 6) {
this.snake.oldDirection = this.snake.direction;
this.snake.direction = d;
}
else {
this.snake.back = 1;
}
},
// btn:开始按钮dom
start: function (btn) {
if ( this.btn) this.reset();
this.btn = btn;
this.btn.disabled = 'disabled';
var This = this;
this.init();
// 开始画画
this.timeId = setInterval( function () {
This.process();
}, 80);
},
process: function () {
// 清除画面
this.gamebg.clearRect(0, 0, this.gameinfo.width, this.gameinfo.height);
this.snake.update( this.food);
var body = this.snake.Body;
Canvas.arc( this.gamebg, this.food.X, this.food.Y, this.food.Radius, this.food.Color);
for ( var i = 0; i < body.length; i++) {
Canvas.arc( this.gamebg, body[i].X, body[i].Y, body[i].Radius, body[i].Color);
}
// 判断游戏是否结束
if ( this.snake.Body.length == 0) {
clearInterval( this.timeId);
var score = document.getElementById("score");
alert('您的分数是:' + score.innerHTML);
this.btn.disabled = '';
}
},
// 重置游戏数据
reset: function () {
this.food = null;
this.snake = null;
this.timeId = -1;
this.gamebg = null;
this.gameinfo = {};
var score = document.getElementById("score");
score.innerHTML = 0;
},
pause: function (btn) {
if (btn.value == 'Pause') {
clearInterval( this.timeId);
btn.value = 'Run';
}
else if (btn.value == 'Run') {
btn.value = 'Pause';
var This = this;
this.timeId = setInterval( function () {
This.process();
}, 80);
}
}
/* ****game.js*** */
/* ************** */
Array.prototype.remove = function (obj) {
for ( var i = 0, l = this.length; i < l; i++) {
if ( this[i] == obj) {
this.splice(i, 1);
break;
}
}
}
var Game = {
// 循环ID
timeId: -1,
// context2d对象
gamebg: null,
// 游戏背景信息
gameinfo: {},
// 开始按钮
btn: null,
// 初始化
snake: null,
food: null,
init: function () {
// 获取游戏背景dom
var game_dom = document.getElementById('gamebg'),
This = this;
// 设置游戏背景信息
this.gameinfo = {
width: game_dom.clientWidth,
height: game_dom.clientHeight,
left: game_dom.offsetLeft,
top: game_dom.offsetTop
};
// 获取context2d对象
this.gamebg = game_dom.getContext('2d');
// 绑定键盘按下事件
document.onkeydown = function (e) { This.keyDown(e); };
// 创建小球
this.snake = new Snake(7, this.gameinfo.width, this.gameinfo.height);
this.food = new Food(100, 100, 4, 'red');
// this.createFood();
},
keyDown: function (e) {
var d = this.snake.direction;
switch (e.keyCode) {
case 37:
d = 9;
break;
case 38:
d = 12;
break;
case 39:
d = 3;
break;
case 40:
d = 6;
break;
case 32:
this.pause(document.getElementById('Button2'));
break;
}
if (Math.abs( this.snake.direction - d) != 6) {
this.snake.oldDirection = this.snake.direction;
this.snake.direction = d;
}
else {
this.snake.back = 1;
}
},
// btn:开始按钮dom
start: function (btn) {
if ( this.btn) this.reset();
this.btn = btn;
this.btn.disabled = 'disabled';
var This = this;
this.init();
// 开始画画
this.timeId = setInterval( function () {
This.process();
}, 80);
},
process: function () {
// 清除画面
this.gamebg.clearRect(0, 0, this.gameinfo.width, this.gameinfo.height);
this.snake.update( this.food);
var body = this.snake.Body;
Canvas.arc( this.gamebg, this.food.X, this.food.Y, this.food.Radius, this.food.Color);
for ( var i = 0; i < body.length; i++) {
Canvas.arc( this.gamebg, body[i].X, body[i].Y, body[i].Radius, body[i].Color);
}
// 判断游戏是否结束
if ( this.snake.Body.length == 0) {
clearInterval( this.timeId);
var score = document.getElementById("score");
alert('您的分数是:' + score.innerHTML);
this.btn.disabled = '';
}
},
// 重置游戏数据
reset: function () {
this.food = null;
this.snake = null;
this.timeId = -1;
this.gamebg = null;
this.gameinfo = {};
var score = document.getElementById("score");
score.innerHTML = 0;
},
pause: function (btn) {
if (btn.value == 'Pause') {
clearInterval( this.timeId);
btn.value = 'Run';
}
else if (btn.value == 'Run') {
btn.value = 'Pause';
var This = this;
this.timeId = setInterval( function () {
This.process();
}, 80);
}
}
}
/*
**************
*/
/* ****food.js*** */
/* ************** */
var Food = function (x, y, radius, color) {
this.X = x;
this.Y = y;
this.Radius = radius;
this.Color = color;
this.fpt = 10000;
this.lastUpdata = 0;
}
Food.prototype =
{
update: function () {
this.X = parseInt(Math.random() * 380 + 8, 10);
this.Y = parseInt(Math.random() * 380 + 8, 10);
}
/* ****food.js*** */
/* ************** */
var Food = function (x, y, radius, color) {
this.X = x;
this.Y = y;
this.Radius = radius;
this.Color = color;
this.fpt = 10000;
this.lastUpdata = 0;
}
Food.prototype =
{
update: function () {
this.X = parseInt(Math.random() * 380 + 8, 10);
this.Y = parseInt(Math.random() * 380 + 8, 10);
}
}
/*
**************
*/
/* ****Canvas.js*** */
/* ************** */
var Canvas = {
// 画圆
// ctx:context2d对象,x:圆心x坐标,y:圆心y坐标,radius:半径,color:颜色
arc: function (cxt, x, y, radius, color) {
cxt.fillStyle = color;
cxt.beginPath();
cxt.arc(x, y, radius, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
}
/* ****Canvas.js*** */
/* ************** */
var Canvas = {
// 画圆
// ctx:context2d对象,x:圆心x坐标,y:圆心y坐标,radius:半径,color:颜色
arc: function (cxt, x, y, radius, color) {
cxt.fillStyle = color;
cxt.beginPath();
cxt.arc(x, y, radius, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
}
}
/*
**************
*/
/* ****Bone.js*** */
/* ************** */
var Bone = function (x, y, radius, color) {
this.X = x;
this.Y = y;
this.Radius = radius;
this.Color = color;
/* ****Bone.js*** */
/* ************** */
var Bone = function (x, y, radius, color) {
this.X = x;
this.Y = y;
this.Radius = radius;
this.Color = color;
}
/*
**************
*/
/* ****Snake.js*** */
/* ************** */
var Snake = function (length, width, height) {
this.fpt = 40;
this.Body = [];
this.lastUpdata = 0;
this.speed = 8;
this.oldDirection = 6;
this.direction = 6;
var centerX = parseInt(width / 2, 10);
var centerY = parseInt(height / 2, 10);
var bone = new Bone(centerX, centerY, 4, 'blue');
this.Body.push(bone);
for ( var i = 0; i < length - 1; i++) {
var bone = new Bone(centerX, centerY - (8 * (i + 1)), 4, 'blue');
this.Body.push(bone);
}
this.cornerX = centerX;
this.cornerY = centerY;
this.back = 0;
}
Snake.prototype =
{
update: function (food) {
if ( this.lastUpdata % this.fpt == 0) {
if ( this.back == 1) {
this.back = 0;
var last = this.Body[ this.Body.length - 1];
var secondLast = this.Body[ this.Body.length - 2];
if (last.Y - secondLast.Y > 0) {
this.direction = 6;
}
else if (last.Y - secondLast.Y < 0) {
this.direction = 12;
}
else if (last.X - secondLast.X < 0) {
this.direction = 9;
}
else if (last.X - secondLast.X > 0) {
this.direction = 3;
}
this.Body.reverse();
}
// 记录蛇头的原始坐标
this.cornerX = this.Body[0].X;
this.cornerY = this.Body[0].Y;
// 定义蛇头的新位置
switch ( this.direction) {
case 12:
this.Body[0].Y -= this.speed;
break;
case 6:
this.Body[0].Y += this.speed;
break;
case 3:
this.Body[0].X += this.speed;
break;
case 9:
this.Body[0].X -= this.speed;
break;
default:
break;
}
// 蛇身的新位置为前一个节点的位置
for ( var i = this.Body.length - 1; i > 1; i--) {
this.Body[i].X = this.Body[i - 1].X;
this.Body[i].Y = this.Body[i - 1].Y;
}
// 定义蛇尾的新位置
this.Body[1].X = this.cornerX;
this.Body[1].Y = this.cornerY;
this.eatFood(food);
var over = false;
for ( var j = 0; j < this.Body.length; j++) {
var bone = this.Body[j];
if (bone.X < 0 || bone.Y < 0 || bone.X > 400 || bone.Y > 400) {
over = true;
break;
}
}
if (over) {
this.Body.length = 0;
}
}
// 时间累加
this.lastUpdata += 10;
},
eatFood: function (food) {
var i, l, bone, isTouch = false;
// 遍历蛇身体
for (i = 0, l = this.Body.length; i < l; i++) {
var bone = this.Body[i];
// 判断蛇身与食物的圆心距
if (Math.sqrt(Math.pow(bone.X - food.X, 2) + Math.pow(bone.Y - food.Y, 2)) <= bone.Radius + food.Radius) {
isTouch = true;
break;
}
}
// 给蛇增加一节
if (isTouch) {
var head = this.Body[0];
var x = head.X;
var y = head.Y;
switch ( this.direction) {
case 12:
y = y - head.Radius * 2;
break;
case 3:
x = x + head.Radius * 2;
break;
case 6:
y = y + head.Radius * 2;
break;
case 9:
x = x - head.Radius * 2;
break;
}
var newBone = new Bone(x, y, head.Radius, head.Color);
this.Body.push(newBone);
// 随机改变食物的位置
food.X = -100;
food.Y = -100;
setTimeout( function () {
food.update();
}, 800);
var score = document.getElementById("score");
score.innerHTML = parseInt(score.innerHTML) + 1;
if ( this.fpt > 10) {
this.fpt -= 10;
}
}
}
/* ****Snake.js*** */
/* ************** */
var Snake = function (length, width, height) {
this.fpt = 40;
this.Body = [];
this.lastUpdata = 0;
this.speed = 8;
this.oldDirection = 6;
this.direction = 6;
var centerX = parseInt(width / 2, 10);
var centerY = parseInt(height / 2, 10);
var bone = new Bone(centerX, centerY, 4, 'blue');
this.Body.push(bone);
for ( var i = 0; i < length - 1; i++) {
var bone = new Bone(centerX, centerY - (8 * (i + 1)), 4, 'blue');
this.Body.push(bone);
}
this.cornerX = centerX;
this.cornerY = centerY;
this.back = 0;
}
Snake.prototype =
{
update: function (food) {
if ( this.lastUpdata % this.fpt == 0) {
if ( this.back == 1) {
this.back = 0;
var last = this.Body[ this.Body.length - 1];
var secondLast = this.Body[ this.Body.length - 2];
if (last.Y - secondLast.Y > 0) {
this.direction = 6;
}
else if (last.Y - secondLast.Y < 0) {
this.direction = 12;
}
else if (last.X - secondLast.X < 0) {
this.direction = 9;
}
else if (last.X - secondLast.X > 0) {
this.direction = 3;
}
this.Body.reverse();
}
// 记录蛇头的原始坐标
this.cornerX = this.Body[0].X;
this.cornerY = this.Body[0].Y;
// 定义蛇头的新位置
switch ( this.direction) {
case 12:
this.Body[0].Y -= this.speed;
break;
case 6:
this.Body[0].Y += this.speed;
break;
case 3:
this.Body[0].X += this.speed;
break;
case 9:
this.Body[0].X -= this.speed;
break;
default:
break;
}
// 蛇身的新位置为前一个节点的位置
for ( var i = this.Body.length - 1; i > 1; i--) {
this.Body[i].X = this.Body[i - 1].X;
this.Body[i].Y = this.Body[i - 1].Y;
}
// 定义蛇尾的新位置
this.Body[1].X = this.cornerX;
this.Body[1].Y = this.cornerY;
this.eatFood(food);
var over = false;
for ( var j = 0; j < this.Body.length; j++) {
var bone = this.Body[j];
if (bone.X < 0 || bone.Y < 0 || bone.X > 400 || bone.Y > 400) {
over = true;
break;
}
}
if (over) {
this.Body.length = 0;
}
}
// 时间累加
this.lastUpdata += 10;
},
eatFood: function (food) {
var i, l, bone, isTouch = false;
// 遍历蛇身体
for (i = 0, l = this.Body.length; i < l; i++) {
var bone = this.Body[i];
// 判断蛇身与食物的圆心距
if (Math.sqrt(Math.pow(bone.X - food.X, 2) + Math.pow(bone.Y - food.Y, 2)) <= bone.Radius + food.Radius) {
isTouch = true;
break;
}
}
// 给蛇增加一节
if (isTouch) {
var head = this.Body[0];
var x = head.X;
var y = head.Y;
switch ( this.direction) {
case 12:
y = y - head.Radius * 2;
break;
case 3:
x = x + head.Radius * 2;
break;
case 6:
y = y + head.Radius * 2;
break;
case 9:
x = x - head.Radius * 2;
break;
}
var newBone = new Bone(x, y, head.Radius, head.Color);
this.Body.push(newBone);
// 随机改变食物的位置
food.X = -100;
food.Y = -100;
setTimeout( function () {
food.update();
}, 800);
var score = document.getElementById("score");
score.innerHTML = parseInt(score.innerHTML) + 1;
if ( this.fpt > 10) {
this.fpt -= 10;
}
}
}
}
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title ></ title >
< script src ="game.js" type ="text/javascript" ></ script >
< script src ="Bone.js" type ="text/javascript" ></ script >
< script src ="Canvas.js" type ="text/javascript" ></ script >
< script src ="Snake.js" type ="text/javascript" ></ script >
< script src ="food.js" type ="text/javascript" ></ script >
</ head >
< body >
< canvas id ="gamebg" width ="400" height ="400" style ="background: Black;" >您的浏览器不支持html5,请使用chrome或者ff </ canvas >
< input id ="Button1" type ="button" value ="Start" onclick ="Game.start(this)" />
< input id ="Button2" type ="button" value ="Pause" onclick ="Game.pause(this)" />
< br />
< div id ="score" >0 </ div >
</ body >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title ></ title >
< script src ="game.js" type ="text/javascript" ></ script >
< script src ="Bone.js" type ="text/javascript" ></ script >
< script src ="Canvas.js" type ="text/javascript" ></ script >
< script src ="Snake.js" type ="text/javascript" ></ script >
< script src ="food.js" type ="text/javascript" ></ script >
</ head >
< body >
< canvas id ="gamebg" width ="400" height ="400" style ="background: Black;" >您的浏览器不支持html5,请使用chrome或者ff </ canvas >
< input id ="Button1" type ="button" value ="Start" onclick ="Game.start(this)" />
< input id ="Button2" type ="button" value ="Pause" onclick ="Game.pause(this)" />
< br />
< div id ="score" >0 </ div >
</ body >
</html>