Rainbow-colored spider web's game

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

No:5472

993

←

Prev Next

→

Rainbow-colored spider web
Developer User3788｜Date and time 23/6/30 4:22:29
Build time 26.951 sec｜Game capacity 2.861KB｜

Script

了解しました。以下は、スマホで遊べる簡単なゲームの例です。

このゲームは、虹色の円が画面内を移動し続けるものです。画面をタッチすると、移動速度が速くなります。円が四方に移動すると、反対の端から再び現れます。円の色はランダムに変化します。このHTMLファイルをブラウザで開くと、ゲームが実行されます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下は、スマホで遊べる簡単なゲームの例です。

```html
<!DOCTYPE html>
<html>
<head>
    <title>虹色クモの巣</title>
    <style>
        body {
            background-color: lavender;
            font-family: Arial, sans-serif;
        }
        
        canvas {
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

let posX = 200;
        let posY = 200;
        let speed = 5;

// タッチ操作の検出
        canvas.addEventListener("touchstart", handleTouchStart, false);
        canvas.addEventListener("touchend", handleTouchEnd, false);

let isTouched = false;

function handleTouchStart(event) {
            event.preventDefault();
            isTouched = true;
        }

function handleTouchEnd(event) {
            event.preventDefault();
            isTouched = false;
        }

// ゲームのメインループ
        function gameLoop() {
            if (isTouched) {
                speed = 10;
            } else {
                speed = 5;
            }

update();
            draw();

requestAnimationFrame(gameLoop);
        }

// ゲームの状態の更新
        function update() {
            if (posX < 0) {
                posX = canvas.width;
            }

if (posX > canvas.width) {
                posX = 0;
            }

if (posY < 0) {
                posY = canvas.height;
            }

if (posY > canvas.height) {
                posY = 0;
            }
        }

// 画面の描画
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();
            ctx.arc(posX, posY, 20, 0, 2 * Math.PI);
            ctx.fillStyle = rainbowColor();
            ctx.fill();
        }

// ランダムな虹色の色を返す
        function rainbowColor() {
            const colors = ['#ff0000', '#ff7f00', '#ffff00', '#00ff00', '#0000ff', '#4b0082', '#8f00ff'];
            const randomIndex = Math.floor(Math.random() * colors.length);
            return colors[randomIndex];
        }

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

このゲームは、虹色の円が画面内を移動し続けるものです。画面をタッチすると、移動速度が速くなります。円が四方に移動すると、反対の端から再び現れます。円の色はランダムに変化します。

このHTMLファイルをブラウザで開くと、ゲームが実行されます。