canvas实现迷宫大逃杀效果代码-html代码-BFW代码库

canvas实现迷宫大逃杀效果代码

代码语言：html

所属分类：其他

代码描述：canvas实现迷宫大逃杀效果代码

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

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

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

  
  
  
  
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #000;
  color: #fff;
}

canvas {
  height: 100%;
  width: 100%;
}

.app{
  align-content: center;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.container {
  align-content: stretch;
  align-items: center;
  background: #000;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 100%;
}

.app .card {
  display: block;
  font-size: 0.8em;
  width: 100vmin;
}
</style>


  
</head>

<body translate="no">
  <article>
  <section id="top" class="container app">
    <div id="visual" class="card show-visual">
      <canvas id="display"></canvas>
    </div>
  </section>
</article>
  
      <script  >
// SETTINGS
// Set a size for the first maze (between 4 - 12)
let start_size = 4;

// Set a max size for the maze, each new game will double the size (bigger sizes can cause lag and take longer to complete, choose 100 or less)
let end_size = 100;

// Set the number of players (max 7)
let player_count = 7;

// Define all the colors (use CSS named colors)
const background = "black";
const open_path = "white";
const player1 = "red";
const player2 = "green";
const player3 = "blue";
const player4 = "yellow";
const player5 = "orange";
const player6 = "purple";
const player7 = "magenta";

// --- END OF SETTINGS --- //

// Set the maze size in terms of blocks
let maze_size = start_size;

// Define a mode for the display canvas
let mode;

// Define the cell size
let cell_size = 15;

// The maze is made up of blocks of 4 blocks in a 2 x 2 formation so calculate the block size
let block_size = cell_size * 2;

// Apply the chosen colours into an array for easy referencing
let colors = [background, open_path, player1, player2, player3, player4, player5, player6, player7];

// Initiate the canvas variables for creating the display
let canvas = document.getElementById('display');
let grid = canvas.getContext('2d');

// Create a variable to keep track of the players' paths
let players;

// Define the function for drawing the maze blocks
function draw(queue, blocks) {
  // Only draw the blocks in the queue
  while (queue.length) {
    // Get the location based on the index numbers
    let [i, j] = queue.pop();
    // Make it clearer which is x and which is y then multply them by the block size
    let y = i * block_size;
    let x = j * block_size;
    // The top left cell of each block is stored in index [0] index, which in the.........完整代码请登录后点击上方下载按钮下载查看