code snake #3

maiff · 2019-02-14T05:54:19Z

<!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>

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

code snake #3

code snake #3

maiff commented Feb 14, 2019 •

edited

Loading

code snake #3

code snake #3

Comments

maiff commented Feb 14, 2019 • edited Loading

maiff commented Feb 14, 2019 •

edited

Loading