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

No:7998

3222

←

Prev Next

→

Moon
Developer User4077｜Date and time 23/7/11 18:56:52
Build time 17.837 sec｜Game capacity 2.438KB｜

Script

以下はHTMLファイル内にJavaScriptを含むMoonというゲームの実装です。

Moon Game

このゲームでは、ユーザーはタッチ操作によってムーンの水平移動を制御します。ムーンは画面内を移動し、上部の壁にぶつかると跳ね返ります。しかし、画面下の壁にぶつかると、タッチ操作時の座標によってゲームオーバーになるかどうかが決まります。タッチ操作時の座標とムーンの座標が一致すると、ムーンは跳ね返ります。

←

Prev　Next

→ 　

Back　

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

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

以下はHTMLファイル内にJavaScriptを含むMoonというゲームの実装です。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Moon Game</title>
</head>
<body>
    <h1>Moon Game</h1>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

// ムーンの初期座標
        let moonX = canvas.width / 2;
        let moonY = canvas.height - 30;

// ムーンの移動速度
        let moonDX = 2;
        let moonDY = -2;

// タッチ操作の初期座標
        let touchX = moonX;

// タッチ操作時の処理
        document.addEventListener("touchmove", touchMoveHandler, false);

function touchMoveHandler(e) {
            touchX = e.touches[0].clientX - canvas.offsetLeft;
        }

// ムーンを描画する関数
        function drawMoon() {
            ctx.beginPath();
            ctx.arc(moonX, moonY, 10, 0, Math.PI*2);
            ctx.fillStyle = "#yellow";
            ctx.fill();
            ctx.closePath();
        }

// ゲームのメイン処理
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

drawMoon();

if(moonX + moonDX > canvas.width - 10 || moonX + moonDX < 10) {
                moonDX = -moonDX;
            }

if(moonY + moonDY < 10) {
                moonDY = -moonDY;
            } else if(moonY + moonDY > canvas.height - 10) {
                if(moonX > touchX - 10 && moonX < touchX + 10) {
                    moonDY = -moonDY;
                } else {
                    alert("Game Over");
                    document.location.reload();
                }
            }

moonX += moonDX;
            moonY += moonDY;

requestAnimationFrame(draw);
        }

draw();

</script>
</body>
</html>
```