<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas {
box-shadow: 2px 2px 10px deeppink;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var snake = {
x: -40,
y: 0,
w: 40,
h: 40,
headColor: "deeppink",
bodyColor:"palegreen",
top: false,
bottom: false,
left: false,
right: true,
bodys:[],
bool:true
}
snake.draw = function() {
ctx.beginPath();
ctx.fillStyle = this.headColor;
ctx.fillRect(this.x, this.y, this.w, this.h);
}
snake.move = function() {
if(this.left) {
this.x -= this.w;
} else if(this.right) {
this.x += this.w;
} else if(this.top) {
this.y -= this.h;
} else 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 > 4 && this.bool) {
// arr.shift()刪除數組第一個元素
this.bodys.shift();
}else{
this.bool = true;
}
}
snake.drawBody = function(){
for (var i = 0; i < this.bodys.length; i++) {
ctx.beginPath();
ctx.fillStyle = this.bodyColor;
ctx.fillRect(this.bodys[i].x,this.bodys[i].y,this.bodys[i].w,this.bodys[i].h);
}
}
// snake.draw();
function rand(min,max){
return Math.floor(Math.random() * (max - min + 1) + min);
}
var food = {
x: 0,
y: 0,
w: 40,
h: 40,
color: "#3CFFFE"
}
food.draw = function(){
ctx.fillStyle = this.color;
ctx.fillRect(this.x,this.y,this.w,this.h);
}
food.setPosition = function(){
while (true){
var x = rand(0,(canvas.width - this.w) / this.w) * this.w;
var y = rand(0,(canvas.height - this.w) / this.w) * this.w;
// 遍歷身體上的點，如果當前隨機生成的點與蛇重合的話，跳出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;
}
}
// 之前的遍歷如果沒有找到重合的點，跳出white循環
if (i == snake.bodys.length) {
this.x = x;
this.y = y;
break;
}
}
}
food.setPosition();
food.draw();
function checkP(obj1,obj2){
if (Math.abs(obj1.x + obj1.w / 2 - (obj2.x + obj2.w / 2)) < obj1.w / 2 + obj2.w / 2 && Math.abs(obj1.y + obj1.h / 2 - (obj2.y + obj2.h / 2)) < obj1.h / 2 + obj2.h / 2) {
return true;
}else{
return false;
}
}
setInterval(function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
food.draw();
snake.move();
if (checkP(food,snake)) {
food.setPosition();
food.draw();
snake.bool = false;
}
}, 500);
document.onkeydown = function(e) {
var ev = e || window.event;
switch(ev.keyCode) {
case 37:
// left
if(!snake.right) {
snake.left = true;
snake.right = false;
snake.top = false;
snake.bottom = false;
}
break;
case 38:
// top
if(!snake.bottom) {
snake.left = false;
snake.right = false;
snake.top = true;
snake.bottom = false;
}
break;
case 39:
// right
if(!snake.left) {
snake.left = false;
snake.right = true;
snake.top = false;
snake.bottom = false;
}
break;
case 40:
// bottom
if(!snake.top) {
snake.left = false;
snake.right = false;
snake.top = false;
snake.bottom = true;
}
break;
}
}
</script>
</body>
</html>