3Dで描かれるリアルなカーレース's game

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

No:39465

←

Prev Next

→

3Dで描かれるリアルなカーレース
Developer User17654｜Date and time 24/1/28 14:35:32
Build time 11.44 sec｜Game capacity 2.701KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>3Dカーレース</title>
    <style>
        canvas {
            background-color: black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

// 車の初期位置とサイズ
        var carX = canvas.width / 2 - 25;
        var carY = canvas.height - 100;
        var carWidth = 50;
        var carHeight = 100;

// 動作状態の初期化
        var rightPressed = false;
        var leftPressed = false;
        var upPressed = false;
        var downPressed = false;

// 車の画像
        var carImage = new Image();
        carImage.src = "car.png";

// スマホ操作用のイベントリスナーの登録
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);

// キープレス時の処理
        function keyDownHandler(e) {
            if (e.keyCode == 39) {
                rightPressed = true;
            } else if (e.keyCode == 37) {
                leftPressed = true;
            } else if (e.keyCode == 38) {
                upPressed = true;
            } else if (e.keyCode == 40) {
                downPressed = true;
            }
        }

// キーリリース時の処理
        function keyUpHandler(e) {
            if (e.keyCode == 39) {
                rightPressed = false;
            } else if (e.keyCode == 37) {
                leftPressed = false;
            } else if (e.keyCode == 38) {
                upPressed = false;
            } else if (e.keyCode == 40) {
                downPressed = false;
            }
        }

// 車の描画
        function drawCar() {
            ctx.drawImage(carImage, carX, carY, carWidth, carHeight);
        }

// ゲームループ
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // 画面をクリア

if (rightPressed && carX < canvas.width - carWidth) {
                carX += 5; // 右に移動
            } else if (leftPressed && carX > 0) {
                carX -= 5; // 左に移動
            } else if (upPressed && carY > 0) {
                carY -= 5; // 上に移動
            } else if (downPressed && carY < canvas.height - carHeight) {
                carY += 5; // 下に移動
            }

drawCar();

requestAnimationFrame(draw); // 次のフレーム描画を予約
        }

draw(); // ゲームループを開始
    </script>
</body>
</html>