Click here for free DL of the app version that can save data.

No:37848

Person walking in a city
Developer User17064｜Date and time 24/1/21 18:16:04
Build time 15.899 sec｜Game capacity 3.735KB｜

Script

City Explorer Game

Score: 0

Try to explore the city by moving around!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
<title>City Explorer Game</title>
<style>
body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
  margin: 0;
  padding: 0;
  text-align: center;
}

h1 {
  color: #333333;
}

#map {
  width: 80%;
  max-width: 600px;
  height: 400px;
  margin: 20px auto;
  border: 5px solid #333333;
}

#score {
  color: #333333;
  font-size: 20px;
  margin-bottom: 10px;
}

#instruction {
  color: #333333;
  font-size: 16px;
  margin-bottom: 20px;
}

#actions {
  display: flex;
  justify-content: center;
}

button {
  padding: 10px;
  font-size: 14px;
  margin: 0 5px;
}
</style>
</head>
<body>
<h1>City Explorer Game</h1>
<div id="score">Score: 0</div>
<div id="instruction">Try to explore the city by moving around!</div>
<div id="map"></div>
<div id="actions">
  <button id="north">⬆️</button>
  <button id="south">⬇️</button>
  <button id="west">⬅️</button>
  <button id="east">➡️</button>
</div>

let playerPos = { x: 2, y: 2 };
let score = 0;

// Render the city map
function renderMap() {
  const mapDiv = document.getElementById("map");

let html = "";
  for (let i = 0; i < grid.length; i++) {
    for (let j = 0; j < grid[i].length; j++) {
      html += `<span>${grid[i][j]}</span>`;
    }
    html += "<br>";
  }

mapDiv.innerHTML = html;
  mapDiv.childNodes[playerPos.y].childNodes[playerPos.x].classList.add("player");
}

// Update the player's position
function updatePlayerPosition(newX, newY) {
  const mapDiv = document.getElementById("map");
  mapDiv.childNodes[playerPos.y].childNodes[playerPos.x].classList.remove("player");

playerPos.x = newX;
  playerPos.y = newY;

mapDiv.childNodes[playerPos.y].childNodes[playerPos.x].classList.add("player");
}

// Handle player movement
function handleMove(direction) {
  let newX = playerPos.x;
  let newY = playerPos.y;

if (direction === "north" && playerPos.y > 0) {
    newY = playerPos.y - 1;
  } else if (direction === "south" && playerPos.y < grid.length - 1) {
    newY = playerPos.y + 1;
  } else if (direction === "west" && playerPos.x > 0) {
    newX = playerPos.x - 1;
  } else if (direction === "east" && playerPos.x < grid[0].length - 1) {
    newX = playerPos.x + 1;
  }

if (newX !== playerPos.x || newY !== playerPos.y) {
    updatePlayerPosition(newX, newY);
    checkInteraction();
  }
}

// Check for interactions with city locations
function checkInteraction() {
  const currentLocation = grid[playerPos.y][playerPos.x];

if (currentLocation === "🏥") {
    score += 10;
    alert("You found a hospital! +10 points");
  } else if (currentLocation === "🏫") {
    score += 20;
    alert("You found a school! +20 points");
  } else if (currentLocation === "🏦") {
    score += 15;
    alert("You found a bank! +15 points");
  } else if (currentLocation === "🛒") {
    score += 5;
    alert("You found a supermarket! +5 points");
  }

document.getElementById("score").textContent = "Score: " + score;
}

// Event listeners for movement buttons
document.getElementById("north").addEventListener("click", function() {
  handleMove("north");
});

document.getElementById("south").addEventListener("click", function() {
  handleMove("south");
});

document.getElementById("west").addEventListener("click", function() {
  handleMove("west");
});

document.getElementById("east").addEventListener("click", function() {
  handleMove("east");
});

// Initial rendering of the map
renderMap();
</script>
</body>
</html>