canvas实现贪吃蛇

canvas 实现简易贪吃蛇

实现过程

• 制作蛇
  • 蛇头和蛇身
  • 蛇运动
• 键盘事件
  • animate 运动
  • 随机食物
• 随机数坐标
  • 是否投放在蛇身和蛇头中(重新投放)
  • 吃食物
• 碰撞检测
  • 增加蛇身长度
  • 蛇头是否碰撞到蛇身
  • gameover

定义绘制矩形构造函数

function Reat(x, y, width, height, color) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
  this.color = color;
  this.draw = function () {
    ctx.beginPath();
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
    ctx.strokeRect(this.x, this.y, this.width, this.height);
  };
}

初始化参数

let ctx = canvas.getContext("2d");
//吃食物开关
let isEatFood = false;
//定时器
let timer;
//速度
let sudu = 200;
//键盘值
let keycode = 39;
//定时器开关
let flag = true;
//食物方法
let food;
//蛇实例
let snake;

定义蛇构造函数

function Snake() {
  //初始化蛇运动方向
  this.direction = 2;
  //蛇头
  this.head = new Reat(
    canvas.width / 2 - 20,
    canvas.height / 2 - 20,
    40,
    40,
    "red"
  );

  //蛇身
  this.body = [];
  let x = this.head.x - 40;
  let y = this.head.y;
  for (let i = 0; i < 3; i++) {
    let rect = new Reat(x, y, 40, 40, "gray");
    this.body.push(rect);
    x -= 40;
  }
  //画
  this.draw = function () {
    // 绘制蛇头
    this.head.draw();
    //绘制蛇身
    for (let i = 0; i < this.body.length; i++) {
      this.body[i].draw();
    }
  };
  // 移动
  this.move = function () {
    //创建当前蛇头位置的蛇身
    let rect = new Reat(
      this.head.x,
      this.head.y,
      this.head.width,
      this.head.height,
      "gray"
    );
    this.body.splice(0, 0, rect);

    //去尾
    //如何没吃到食物,去除一个尾部
    if (isEatFood == false) {
      this.body.pop();
    } else {
      isEatFood = false;
    }
    //蛇头移动
    switch (this.direction) {
      //蛇头向左
      case 0: {
        if (this.head.x <= 0) {
          this.head.x = canvas.width;
        }
        this.head.x -= this.head.width;
        break;
      }
      //上
      case 1: {
        if (this.head.y <= 0) {
          this.head.y = canvas.height;
        }
        this.head.y -= this.head.width;
        break;
      }
      //右
      case 2: {
        if (this.head.x >= 795) {
          this.head.x = -40;
        }
        this.head.x += this.head.width;
        break;
      }
      //下
      case 3: {
        if (this.head.y >= canvas.height - 40) {
          this.head.y = -40;
        }
        this.head.y += this.head.width;
        break;
      }
    }
    // 判断蛇头和蛇身是否撞上
    for (let i = 0; i < this.body.length; i++) {
      if (isRect(this.head, this.body[i])) {
        clearInterval(timer);
        timer = null;
      }
    }
  };
}

定义键盘事件

//键盘事件传值
document.addEventListener("keydown", function (event) {
  let ev = event || window.event;
  switch (ev.keyCode) {
    //左
    case 37: {
      if (keycode !== 39) {
        snake.direction = 0;
        keycode = 37;
        break;
      } else {
        break;
      }
    }
    //上
    case 38: {
      if (keycode !== 40) {
        snake.direction = 1;
        keycode = 38;
        break;
      }
    }
    //右
    case 39: {
      if (keycode !== 37) {
        snake.direction = 2;
        keycode = 39;
        break;
      } else {
        break;
      }
    }
    //下
    case 40: {
      if (keycode !== 38) {
        snake.direction = 3;
        keycode = 40;
        break;
      } else {
        break;
      }
    }
  }
});

定义食物事件

food = isfood();
function isfood() {
  let isSnake = true;
  while (isSnake) {
    let x = getNum(0, (canvas.width - 40) / 40) * 40;
    let y = getNum(0, (canvas.height - 40) / 40) * 40;
    var rect = new Reat(x, y, 40, 40, "blue");
    //判断生成位置是否与蛇头重叠
    if (isRect(snake.head, rect)) {
      isSnake = true;
      continue;
    }
    isSnake = false;
    //判断生成位置是否与蛇身重叠
    for (let i = 0; i < snake.body.length; i++) {
      if (isRect(snake.body[i], rect)) {
        isSnake = true;
        break;
      }
    }
  }
  return rect;
}

随机数事件

function getNum(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

碰撞检测事件

function isRect(rect1, rect2) {
  let minX1 = rect1.x;
  let minX2 = rect2.x;
  let minY1 = rect1.y;
  let minY2 = rect2.y;

  let maxX1 = rect1.x + rect1.width;
  let maxX2 = rect2.x + rect2.width;
  let maxY1 = rect1.y + rect1.height;
  let maxY2 = rect2.y + rect2.height;
  //判断矩形相交
  let minX = Math.max(minX1, minX2);
  let minY = Math.max(minY1, minY2);
  let maxX = Math.min(maxX1, maxX2);
  let maxY = Math.min(maxY1, maxY2);

  if (minX < maxX && minY < maxY) {
    return true;
  } else {
    return false;
  }
}

动画事件

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  food.draw(); //绘制食物
  snake.move(); //蛇头移动坐标
  snake.draw(); //绘制
  //判读蛇头是否吃到食物
  if (isRect(snake.head, food)) {
    isEatFood = true;
    food = isfood();
    food.draw();
    sudu = sudu < 50 ? 50 : sudu - 10;
    stop();
    start();
  }
}

开始游戏计时器

function start() {
  if (flag == true) {
    timer = setInterval(() => {
      animate();
      flag = false;
    }, sudu);
  }
}

暂停游戏

function stop() {
  clearInterval(timer);
  flag = true;
}

赏

感谢观看