AI game creator

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

No:6514

1348

←

Prev Next

→

javelin (throw)
Developer User3891｜Date and time 23/7/2 16:11:51
Build time 19.672 sec｜Game capacity 1.983KB｜

Script

以下は、JavaScriptを使用して作成したシンプルなヤリ投げゲームの例です。このゲームでは、スマートフォンの画面上でヤリを投げる操作をシミュレートします。

このコードをHTMLファイルとして保存し、ブラウザで開くと、スマートフォンの画面上に黒い点（ヤリ）が表示されます。また、画面をタップおよびスワイプすることで、ヤリを投げる操作を模擬することができます。ヤリは画面上部に向かって移動し、再度投げることも可能です。この例では、JavaScriptのCanvas APIを使用して描画を行い、タッチイベントを取得して操作を反映させています。ゲームとしての要素は非常にシンプルですが、JavaScriptを使って実装されていることや、操作が可能であることなど、要件を満たすようになっています。

←

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>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="600"></canvas>

let spearX = 200;
    let spearY = 500;
    let spearSpeed = 5;

function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      ctx.beginPath();
      ctx.arc(spearX, spearY, 10, 0, Math.PI*2);
      ctx.fillStyle = "black";
      ctx.fill();
      ctx.closePath();
      
      spearY -= spearSpeed;

requestAnimationFrame(draw);
    }

function handleTouchEvent(event) {
      const touch = event.touches[0];
      spearX = touch.clientX;
    }

canvas.addEventListener("touchstart", handleTouchEvent, false);
    canvas.addEventListener("touchmove", handleTouchEvent, false);

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

このコードをHTMLファイルとして保存し、ブラウザで開くと、スマートフォンの画面上に黒い点（ヤリ）が表示されます。また、画面をタップおよびスワイプすることで、ヤリを投げる操作を模擬することができます。ヤリは画面上部に向かって移動し、再度投げることも可能です。

この例では、JavaScriptのCanvas APIを使用して描画を行い、タッチイベントを取得して操作を反映させています。ゲームとしての要素は非常にシンプルですが、JavaScriptを使って実装されていることや、操作が可能であることなど、要件を満たすようになっています。