Javascript做的贪食蛇
首先声明： 这个贪食蛇的小游戏，是我闲来无事写的。没有参考任何范例，纯原创。
对于JS我是一个初学者 ，如有不足的地方，勿喷。
虽然只是一个小小的游戏，但还是有必要声明一下，仅供学习、参考使用，不得用于商业用途（我 是觉得不大可能）。
个人觉得功能还不完善，如果有哪位大神可以完善一下就更好了。
代码大概有五六百行，分为三个文件一个html文件和两个js文件，下面是这三个文件的代码。
如果你觉得下面的代码看起来太麻烦，可以联系我的邮箱 [email protected] ，我会将整个工程文件发给你。
由于嫌麻烦就没有将html、js、css 分开写，请见谅。
HTML文件 tancishe.html代码：
这是：贪食蛇
JS文件 fang.js 代码：
function Fang() {
this.x = 0;
this.y = 0;
this.width = 50;
this.height = 50;
this.rotation = 0;
this.color = "#7FFFD4";
}
Fang.prototype.draw = function() {
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
context.lineWidth = 1;
context.strokeStyle = "#00ffff";
context.fillStyle = this.color;
context.beginPath();
context.moveTo(10, 10);
context.lineTo(50, 10);
context.lineTo(50, 50);
context.lineTo(10, 50);
context.lineTo(10, 10);
context.closePath();
context.stroke();
context.restore();
};
function HeadFang() {
this.x = 0;
this.y = 0;
this.width = 50;
this.height = 50;
this.rotation = 0;
this.color = "#ff0000";
}
HeadFang.prototype.draw = function() {
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
context.lineWidth = 1;
context.strokeStyle = "#ff0000";
context.fillStyle = this.color;
context.beginPath();
context.moveTo(10, 10);
context.lineTo(50, 10);
//context.lineTo(75,30);
context.lineTo(50, 50);
context.lineTo(10, 50);
// context.lineTo(50,30);
// context.lineTo(10,50);
context.lineTo(10, 10);
context.closePath();
context.stroke();
context.restore();
};
function BOgame() {
this.x = 15; //三个按钮的横坐标
this.x1= 25; //开始游戏按钮上文字的横坐标
this.x2= 25; //结束游戏按钮上文字的横坐标
this.x3= 25; //游戏帮助按钮上文字的横坐标
this.y = 365; //开始游戏按钮‘框’纵坐标
this.y1= 445; //结束游戏按钮‘框’纵坐标
this.y2= 525 //游戏帮助按钮‘框’纵坐标
this.width = 215;
this.height = 65;
//三个按钮的颜色
this.color = "#DF5326";
this.color1 = "#DF5326";
this.color2 = "#DF5326";
this.name = "Game";
this.name1 = "贪吃蛇";
this.name2 = "开始游戏";
this.name3 = "退出游戏";
this.name4 = "游戏指南";
}
BOgame.prototype.draw = function() {
//上部左边文字
context.font = 'bold 144px consolas';
context.textAlign = 'left';
context.textBaseline = 'top';
context.strokeStyle = '#DF5326';
context.strokeText(this.name, 15, 150);
//this.txt(this.name, false, 'bold 144px consolas', '#DF5326', 15, 249);
////上部右边文字
context.font = 'bold 90px arial';
context.strokeStyle = '#DF5326';
//context.fillStyle = 'red';
context.strokeText(this.name1, 350,200);
//this.txt(this.name1, false, 'bold 90px consolas', '#DF5326', 350, 249);
////按钮文字-开始游戏-
context.font = 'bold 50px 楷体';
context.fillStyle = this.color;
context.fillText(this.name2, this.x1,380);
//this.txt(this.name2, true, 'bold 50px 楷体', this.color, this.x1, 380);
////按钮文字-退出游戏-
context.font = 'bold 50px 楷体';
context.fillStyle = this.color1;
context.fillText(this.name3, this.x2,460);
//this.txt(this.name3, true, 'bold 50px 楷体', this.color1, this.x2, 460);
////按钮文字-游戏指南-
context.font = 'bold 50px 楷体';
context.fillStyle = this.color2;
context.fillText(this.name4, this.x3,540);
//this.txt(this.name4, true, 'bold 50px 楷体', this.color2, this.x3, 540);
};
//鼠标范围-开始游戏
BOgame.prototype.getBounds = function() {
return {
x: this.x,
y: this.y,
width: this.width,
height: this.height,
};
};
//鼠标范围-退出游戏
BOgame.prototype.getBounds1 = function() {
return {
x: this.x,
y: this.y1,
width: this.width,
height: this.height,
};
};
//鼠标范围-游戏帮助
BOgame.prototype.getBounds2 = function() {
return {
x: this.x,
y: this.y2,
width: this.width,
height: this.height,
};
};
第二个JS文件 utils.js代码：
var utils={};
utils.captureMouse=function(element){
var mouse={x:0,y:0};
element.addEventListener('mousemove',function(event){
var x,y;
if(event.pageX||event.pageY){
x=event.pageX;
y=event.pageY;
}else{
x=event.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
y=event.clientY+document.body.scrollTop+document.documentElement.scrollTop;
}
x-=element.offsetLeft;
y-=element.offsetTop;
mouse.x=x;
mouse.y=y;
},false);
return mouse;
};
utils.containsPoint = function (rect, x, y){
return !(x < rect.x || x > rect.x + rect.width || y < rect.y || y > rect.y + rect.height);
};
这是一开始的画面
这是游戏进行时的画面
这是游戏结束时的画面
