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

No:10336

122

←

Prev Next

→

rising storm
Developer User4522｜Date and time 23/7/30 12:44:06
Build time 15.489 sec｜Game capacity 2.195KB｜

Script

了解です。では、以下にプログラムを記述します。

Rising Storm

このプログラムは、「Rising Storm」というタイトルのゲームを1枚のHTMLファイルで実装しています。スマートフォン上で操作することを前提としています。ゲームボード上にプレイヤーキャラクターが表示されており、上下左右のボタンをタップするとキャラクターが移動します。キャラクターの位置はJavaScriptで管理しており、移動ボタンがクリックされると位置が更新され表示されるようになっています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

了解です。では、以下にプログラムを記述します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>Rising Storm</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    h1 {
      margin: 50px 0;
    }
    #game-board {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 400px;
    }
    #player {
      font-size: 3em;
    }
    #controls {
      display: flex;
      justify-content: center;
      margin-top: 50px;
    }
    .control-button {
      font-size: 2em;
      margin: 0 10px;
    }
  </style>
</head>
<body>
  <h1>Rising Storm</h1>
  <div id="game-board">
    <span id="player"></span>
  </div>
  <div id="controls">
    <button class="control-button" onclick="move('up')">⬆️</button>
    <button class="control-button" onclick="move('left')">⬅️</button>
    <button class="control-button" onclick="move('right')">➡️</button>
    <button class="control-button" onclick="move('down')">⬇️</button>
  </div>

playerElement.style.transform = `translate(${positionX}px, ${positionY}px)`;
    }
  </script>
</body>
</html>
```