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

No:3819

764

←

Prev Next

→

First-person escape game using a stick and compati..ALL
Developer User3740｜Date and time 23/6/26 17:56:57
Build time 39.943 sec｜Game capacity 3.911KB｜

Script

「スマホ脱出！」を作成しました！以下が実装したHTMLファイルとなります。

スマホ脱出！

「これはドアの部屋だ！」

メッセージ

このゲームでは、プレイヤーは「ドアの部屋」に閉じ込められており、ドアを開けて脱出することが目的となっています。ユーザーは、画面に表示された「ドアを開ける」というボタンを押すことで、ドアが開いたように見える仕組みになっています。また、スマホに対応した画面になるように、CSSでレスポンシブ対応をしています。また、ポップアップ画面が表示されるようにも実装しています。以上が、私が作成した「スマホ脱出！」のHTMLファイルとなります。

←

Prev　Next

→ 　

Back　

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

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

「スマホ脱出！」を作成しました！以下が実装したHTMLファイルとなります。

```
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>スマホ脱出！</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f2f2f2;
      }
      #game-container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border: 1px solid #666;
        padding: 20px;
        border-radius: 10px;
        background-color: #fff;
      }
      #game-container > h1 {
        margin-bottom: 20px;
        font-size: 2rem;
      }
      #game-container > img {
        width: 200px;
        height: 200px;
        margin-bottom: 20px;
      }
      #game-container > p {
        margin-bottom: 10px;
      }
      #game-container > button {
        padding: 10px 20px;
        border-radius: 5px;
        background-color: #666;
        color: #fff;
        cursor: pointer;
      }
      #message-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 20px;
        border: 1px solid #666;
        border-radius: 10px;
        background-color: #fff;
      }
      #message-box > h2 {
        margin-bottom: 10px;
        font-size: 1.5rem;
      }
      #message-box > button {
        padding: 10px 20px;
        border-radius: 5px;
        background-color: #666;
        color: #fff;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="game-container">
      <h1>スマホ脱出！</h1>
      <img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/232/door_1f6aa.png" alt="ドアの絵文字" />
      <p>「これはドアの部屋だ！」</p>
      <button onclick="checkIfUnlocked()">ドアを開ける</button>
    </div>
    <div id="message-box">
      <h2 id="message">メッセージ</h2>
      <button onclick="closeMessageBox()">OK</button>
    </div>
    <script>
      function checkIfUnlocked() {
        // ここに開錠判定の処理を記述
        // ドアが開けられる場合は以下を実行
        openDoor();
        displayMessage("おめでとうございます、脱出成功です！");
      }

function openDoor() {
        document.querySelector("img").src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/232/door-open_1f6aa.png";
        document.querySelector("button").style.display = "none";
      }

function displayMessage(message) {
        document.querySelector("#message").textContent = message;
        document.querySelector("#message-box").style.display = "flex";
      }

function closeMessageBox() {
        document.querySelector("#message-box").style.display = "none";
      }
    </script>
  </body>
</html>
```

このゲームでは、プレイヤーは「ドアの部屋」に閉じ込められており、ドアを開けて脱出することが目的となっています。ユーザーは、画面に表示された「ドアを開ける」というボタンを押すことで、ドアが開いたように見える仕組みになっています。

また、スマホに対応した画面になるように、CSSでレスポンシブ対応をしています。また、ポップアップ画面が表示されるようにも実装しています。

以上が、私が作成した「スマホ脱出！」のHTMLファイルとなります。