<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanVas" width="1000" height="600" style="box-shadow: 10px 10px 5px black;"></canvas>
<script src="CheckOurPeng.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var myCan = document.getElementById("myCanVas");
var can = myCan.getContext("2d");
var snakeLength = 5;
// 定时器对象
var time = null;
// 取随机数的方法
function rand(max, min) {
return Math.floor(Math.random() * (((max + 1) - min))) + min;
}
//碰撞检测
function checkPeng(obj1, obj2) {
//相撞时圆心距
var disX = obj1.w / 2 + (obj2.w / 2);
var disY = obj1.h / 2 + (obj2.h / 2);
//实际圆心距
var centerX = Math.abs(obj2.x + (obj2.w / 2) - (obj1.x + (obj1.w / 2)));
var centerY = Math.abs(obj2.y + (obj2.h / 2) - (obj1.y + (obj1.h / 2)));
// 判断
if(centerX < disX && centerY < disY) {
//相撞为true
return true;
} else {
return false;
}
}
//蛇的行为
function Snake() {
this.x = -40;
this.y = 40;
this.w = 40;
this.h = 40;
this.color = "gray";
this.speed = 40;
// 方向
this.left = false;
this.top = false;
// 默认往右
this.right = true;
this.bottom = false;
// 用于装蛇的每个矩形块的信息(包括头部的)
this.bodys = [];
}
//画蛇
Snake.prototype.drawSnake = function() {
for(var i = 0; i < this.bodys.length; i++) {
var myRect = this.bodys[i];//初始化
can.beginPath();
// 头部其实就是bodys数组里最后一个元素
if(i == this.bodys.length - 1) {
can.fillStyle = "yellow";
} else {
can.fillStyle = this.color;
}
can.fillRect(myRect.x, myRect.y, myRect.w, myRect.h);
can.closePath();
}
}
Snake.prototype.move = function() {
if(this.top) {
this.y -= this.speed;
} else if(this.right) {
this.x += this.speed;
} else if(this.bottom) {
this.y += this.speed;
} else if(this.left) {
this.x -= this.speed;
}
for(var i = 0; i < this.bodys.length; i++) {
var myRect = this.bodys[i];
if(myRect.x == this.x && myRect.y == this.y) {
clearInterval(time);
alert(1111111);
}
}
if(this.x < 0 || this.x > myCan.width || this.y < 0 || this.y > myCan.height) {
clearInterval(time);
alert(1111111);
}
}
Snake.prototype.savePosition = function() {
// 把新移动的这个矩形的位置以及大小信息装
// 到bodys数组里
var posi = {
x: this.x,
y: this.y,
w: this.w,
h: this.h
}
if(this.bodys.length == snakeLength) {
this.bodys.shift();
}
this.bodys.push(posi);
}
document.onkeydown = function(ev) {
switch(ev.keyCode) {
// left
case 37:
if(!sna.right) {
sna.left = true;
sna.right = false;
sna.top = false;
sna.bottom = false;
}
break;
// top
case 38:
if(!sna.bottom) {
sna.left = false;
sna.right = false;
sna.top = true;
sna.bottom = false;
}
break;
// right
case 39:
if(!sna.left) {
sna.left = false;
sna.right = true;
sna.top = false;
sna.bottom = false;
}
break;
// bottom
case 40:
if(!sna.top) {
sna.left = false;
sna.right = false;
sna.top = false;
sna.bottom = true;
}
break;
default:
break;
}
}
var sna = new Snake();
// 食物的类
function Food() {
this.x = 0;
this.y = 0;
this.w = 40;
this.h = 40;
this.color = "red";
}
Food.prototype.draw = function() {
can.beginPath();
can.fillStyle = this.color;
can.fillRect(this.x, this.y, this.w, this.h);
can.closePath();
}
Food.prototype.setPosition = function() {
this.x = rand(0, (myCan.width - this.w) / 40) * 40;
this.y = rand(0, (myCan.height - this.h) / 40) * 40;
for(var i = 0; i < sna.bodys.length; i++) {
var myRect = sna.bodys[i];
if(myRect.x == this.x && myRect.y == this.y) {
// this.setPosition();
break;
}
}
}
var food = new Food();
food.setPosition();
time = setInterval(function() {
can.clearRect(0, 0, myCan.width, myCan.height);
sna.move();
sna.savePosition();
food.draw();
sna.drawSnake();
var a = checkPeng(sna, food);
if(a) {
food.setPosition();
snakeLength++;
}
}, 100);
</script>
</body>
