AI game creator

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

No:4425

4429

←

Prev Next

→

Superhero Olympics
Developer User3727｜Date and time 23/6/28 0:19:11
Build time 36.656 sec｜Game capacity 3.877KB｜

Script

を作ってみました。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

を作ってみました。

<!DOCTYPE html>
<html>

<head>
    <title>超人オリンピック</title>
    <meta charset="utf-8">
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>

// プレイヤーの初期位置
        let playerX = 20;
        let playerY = canvas.height / 2;

// プレイヤーがジャンプ中かどうかのフラグ
        let playerJump = false;

// プレイヤーのジャンプ高さ
        let playerJumpHeight = 150;

// 障害物の初期位置
        let obstacleX = canvas.width - 100;
        let obstacleY = canvas.height / 2;
        let obstacleSpeed = 10;

// スコア
        let score = 0;

// プレイヤーの画像を読み込む
        const playerImg = new Image();
        playerImg.src = "https://image.flaticon.com/icons/svg/262/262795.svg";

// 障害物の画像を読み込む
        const obstacleImg = new Image();
        obstacleImg.src = "https://image.flaticon.com/icons/svg/262/262758.svg";

// キーボードの入力を取得する
        document.addEventListener("keydown", event => {
            if (event.key === "ArrowUp" && !playerJump) {
                playerJump = true;
            }
        });

function jump() {
            // プレイヤーがジャンプ中なら上に動かす
            if (playerJump) {
                playerY -= 10;

// 一定の高さまで上がったら降り始める
                if (playerY <= canvas.height / 2 - playerJumpHeight) {
                    playerJump = false;
                }
            } else {
                // 降りている状態で床より下にいる場合は元の位置に戻す
                if (playerY < canvas.height / 2) {
                    playerY += 10;
                }
            }
        }

function moveObstacle() {
            // 障害物を左に移動する
            obstacleX -= obstacleSpeed;

// 障害物が左端まで到達したら再配置する
            if (obstacleX < -100) {
                obstacleX = canvas.width - 100;
                obstacleY = Math.floor(Math.random() * (canvas.height - 200)) + 100;
                score++;
            }
        }

function draw() {
            // 背景を描画する
            ctx.fillStyle = "#87CEFA";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

// 障害物を描画する
            ctx.drawImage(obstacleImg, obstacleX, obstacleY, 50, 50);

// プレイヤーを描画する
            ctx.drawImage(playerImg, playerX, playerY, 50, 50);

// スコアを表示する
            ctx.fillStyle = "black";
            ctx.font = "30px Arial";
            ctx.fillText(`Score: ${score}`, 10, 50);

// プレイヤーのジャンプを処理する
            jump();

// 障害物を移動する
            moveObstacle();

// 衝突判定を行う
            detectCollision();
        }

const intervalId = setInterval(draw, 16);
    </script>

</body>

</html>