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

No:5213

3796

←

Prev Next

→

Manliness!
Developer User3812｜Date and time 23/6/29 20:19:04
Build time 23.88 sec｜Game capacity 2.281KB｜

Script

了解です！「おっくせんまん」というゲームを作ってみましょう！以下が実装例です。

おっくせんまん

このゲームでは、黄色い丸（円）が画面内を移動し、その円をスマホのタッチ操作で追いかけるゲームです。円をタッチするとスコアが加算され、新しい位置に円が表示されます。円以外の場所をタッチするとゲームオーバーとなり、スコアが表示されます。また、必ずしも絵文字を使う必要はありませんが、必要であれば絵文字を組み合わせてゲームの要素を追加することも可能です。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

了解です！「おっくせんまん」というゲームを作ってみましょう！以下が実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>おっくせんまん</title>
</head>
<body>
  <h1>おっくせんまん</h1>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    // ゲームの初期化処理
    function init() {
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');

let circleX = canvas.width / 2;
      let circleY = canvas.height / 2;
      let circleRadius = 20;
      let score = 0;

function drawCircle() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.arc(circleX, circleY, circleRadius, 0, 2 * Math.PI);
        ctx.fillStyle = 'yellow';
        ctx.fill();
        ctx.closePath();
      }

function handleTouchMove(event) {
        const touches = event.changedTouches;
        if (touches && touches.length > 0) {
          const touchX = touches[0].clientX - canvas.offsetLeft;
          const touchY = touches[0].clientY - canvas.offsetTop;

if (Math.abs(touchX - circleX) <= circleRadius && Math.abs(touchY - circleY) <= circleRadius) {
            score++;
            circleX = Math.random() * (canvas.width - 2 * circleRadius) + circleRadius;
            circleY = Math.random() * (canvas.height - 2 * circleRadius) + circleRadius;
            drawCircle();
          } else {
            alert('Game Over\nScore: ' + score);
            location.reload();
          }
        }
      }

canvas.addEventListener('touchmove', handleTouchMove, false);
      drawCircle();
    }

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

このゲームでは、黄色い丸（円）が画面内を移動し、その円をスマホのタッチ操作で追いかけるゲームです。円をタッチするとスコアが加算され、新しい位置に円が表示されます。円以外の場所をタッチするとゲームオーバーとなり、スコアが表示されます。

また、必ずしも絵文字を使う必要はありませんが、必要であれば絵文字を組み合わせてゲームの要素を追加することも可能です。