AI game creator

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

No:7347

1481

←

Prev Next

→

Electric Kickboard
Developer User3788｜Date and time 23/7/6 23:44:04
Build time 23.554 sec｜Game capacity 3.431KB｜

Script

は電動キックボードゲームとして遊べるように実装します。

このプログラムでは、キーボードの矢印キーで電動キックボードを操作することができます。キーボードの状態に応じてキックボードが動き、キャンバス上にキックボードの画像が描画されます。キックボードの画像は、適切な場所にキックボードの絵のファイル名を指定してください。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

は電動キックボードゲームとして遊べるように実装します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>電動キックボードゲーム</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

// 電動キックボードの初期位置と速度
        var x = canvas.width / 2;
        var y = canvas.height / 2;
        var vx = 0;
        var vy = 0;

// キーボードの状態
        var leftPressed = false;
        var rightPressed = false;
        var upPressed = false;
        var downPressed = false;

// キーボードのイベントリスナー
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);

// キーボードが押された時の処理
        function keyDownHandler(event) {
            if (event.key === "Left" || event.key === "ArrowLeft") {
                leftPressed = true;
            }
            else if (event.key === "Right" || event.key === "ArrowRight") {
                rightPressed = true;
            }
            else if (event.key === "Up" || event.key === "ArrowUp") {
                upPressed = true;
            }
            else if (event.key === "Down" || event.key === "ArrowDown") {
                downPressed = true;
            }
        }

// キーボードが離された時の処理
        function keyUpHandler(event) {
            if (event.key === "Left" || event.key === "ArrowLeft") {
                leftPressed = false;
            }
            else if (event.key === "Right" || event.key === "ArrowRight") {
                rightPressed = false;
            }
            else if (event.key === "Up" || event.key === "ArrowUp") {
                upPressed = false;
            }
            else if (event.key === "Down" || event.key === "ArrowDown") {
                downPressed = false;
            }
        }

// ゲームループ
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// 動かす処理
            if (leftPressed) {
                vx = -5;
            }
            else if (rightPressed) {
                vx = 5;
            }
            else {
                vx = 0;
            }
            
            if (upPressed) {
                vy = -5;
            }
            else if (downPressed) {
                vy = 5;
            }
            else {
                vy = 0;
            }

x += vx;
            y += vy;

// 画像描画
            var image = new Image();
            image.src = "キックボードの絵.png";
            ctx.drawImage(image, x, y, 50, 50);

// ループ処理
            requestAnimationFrame(draw);
        }

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