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

代码语言：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 current implementation is always a blocked path but this data is still stored in an array for possible future adaptations
    grid.beginPath;
    grid.fillStyle = colors[blocks[i][j][0]];
    grid.fillRect(x, y, cell_size, cell_size);
    // The top right cell is based on the calculations of the algorithm and is stored in index [1] of the calculated array
    grid.beginPath;
    grid.fillStyle = colors[blocks[i][j][1]];
    grid.fillRect(x + cell_size, y, cell_size, cell_size);
    // The bottom left cell is stored in index [3] of the calculated array
    grid.beginPath;
    grid.fillStyle = colors[blocks[i][j][3]];
    grid.fillRect(x, y + cell_size, cell_size, cell_size);
    // The bottom right cell is always an open path but in case of future apations to the design this data is stored in index [2]
    grid.beginPath;
    grid.fillStyle = colors[blocks[i][j][2]];
    grid.fillRect(x + cell_size, y + cell_size, cell_size, cell_size);
  }
}

// Define the function to create a new maze
function newMaze(x, y) {
  // Set the total number of blocks to create an end condition for the creation of the maze
  const total_blocks = x * y;
  // Create a blocks array to store the data
  let blocks = [];
  // The algorithm will keep track of which player owns a block
  let owned = [];
  // Loop over the y co-ordinates first
  for (let i = 0; i < y; i++) {
    // Create an empty array for each y co-ordinate
    blocks[i] = [];
    // Create an empty array to record whether the block has been visited by the algorithm
    owned[i] = [];
    // Loop over the x co-ordinates
    for (let j = 0; j < x; j++) {
      // Set the defaults for each pair of co-ordinates
      // 0 = Wall
      // 1 = Path
      // Note that the 1s will be added later in the algorithm
      blocks[i][j] = [0, 0, 0, 0];
      // Initialise the fact that the block hasn't been visited yet
      owned[i][j] = false;
    }
  };
  // Track how many blocks have been visited
  let total_visited = 0;
  // Track the current block
  let current_block;
  // Track the start position
  let startPos = 0;
  // Track the path
  let path = [];
  // Create player Zero
  createPlayer(0);
  // Create a queue for painting the blocks
  let queue = [];
  // Let Player Zero create the whole maze
  while (total_visited < total_blocks) {
    // Work through the path step by step
    step();
  }
  // Loop over the y co-ordinates first
  for (let i = 0; i < blocks.length; i++) {
    // Then, loop over the x co-ordinates
    for (let j = 0; j < blocks[i].length; j++) {
      // Add each block to the queue to show all the paths in the maze
      queue.push([i, j]);
    }
  }
  // Draw all the paths in the full maze
  draw(queue, blocks);
  // Reset the total visited blocks
  total_visited = 0;
  // Remove player Zero
  path[0].length = 0;
  // Move the start position to player 1
  startPos = 1;
  // Loop through the players
  for (let i = 1; i < players.length; i++) {
    // Create the pl.........完整代码请登录后点击上方下载按钮下载查看