AI game creator

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

No:7064

1649

←

Prev Next

→

excite bike
Developer User3840｜Date and time 23/7/5 1:34:51
Build time 26.474 sec｜Game capacity 4.587KB｜

Script

了解しました。以下にエキサイトバイクというゲームの実装例を示します。

このゲームでは、プレイヤーがバイクを操作して画面内を移動し、黒いボーダーラインと衝突しないようにします。ボーダーラインに衝突するたびにスコアが加算されます。バイクの操作は、スマホのタッチイベントによって行います。

←

Prev　Next

→ 　

Back　

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

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="600" height="400"></canvas>
    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

// プレイヤーの情報
        const player = {
            x: 50,
            y: canvas.height / 2,
            width: 20,
            height: 20,
            speed: 5,
            color: "red"
        };

// ボーダーラインの情報
        const borderLine = {
            x: canvas.width,
            y: 0,
            width: 10,
            height: canvas.height,
            speed: 3,
            color: "black"
        };

let score = 0;

// スマホのタッチイベントを取得
        let touchStartX = null;
        let touchStartY = null;
        let touchEndX = null;
        let touchEndY = null;
        document.addEventListener("touchstart", handleTouchStart, false);
        document.addEventListener("touchmove", handleTouchMove, false);
        document.addEventListener("touchend", handleTouchEnd, false);

function handleTouchStart(e) {
            touchStartX = e.touches[0].clientX;
            touchStartY = e.touches[0].clientY;
        }

function handleTouchMove(e) {
            e.preventDefault();
            touchEndX = e.touches[0].clientX;
            touchEndY = e.touches[0].clientY;
        }

function handleTouchEnd() {
            const distX = touchEndX - touchStartX;
            const distY = touchEndY - touchStartY;

if (Math.abs(distX) > Math.abs(distY)) {
                if (distX > 0) {
                    player.x += player.speed;
                } else {
                    player.x -= player.speed;
                }
            } else {
                if (distY > 0) {
                    player.y += player.speed;
                } else {
                    player.y -= player.speed;
                }
            }

touchStartX = null;
            touchStartY = null;
            touchEndX = null;
            touchEndY = null;
        }

function drawPlayer() {
            ctx.fillStyle = player.color;
            ctx.fillRect(player.x, player.y, player.width, player.height);
        }

function drawBorderLine() {
            ctx.fillStyle = borderLine.color;
            ctx.fillRect(borderLine.x, borderLine.y, borderLine.width, borderLine.height);
        }

function drawScore() {
            ctx.font = "16px Arial";
            ctx.fillStyle = "black";
            ctx.fillText("Score: " + score, 8, 20);
        }

function isPlayerColliding() {
            if (player.x < 0 || player.x + player.width > canvas.width ||
                player.y < 0 || player.y + player.height > canvas.height) {
                return true;
            }
            return false;
        }

function isCollisionDetected(rect1, rect2) {
            if (rect1.x < rect2.x + rect2.width &&
                rect1.x + rect1.width > rect2.x &&
                rect1.y < rect2.y + rect2.height &&
                rect1.y + rect1.height > rect2.y) {
                return true;
            }
            return false;
        }

function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawPlayer();
            drawBorderLine();
            drawScore();

if (isPlayerColliding()) {
                alert("ゲームオーバー！ スコア: " + score);
                document.location.reload();
                return;
            }

if (isCollisionDetected(player, borderLine)) {
                score++;
                borderLine.x -= borderLine.speed;
                if (borderLine.x + borderLine.width <= 0) {
                    borderLine.x = canvas.width;
                    borderLine.height = Math.random() * (canvas.height / 2);
                    borderLine.speed += 0.5;
                }
            }

requestAnimationFrame(update);
        }

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