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

js实现保护蛋糕canvas小游戏代码

代码语言：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";
 .........完整代码请登录后点击上方下载按钮下载查看