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

No:6723

118

←

Prev Next

→

Sambal Rasam
Developer もちきなこ｜Date and time 23/7/3 12:25:19
Build time 23.122 sec｜Game capacity 2.208KB｜

Script

了解しました。以下にサンプルとして、JavaScriptを用いた簡単なゲームを実装してみます。

簡単なゲーム

スコア: 0

このゲームでは、赤い円をクリックすることでスコアが増えます。赤い円はクリックするとランダムな位置に移動します。スコアは画面上部に表示されます。ゲームをスタートすると、スマホでもプレイすることができます。絵文字は使用していませんが、スタイリッシュなデザインになるようにCSSで設定しています。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下にサンプルとして、JavaScriptを用いた簡単なゲームを実装してみます。

```html
<!DOCTYPE html>
<html>
<head>
  <title>簡単なゲーム</title>
  <style>
    body {
      text-align: center;
    }
    #score {
      font-size: 24px;
      margin-bottom: 10px;
    }
    #gameArea {
      width: 200px;
      height: 200px;
      margin: 0 auto;
      border: 1px solid black;
      position: relative;
    }
    #target {
      width: 50px;
      height: 50px;
      background-color: red;
      border-radius: 50%;
      position: absolute;
      top: 0;
      left: 0;
      transform-origin: center;
      transition: top 0.5s ease-in-out;
    }
  </style>
</head>
<body>
  <h1>簡単なゲーム</h1>
  <div id="score">スコア: 0</div>
  <div id="gameArea">
    <div id="target"></div>
  </div>

function updateScore() {
      var scoreElement = document.getElementById("score");
      scoreElement.textContent = "スコア: " + score;
    }

function moveTarget() {
      var gameArea = document.getElementById("gameArea");
      var target = document.getElementById("target");

var maxX = gameArea.offsetWidth - target.offsetWidth;
      var maxY = gameArea.offsetHeight - target.offsetHeight;

var randomX = Math.floor(Math.random() * maxX);
      var randomY = Math.floor(Math.random() * maxY);

target.style.top = randomY + "px";
      target.style.left = randomX + "px";
    }

function increaseScore() {
      score++;
      updateScore();
    }

var target = document.getElementById("target");
    target.addEventListener("click", function() {
      increaseScore();
      moveTarget();
    });

moveTarget();
  </script>
</body>
</html>
```