<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas {
box-shadow: 0 0 10px greenyellow;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script type="text/javascript">
var oC = document.getElementById("canvas");
var ctx = oC.getContext("2d");
// 蛇的对象
var snake = {
x: -40,
y: 0,
w: 40,
h: 40,
color: "deeppink",
// speed:
top: false,
bottom: false,
left: false,
right: true,
bodys:[],
bool:true
}
snake.draw = function() {
ctx.fillStyle = snake.color;
ctx.fillRect(this.x, this.y, this.w, this.h);
}
snake.move = function() {
if(this.left) {
this.x -= this.w;
}
if(this.right) {
this.x += this.w;
}
if(this.top) {
this.y -= this.h;
}
if(this.bottom) {
this.y += this.h;
}
snake.draw();
snake.drawBody();
snake.savePosition();
}
snake.savePosition = function(){
this.bodys.push({
x:this.x,
y:this.y,
w:this.w,
h:this.h
});
if (this.bodys.length > 3 && this.bool) {
// shift() 删除数组第一个元素
this.bodys.shift();
}else{
this.bool = true;
}
}
snake.drawBody = function(){
for (var i = 0; i < this.bodys.length; i++) {
ctx.beginPath();
ctx.fillStyle = "deepskyblue";
ctx.fillRect(this.bodys[i].x,this.bodys[i].y,this.bodys[i].w,this.bodys[i].h);
ctx.fill();
}
}
// food
function rand(min,max){
return Math.floor(Math.random() * (max - min +1) + min);
}
var food = {
x:0,
y:0,
w:40,
h:40,
color:"orange"
}
food.draw = function(){
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.fillRect(this.x,this.y,this.w,this.h);
}
food.setPosition = function(){
while (true){
var x = rand(0,(oC.width - food.w) / food.w) * food.w;
var y = rand(0,(oC.width - food.h) / food.h) * food.h;
// 遍历身体上的点，如果当前随机生成的点与蛇重合就跳出for循环，则当前的i不等于snake.bodys.length，进行下一次while循环
for (var i = 0; i < snake.bodys.length; i++) {
if (x == snake.bodys[i].x && y == snake.bodys[i].y) {
break;
}
}
// 进入这个if的话，说明之前的遍历没有找到重合的点，跳出while循环
if (i == snake.bodys.length) {
// 给food赋值
this.x = x;
this.y = y;
break;
}
}
}
food.setPosition();
food.draw();
function checkP(obj1,obj2){
if (Math.abs((obj1.x + obj1.w * 0.5) - (obj2.x + obj2.w * 0.5)) < Math.abs((obj1.w+obj2.w)*0.5) && Math.abs((obj1.y + obj1.h * 0.5) - (obj2.y + obj2.h * 0.5)) < Math.abs((obj1.h+obj2.h)*0.5)) {
return true;
}else{
return false;
}
}
setInterval(function() {
ctx.clearRect(0, 0, oC.width, oC.height);
food.draw();
snake.move();
if (checkP(food,snake)) {
food.setPosition();
food.draw();
snake.bool = false;
}
}, 200);
document.onkeydown = function(ev) {
var ev = ev || window.event;
switch(ev.keyCode) {
case 37:
if(!snake.right) {
snake.left = true;
snake.right = false;
snake.top = false;
snake.bottom = false;
}
break;
case 39:
if(!snake.left) {
snake.left = false;
snake.right = true;
snake.top = false;
snake.bottom = false;
}
break;
case 38:
if(!snake.bottom) {
snake.left = false;
snake.right = false;
snake.top = true;
snake.bottom = false;
}
break;
case 40:
if(!snake.top) {
snake.left = false;
snake.right = false;
snake.top = false;
snake.bottom = true;
}
break;
}
}
</script>
</body>
</html>