<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>贪吃蛇</title>
</head>
<style>
html,body{
height: 100%;
width: 100%;
margin:0;
padding: 0;
}
canvas{
height: 100%;
width: 100%;
}
</style>
<body>
<canvas id="canvas" >
Your browser does not support the canvas API.
</canvas>
</body>
<script>
const baseNum = 20;
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
var food;
class Rect{
constructor(x, y, w, h, color){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.color = color;
}
draw(){
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.rect(this.x, this.y ,this.w, this.h);
ctx.fill();
ctx.stroke();
}
}
class Snake{
constructor(){
let snakeArray = [];
for(let s=0;s < 4; s++){
let rect = new Rect(s * baseNum, 0, baseNum, baseNum, "gray");
snakeArray.unshift(rect);
}
let head = snakeArray[0];
head.color = "red";
this.head = head;
this.snakeArray = snakeArray;
this.direction = 39;
}
draw(){
for(let rect of this.snakeArray){
rect.draw();
}
}
move(){
let rect = new Rect(this.head.x,
this.head.y, this.head.w, this.head.h, 'gray');
this.snakeArray.splice(1,0,rect);
if(isEat()){
food = new getRandomFood();
}else{
this.snakeArray.pop();
}
switch(this.direction){
case 37: // left
case 65:
this.head.x -= this.head.w;
break;
case 39: // right
case 68:
this.head.x += this.head.w;
break;
case 38: // up
case 87:
this.head.y -= this.head.h;
break;
case 40: //down
case 83:
this.head.y += this.head.h;
break;
default:
break;
}
// 撞墙
if(this.head.x >= canvas.width || this.head.x < 0
|| this.head.y >= canvas.height || this.head.y < 0){
// 游戏结束
clearInterval(timer)
}
// 撞自己
for(let s = 1; s < this.snakeArray.length; s++){
if(this.snakeArray[s].x == this.head.x &&
this.snakeArray[s].y == this.head.y){
// 游戏结束
clearInterval(timer)
}
}
}
}
let snake = new Snake()
snake.draw()
var food = new getRandomFood()
var timer = setInterval(() => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
snake.move();
snake.draw();
food.draw();
}, 100);
function isEat(){
if(snake.head.x == food.x && snake.head.y == food.y){
return true
}else{
return false;
}
}
document.onkeydown = function(e){
switch(e.keyCode){
case 37: // left
{
if(snake.direction !== 39) {// right
snake.direction = 37;
}
break;
}
case 39: // right
{
if(snake.direction !== 37){ // left
snake.direction = 39;
}
break;
}
case 38: //up
{
if(snake.direction !== 40){ //down
snake.direction = 38;
}
break;
}
case 40: //down
{
if(snake.direction !== 38){ //up
snake.direction = 40;
}
break;
}
}
e.preventDefault();
}
function randomBetween(min, max){
return Math.round(min + Math.random() * (max - min))
}
function getRandomFood() {
let isOnSnake = true;
let rect;
while(isOnSnake){
isOnSnake = false;
let foodX = randomBetween(0, canvas.width / baseNum -1);
let foodY = randomBetween(0, canvas.height / baseNum -1);
rect = new Rect(foodX * baseNum, foodY * baseNum,
baseNum, baseNum, "green");
for(let snakeBody of snake.snakeArray){
if(snakeBody.x == rect.x && snakeBody.y == rect.y){
isOnSnake = true
break;
}
}
}
return rect;
}
</script>
</html>
