js实现保护蛋糕canvas小游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js实现保护蛋糕canvas小游戏代码，鼠标键盘左右键控制蛋糕，防止被叉子挡住。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 95vh;
}

canvas {
  border: 4px solid black;
  border-radius: 1rem;
}
</style>


  
  
</head>

<body translate="no">

      <script  >
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 700;

document.body.append(canvas);

const GAME_STATE = {
  START: "start",
  PLAYING: "playing",
  GAME_OVER: "gameOver" };


const gameState = {
  currentState: GAME_STATE.START,
  score: 0,
  cakeHealth: 3 };


const player = {
  x: canvas.width / 2 - 30,
  y: canvas.height - 200,
  width: 80,
  height: 80,
  speed: 5 };


let forks = [];

const forkProperties = {
  width: 250,
  height: 30,
  speed: 4,
  spawnRate: 60,
  maxForks: 4 };


const background = {
  rayCount: 12,
  raySpeed: 0.005,
  rayAngle: 0,
  innerRadius: 1, // Size of triangle base near center
  outerRadius: 500 // How far the triangles stretch
};

const keys = {
  ArrowUp: false,
  ArrowDown: false,
  ArrowLeft: false,
  ArrowRight: false };


// Event listeners for keyboard
document.addEventListener("keydown", e => {
  if (keys.hasOwnProperty(e.key)) {
    keys[e.key] = true;
  }
});

document.addEventListener("keyup", e => {
  if (keys.hasOwnProperty(e.key)) {
    keys[e.key] = false;
  }
});

class Button {
  constructor(text, x, y, width, height) {
    this.x = x || canvas.width / 2 - 60;
    this.y = y || canvas.height / 2 + 50;
    this.width = width || 120;
    this.height = height || 50;
    this.text = text;
  }

  draw(ctx) {
    ctx.save();
    ctx.fillStyle = "#04678e";
    ctx.beginPath();
    ctx.roundRect(this.x, this.y, this.width, this.height, 10);
    ctx.fill();

    ctx.fillStyle = "white";
    ctx.font = "bold 18px Arial";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(this.text, this.x + this.width / 2, this.y + this.height / 2);

    ctx.restore();
  }

  isClicked(mouseX, mouseY) {
    return (
      mouseX >= this.x &&
      mouseX <= this.x + this.width &&
      mouseY >= this.y &&
      mouseY <= this.y + this.height);

  }}


const startButton = new Button("START");
const restartButton = new Button("RESTART");

canvas.addEventListener("click", e => {
  const rect = canvas.getBoundingClientRect();
  const mouseX = e.clientX - rect.left;
  const mouseY = e.clientY - rect.top;

  if (
  gameState.currentState === GAME_STATE.START &&
  startButton.isClicked(mouseX, mouseY))
  {
    startGame();
  } else if (
  gameState.currentState === GAME_STATE.GAME_OVER &&
  restartButton.isClicked(mouseX, mouseY))
  {
    startGame();
  }
});

canvas.addEventListener("mousemove", e => {
  const rect = canvas.getBoundingClientRect();
  const mouseX = e.clientX - rect.left;
  const mouseY = e.clientY - rect.top;

  if (
  startButton.isClicked(mouseX, mouseY) ||
  restartButton.isClicked(mouseX, mouseY))
  {
    canvas.style.cursor = "pointer";
  } else {
    canvas.style.cursor = "default";
  }
});

function createFork() {
  let width = forkProperties.width * Math.random();
  if (width < 100) {
    width = 100;
  }

  const random = Math.random();

  return {
    x: random > 0.5 ? canvas.width - width : 0,
    y: -forkProperties.height,
    width,
    height: forkProperties.height,
    fromLeft: random < 0.5 };

}

function checkCollision(rect1, rect2) {
  return (
    rect1.x < rect2.x + rect2.width &&
    rect1.x + rect1.width > rect2.x &&
    rect1.y < rect2.y + rect2.height &&
    rect1.y + rect1.height > rect2.y);

}

function updatePlayer() {
  if (keys.ArrowLeft && player.x > 0) {
    player.x -= player.speed;
  }
  if (keys.ArrowRight && player.x < canvas.width - player.width) {
    player.x += player.speed;
  }
  if (keys.ArrowUp && player.y > 0) {
    player.y -= player.speed;
  }
  if (keys..........完整代码请登录后点击上方下载按钮下载查看