<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="margin: 0 auto;width: 800px;height: 880px;border: 1px solid steelblue;">
<div style="height: 80px;">
<div id="fenshu">
</div>
<input type="button" name="" id="anniu" value="再来一次" />
</div>
<canvas id="snakeCanvas" width="800" height="800" style="background: steelblue;"></canvas>
</div>
</body>
</html>
<script type="text/javascript" src="js/Snake.js"></script>
<script type="text/javascript" src="js/food.js"></script>
<script type="text/javascript" src="js/Manager.js"></script>
<script type="text/javascript" src="js/main.js"></script>
food
function Food(w,range){
this.x = 0;
this.y = 0;
this.w = w;
this.range = range;
// 1.随机位置的方法
this.randomPos = function(theSnake){
// 随机位置的方法
this.x = parseInt(Math.random()*this.range)*this.w;
this.y = parseInt(Math.random()*this.range)*this.w;
var isEnd = true;//判断食物在不在蛇的身体里
while(isEnd){
for(var i=0;i<theSnake.snakeBodyArray.length;i++){
var pos =theSnake.snakeBodyArray[i];
if(pos.x == this.x&&pos.y==this.y){
break;
}
}
if(i==theSnake.snakeBodyArray.length){
isEnd = false;
}
}
}
// 2.绘制实物的方法
this.drawFood = function(context,color){
context.beginPath();
context.fillStyle = color;
context.fillRect(this.x,this.y,w,w);
// console.log(this.x);
// context.save();
}
}
main
var fenshu = document.getElementById("fenshu");
var anniu = document.getElementById("anniu");
var snakeCanvas = document.getElementById("snakeCanvas");
var context = snakeCanvas.getContext("2d");
var lock = false; // false 代表锁是打开的
var timer = null; //定时器
var speed = 200; //蛇移动的速度
var isDie = false; //活着
//创建对象 (画格)
var manger = new Manager();
manger.drawBackgroundLine(20,snakeCanvas,context);
//画蛇
var aSnake = new Snake(4,"greenyellow",manger.boxSize);
aSnake.initSnake(context);
//画食物
var aFood = new Food(manger.boxSize,manger.numberOfBox);
aFood.drawFood(context,"powderblue");
aFood.randomPos(aSnake);
function snakePlay(){
timer = setInterval(function(){
lock = false; //开锁
context.clearRect(0,0,snakeCanvas.width,snakeCanvas.height);//清除画布
manger.drawBackgroundLine(20,snakeCanvas,context);//绘制背景
aFood.drawFood(context,"powderblue"); //绘制食物
aSnake.moveSnake();//移动蛇
aSnake.drawSnakeBody(context);//画蛇
manger.snakeEatFood(aSnake,aFood);//判断蛇是否吃到了食物
aSnake.crashCheck(snakeCanvas,timer); //判断蛇是否死亡
if(aSnake.snakeBodyArray.length == 5&&speed > 30){
speed =30;
clearInterval(timer);
snakePlay();
}
if(aSnake.snakeBodyArray.length == 10&&speed > 20){
speed = 20;
clearInterval(timer);
snakePlay();
}
fenshu.innerHTML = manger.ii; //分数
console.log(manger.ii);
},speed)
}
snakePlay();
function game(){
lock = true; //开锁
context.clearRect(0,0,snakeCanvas.width,snakeCanvas.height);//清除画布
manger.drawBackgroundLine(20,snakeCanvas,context);//绘制背景
aFood.drawFood(context,"powderblue"); //绘制食物
aSnake.drawSnakeBody(context);//画蛇
}
// 键盘的监听事假
document.onkeydown = function(event){
var ev =event || window.event;
switch(ev.keyCode){
case 37:
if(lock == false&&(aSnake.direction == "top"||aSnake.direction == "bottom")){
aSnake.direction = "left"; //direction是Snake的属性
lock = true;
}
break;
case 38:
if(lock == false&&(aSnake.direction == "left" || aSnake.direction == "right")){
aSnake.direction = "top";
lock = true;
}
break;
case 39:
if(lock == false&&(aSnake.direction == "top"||aSnake.direction == "bottom")){
aSnake.direction = "right"; //direction是Snake的属性
lock = true;
}
break;
case 40:
if(lock == false&&(aSnake.direction == "left" || aSnake.direction == "right")){
aSnake.direction = "bottom";
lock = true;
}
break;
}
}
anniu.onclick=function(){
window.location.reload();
}
Manager
//这个类功能 *画线
function Manager(){
this.boxSize = null;//格子大小
this.numberOfBox = null;//格子数量
this.ii=0;
//画线
this.drawBackgroundLine = function(boxSize,canvas,context){
this.boxSize = boxSize;
this.numberOfBox = parseInt(canvas.width/this.boxSize);
//横线.
for(var i=0;i<this.numberOfBox;i++){
context.beginPath();
context.moveTo(0,i*this.boxSize);
context.lineTo(this.boxSize*this.numberOfBox,i*this.boxSize);
context.strokeStyle = "lightgray";
context.stroke();
context.save();
}
//竖线.
for(var i=0;i<this.numberOfBox;i++){
context.beginPath();
context.moveTo(i*this.boxSize,0);
context.lineTo(i*this.boxSize,this.boxSize*this.numberOfBox);
context.strokeStyle = "lightgray";
context.stroke();
context.save();
}
}
// 蛇 是否吃到 食物
this.snakeEatFood = function(theSnake,theFood){
var snakeHead = theSnake.snakeBodyArray[theSnake.snakeBodyArray.length-1];
if(snakeHead.x == theFood.x&&snakeHead.y == theFood.y){
// 吃到食物
//1.食物的位置重新随机
theFood.randomPos(aSnake);
//2.蛇的身体加长
theSnake.addBody();
this.ii++;
}
}
}
snake
function Snake(bodyLength,color,w){// 蛇头的颜色
this.bodyLength = bodyLength;
this.color = color; //蛇头
this.snakeBodyArray = []; //用来存储蛇每截身体的坐标------数组里最后一个元素是蛇头(第一个是的话距离墙太近-会死)
this.WIDTH = w; //一节身体的大小
this.direction = "right";
this.prevBody = []; //处理头进去
// 初始化蛇的状态--注意这个方法在初始化蛇的对象的时候就需要调用
this.initSnake = function(context){
for(var i = 0; i < this.bodyLength; i++){
var pos = {
x:i*this.WIDTH+200,
y:100,
}
this.snakeBodyArray.push(pos);
}
this.drawSnakeBody(context);
}
// 1.绘制身体
this.drawSnakeBody = function(context){
var body = [];//处理头
if (isDie) {
body = this.prevBody;
}else{
body = this.snakeBodyArray;
}
for(var i=0 ;i<body.length; i++){
var pos = body[i];
context.beginPath();
if(i == body.length - 1){
context.fillStyle = this.color;
}else{
context.fillStyle = "black";
}
context.fillRect(pos.x,pos.y,this.WIDTH,this.WIDTH);
context.strokeStyle = "width";
context.strokeRect(pos.x,pos.y,this.WIDTH,this.WIDTH);
}
}
// 2.移动
this.moveSnake = function(){//把数组里第一个元素删掉,然后在最后一个元素后面添加一个新的再push回数组
this.prevBody = [];//处理头
for(var i = 0 ;i< this.snakeBodyArray.length;i++){
this.prevBody.push(this.snakeBodyArray[i]);
}
this.snakeBodyArray.shift();//删除数组里第一个元素
var currentHead = this.snakeBodyArray[this.snakeBodyArray.length-1];//获取到数组里最后一个元素
var newHead = {};
switch(this.direction){
case "left":
newHead.x = currentHead.x-this.WIDTH;
newHead.y = currentHead.y;
break;
case "right":
newHead.x = currentHead.x+this.WIDTH;
newHead.y = currentHead.y;
break;
case "top":
newHead.x = currentHead.x;
newHead.y = currentHead.y-this.WIDTH;
break;
case "bottom":
newHead.x = currentHead.x;
newHead.y = currentHead.y+this.WIDTH;
break;
}
this.snakeBodyArray.push(newHead);
}
// s蛇身体增加长度
this.addBody = function(){
var pos = {x:0,y:0};
this.snakeBodyArray.unshift(pos);
}
// 蛇是否碰到了墙壁或者自己
this.crashCheck = function(canvas,timer){
var snakeHead = this.snakeBodyArray[this.snakeBodyArray.length-1];
if(snakeHead.x>=canvas.width||snakeHead.x<0||snakeHead.y<0||snakeHead.y>=canvas.height){
isDie = true;
clearInterval(timer);
game();
alert("game Over");
return;
// window.location.reload();//刷新重新开始
}
//循环检测身体部分是否发生了碰撞
for(var i=0; i<this.snakeBodyArray.length-1; i++){
var bodyPice = this.snakeBodyArray[i];
if(snakeHead.x==bodyPice.x&&snakeHead.y==bodyPice.y){
isDie = true;
clearInterval(timer);
game();
alert("game Over");
return;
}
}
}
}