ChatGPT game

A game created almost entirely with Chat GPT. You are the red square. Collect the yellow squares and avoid the blue square.

by Ben Gillbanks

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Maze Game</title>
</head>
<body>
<p>
A game created almost entirely with Chat GPT. You are the red square. Collect the yellow squares and avoid the blue square.
</p>
  <div id="maze">
      <div id="character"></div>
      <div id="enemy"></div>
      <div id="win-message">
         <p>You won!</p>
      </div>
  </div>
  <div id="hud">
  <div id="score">Score: 0</div>  
  <div id="health">Health: 100</div>  
  </div>
</body>
</html>

CSS

html {
    font-family: Courier, mono-space;
}

* {
    max-width: 600px;
}

#maze {
  width: 500px;
  height: 500px;
  background-color: #ccc;
  position: relative;
}

.wall {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #333;
}

.collectible {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0;
  left: 0;
  background-color: yellow;
}

#character {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: red;
  z-index: 1;
  top:50px;
  left: 50px;
}

#enemy {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 200px;
  left: 150px;
  background-color: blue;
  z-index: 1;
}

#win-message {
    position: absolute;
    display: flex;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    font-size: 40px;
    font-weight: bold;
    padding: 20px;
    background: rgba( 255,255,255,0.5 );
    line-height: 0;
    display: none;
}

#hud {
    display: flex;
    gap: 10px;
    font-size: 24px;
    font-weight: bold;
    padding: 10px;
}

JavaScript

var tile_size = 50;
var health = 100;

// Create a 2D array to represent the maze
var maze1 = [
  [1,1,1,1,1,1,1,1,1,1],
  [1,0,0,0,0,0,0,0,0,1],
  [1,0,1,1,1,1,0,1,1,1],
  [1,0,1,0,0,0,0,0,0,1],
  [1,0,1,0,1,1,1,1,1,1],
  [1,0,0,0,0,0,0,0,0,1],
  [1,0,1,0,1,1,0,1,1,1],
  [1,0,1,0,0,1,0,0,0,1],
  [1,0,0,0,0,1,0,1,0,1],
  [1,1,1,1,1,1,1,1,1,1]
];


var maze2 = [
  [1,1,1,1,1,1,1,1,1,1],
  [1,0,1,0,0,0,0,0,0,1],
  [1,0,1,0,1,1,0,1,1,1],
  [1,0,1,0,0,0,0,0,0,1],
  [1,0,1,0,1,1,1,1,0,1],
  [1,0,0,0,0,0,0,1,0,1],
  [1,0,1,0,1,1,0,1,1,1],
  [1,1,1,0,0,1,0,0,0,1],
  [1,0,0,0,0,1,0,1,0,1],
  [1,1,1,1,1,1,1,1,1,1]
];

var level = 0;


function generateMaze() {

    // Generate the maze by adding div elements for the walls
    for (var i = 0; i < maze.length; i++) {
      for (var j = 0; j < maze[i].length; j++) {
        if (maze[i][j] == 1) {
          // Create a div element for the wall and add it to the maze
          var wall = document.createElement("div");
          wall.classList.add("wall");
          wall.style.left = j * tile_size + "px";
          wall.style.top = i * tile_size + "px";
          document.getElementById("maze").appendChild(wall);
        }
      }
    }

}


// Add event listeners for the arrow keys
document.addEventListener("keydown", moveCharacter);


function generateCoins() {

    // Add collectibles to the maze at random locations
    for (var i = 0; i < maze.length; i++) {
      for (var j = 0; j < maze[i].length; j++) {
        if (maze[i][j] == 0 && Math.random() < 0.1) {
          // Create a div element for the collectible and add it to the maze
          var collectible = document.createElement("div");
          collectible.classList.add("collectible");
          collectible.style.left = j * 50 + "px";
          collectible.style.top = i * 50 + "px";
          document.getElementById("maze").appendChild(collectible);
        }
      }
    }

}

// Remove the wall div elements from the maze
function removeWallDivs() {

  // Get all...