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 player
    createPlayer(i);
  }
  // Let the players fight it out
  mode = setInterval(step, 1000 / 30);
  // Define function to setup the player
  function createPlayer(id) {
    // Define a random block to start the the algorithm to maximise possible outcomes
    current_block = [Math.floor(Math.random() * y), Math.floor(Math.random() * x)];
    // Check if the player is not the creator
    if (id > 0) {
      // Make sure the user hasn't chosen conditions that result in an infinite loop
      let failsafe = 10;
      // Make sure that the cell isn't taken by another player
      while (owned[current_block[0]][current_block[1]] !== 0) {
        // Reassign the position in this case
        current_block = [Math.floor(Math.random() * y), Math.floor(Math.random() * x)];
        // Reduce the failsafe number
        failsafe--;
        // If the failsafe is below zero
        if (failsafe <= 0) {
          // Then there is no space for the player
          console.log(colors[id] + " couldn't find a starting position!");
          // Still create a path array for the current player
          path[id] = new Array();
          // Exit the function
          return;
        }
      }
    }
    // Remove the wall for this block
    blocks[current_block[0]][current_block[1]][2] = id + 1;
    // Create a path array for the current player
    path[id] = new Array();
    // Store the current cell in a path variable for future reference
    path[id].push(current_block);
    // Remove the points from player Zero
    players[0] -= 10;
    // Change the owned status for the current block to show that the player owns it
    owned[current_block[0]][current_block[1]] = id;
    // Add points for the current player
    players[id] += 10;
    // Increment the total blocks visited
    total_visited++;
  }
  // Define the function which will make all the necessary changes for one step of the algorithm
  function step() {
    // Loop through the players
    for (let i = startPos; i < path.length; i++) {
      // Check if the player has already been eliminated, they won't have any entries in their path in this case
      if (path[i].length == 0) {
        // Check the next player
        continue;
      }
      // Set the current block
      current_block = path[i][path[i].length - 1];
      queue.push(current_block);
      // Define an array for the potential target
      let potential_target = [
      // Each index of the potential target array is calculated by the position in relation to the current cell
      // If we move 'up' then we minus 1 from the y array at index 0 of the current block
      [current_block[0] - 1, current_block[1], 'up', 1],
      // If we move 'right' then we add 1 to the x array at index 1 of the current block
      [current_block[0], current_block[1] + 1, 'right', 3],
      // If we move 'down' then we add 1 from the y array at index 0 of the current block
      .........完整代码请登录后点击上方下载按钮下载查看