AI game creator

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

No:84

301

←

Prev Next

→

escape game
Developer User1688｜Date and time 23/5/12 19:35:36
Build time 96.09 sec｜Game capacity 3.938KB｜

Script

はい、了解しました。以下に脱出ゲームを1枚のhtmlファイル内に実装するプログラムを記述します。

このプログラムでは、脱出ゲームを実装しています。プレイヤーは画面下部のテキストボックスにコマンドを入力します。入力したコマンドに応じて処理を実行し、ゲームを進めていきます。最終的に扉を開けて脱出することが目的です。また、スマホでの操作を前提とし、絵文字を多めに使用しています。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

はい、了解しました。以下に脱出ゲームを1枚のhtmlファイル内に実装するプログラムを記述します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>脱出ゲーム</title>
<style>
body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #f2f2f2;
}

.container {
  width: 100%;
  max-width: 480px;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

#game-area {
  width: 100%;
  height: 60%;
  overflow-y: scroll;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 5px;
}

#input-area {
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#input {
  width: 60%;
  height: 40px;
  margin-right: 10px;
  border: none;
  border-radius: 20px;
  padding: 0 20px;
  font-size: 1.2rem;
  box-sizing: border-box;
}

#submit {
  width: 60px;
  height: 40px;
  background-color: #3f51b5;
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 1.2rem;
}

p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 10px;
  text-align: center;
}

button {
  width: 120px;
  height: 40px;
  background-color: #3f51b5;
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 1.2rem;
  margin: 20px;
}
</style>
</head>
<body>
<div class="container">
  <div id="game-area"></div>
  <div id="input-area">
    <input type="text" id="input" placeholder="コマンドを入力してください">
    <button id="submit">送信</button>
  </div>
</div>
<script>
// ゲームの中身をここに書く

// 初期表示時にメッセージを表示する
const gameArea = document.getElementById("game-area");
const firstMessage = document.createElement("p");
firstMessage.textContent = "この部屋から脱出するためには、扉の鍵を探し出して開ける必要があります。";
gameArea.appendChild(firstMessage);

// コマンド入力処理
const input = document.getElementById("input");
const submit = document.getElementById("submit");
submit.addEventListener("click", function() {
  const command = input.value;
  const message = document.createElement("p");
  message.textContent = `> ${command}`;
  gameArea.appendChild(message);
  input.value = "";
  
  // コマンドに応じて処理を実行する
  if (command === "look") {
    const lookMessage = document.createElement("p");
    lookMessage.textContent = "部屋を見渡してみる。机と引き出しがある。";
    gameArea.appendChild(lookMessage);
  } else if (command === "open drawer") {
    const openDrawerMessage = document.createElement("p");
    openDrawerMessage.textContent = "引き出しの中に鍵があった。";
    gameArea.appendChild(openDrawerMessage);
  } else if (command === "unlock door") {
    const unlockDoorMessage = document.createElement("p");
    unlockDoorMessage.textContent = "扉が開いた。脱出成功！";
    gameArea.appendChild(unlockDoorMessage);
    const retryButton = document.createElement("button");
    retryButton.textContent = "もう一度やる";
    retryButton.addEventListener("click", function() {
      location.reload();
    });
    gameArea.appendChild(retryButton);
  } else {
    const errorMessage = document.createElement("p");
    errorMessage.textContent = "そのコマンドは実行できません。";
    gameArea.appendChild(errorMessage);
  }
});
</script>
</body>
</html>