First Cosmic Velocity's game

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

No:7346

1841

←

Prev Next

→

First Cosmic Velocity
Developer User4009｜Date and time 23/7/6 23:37:10
Build time 14.513 sec｜Game capacity 1.835KB｜

Script

了解です。以下が1枚のhtmlファイルとして実装された、簡単なJavaScriptゲームの例です。

このゲームでは、プレイヤーが宇宙船をスマホのタッチ操作で動かすことができます。宇宙船はcanvas要素上に表示され、タッチされた位置に追従します。ゲームループ内で宇宙船を描画するために、requestAnimationFrame関数を使用しています。詳細なゲームのルールやゴールはありませんが、これを拡張して様々な要素やゲームルールを追加することができます。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下が1枚のhtmlファイルとして実装された、簡単なJavaScriptゲームの例です。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>宇宙ゲーム</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// 宇宙船の初期位置
    let x = canvas.width / 2;
    let y = canvas.height - 30;

// スマホのタッチ操作に対応するための処理
    canvas.addEventListener("touchmove", handleTouchMove, false);

// タッチされた位置に宇宙船を移動する
    function handleTouchMove(event) {
      x = event.touches[0].pageX - canvas.offsetLeft;
      y = event.touches[0].pageY - canvas.offsetTop;
    }

// 宇宙船を描画する関数
    function drawShip() {
      ctx.beginPath();
      ctx.arc(x, y, 10, 0, Math.PI * 2);
      ctx.fillStyle = "blue";
      ctx.fill();
      ctx.closePath();
    }

// ゲームループ
    function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawShip();
      requestAnimationFrame(gameLoop);
    }

// ゲームを開始する
    gameLoop();
  </script>
</body>
</html>
```