ジャンプで避けろ！アクションゲーム

        
        



CSS

    #jump-action-game .game-container {
        text-align: center;
        background: linear-gradient(to bottom right, #ffcccb, #ffe4b5);
        padding: 2em;
        border-radius: 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        /* max-width: 600px; */
        margin: auto;
        font-family: 'Arial', sans-serif;
    }

    #jump-action-game canvas {
        background-color: #f0f0f0;
        border: 2px solid #333;
        display: block;
        margin: 20px auto;
        width: 100%;
        height: 100%;
    }

    #jump-action-game button {
        padding: 1em 2em;
        font-size: 1em;
        margin: 1em 0.5em;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        background-color: #00bfff;
        color: white;
        transition: transform 0.1s ease;
    }

    #jump-action-game button:active {
        transform: scale(0.95);
    }




JS

    document.addEventListener('DOMContentLoaded', function() {
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const startPauseBtn = document.getElementById('startPauseBtn');
        const scoreDisplay = document.getElementById('score');
        const timeDisplay = document.getElementById('time');
        let gameInterval, timeInterval;
        let playerY = 250,
            playerDy = 0,
            gravity = 0.8,
            jumpStrength = -12;
        let obstacles = [];
        let score = 0,
            time = 30;
        let isGameRunning = false,
            isPaused = false;
        let playerImage = new Image();

        // キャラクター画像のURL
        playerImage.src = '/wp-content/themes/jinr-child/game/game01/char.png'; // ここにキャラクター画像のURLを入力

        // 画像の読み込み完了後にゲーム開始
        playerImage.onload = function() {
            // プレイヤーキャラクター
            const player = {
                x: 50,
                width: 50,
                height: 50,
                image: playerImage
            };

            // 画面のサイズ設定
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            // ゲーム開始
            function startGame() {
                score = 0;
                time = 30;
                obstacles = [];
                playerY = 250;
                playerDy = 0;
                isGameRunning = true;
                isPaused = false;
                scoreDisplay.textContent = score;
                timeDisplay.textContent = time;

                startPauseBtn.textContent = 'ポーズ';
                gameInterval = setInterval(gameLoop, 1000 / 60); // 60FPS
                timeInterval = setInterval(() => {
                    time--;
                    timeDisplay.textContent = time;
                    if (time <= 0) {
                        clearInterval(gameInterval);
                        clearInterval(timeInterval);
                        endGame();
                    }
                }, 1000);

                // ページスクロール無効化
                window.addEventListener('wheel', preventScroll, {
                    passive: false
                });
                window.addEventListener('keydown', preventScroll, {
                    passive: false
                });
            }

            // ポーズ
            function pauseGame() {
                clearInterval(gameInterval);
                clearInterval(timeInterval);
                isPaused = true;
                startPauseBtn.textContent = '再開';
            }

            // 再開
            function resumeGame() {
                isPaused = false;
                startPauseBtn.textContent = 'ポーズ';
                gameInterval = setInterval(gameLoop, 1000 / 60); // 60FPS
                timeInterval = setInterval(() => {
                    time--;
                    timeDisplay.textContent = time;
                    if (time <= 0) {
                        clearInterval(gameInterval);
                        clearInterval(timeInterval);
                        endGame();
                    }
                }, 1000);
            }

            // ゲームループ
            function gameLoop() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                drawPlayer();
                movePlayer();
                createObstacles();
                moveObstacles();
                checkCollisions();
            }

            // プレイヤーの描画
            function drawPlayer() {
                ctx.drawImage(player.image, player.x, playerY, player.width, player.height);
            }

            // プレイヤーの移動
            function movePlayer() {
                playerY += playerDy;
                if (playerY + player.height > canvas.height) {
                    playerY = canvas.height - player.height;
                    playerDy = 0;
                } else {
                    playerDy += gravity;
                }
            }

            // ジャンプ
            function jump() {
                if (playerY + player.height === canvas.height) {
                    playerDy = jumpStrength;
                }
            }

            // 障害物の生成
            function createObstacles() {
                if (Math.random() < 0.012) { // 生成率
                    let obstacleX = canvas.width;
                    obstacles.push({
                        x: obstacleX,
                        y: canvas.height - 30,
                        width: 20,
                        height: 30
                    });
                }
            }

            // 障害物の移動
            function moveObstacles() {
                for (let i = 0; i < obstacles.length; i++) {
                    obstacles[i].x -= 5;
                    ctx.fillStyle = 'red';
                    ctx.fillRect(obstacles[i].x, obstacles[i].y, obstacles[i].width, obstacles[i].height);
                    if (obstacles[i].x + obstacles[i].width <= 0) {
                        obstacles.splice(i, 1);
                        score++;
                        scoreDisplay.textContent = score;
                    }
                }
            }

            // 衝突判定
            function checkCollisions() {
                for (let i = 0; i < obstacles.length; i++) {
                    if (
                        player.x + player.width > obstacles[i].x &&
                        player.x < obstacles[i].x + obstacles[i].width &&
                        playerY + player.height > obstacles[i].y
                    ) {
                        clearInterval(gameInterval);
                        clearInterval(timeInterval);
                        endGame();
                    }
                }
            }

            // ゲーム終了
            function endGame() {
                isGameRunning = false;
                startPauseBtn.textContent = '再スタート';
                window.removeEventListener('wheel', preventScroll);
                window.removeEventListener('keydown', preventScroll);
                alert(`ゲームオーバー！ あなたのスコアは ${score} 点でした。`);
            }

            // ページスクロール無効化
            function preventScroll(e) {
                e.preventDefault();
            }

            // スタートとポーズ切り替えボタンのイベント
            startPauseBtn.addEventListener('click', function() {
                if (!isGameRunning) {
                    startGame();
                } else if (isPaused) {
                    resumeGame();
                } else {
                    pauseGame();
                }
            });

            // ジャンプ操作
            window.addEventListener('keydown', function(e) {
                if (e.key === ' ' && isGameRunning) { // スペースキーでジャンプ
                    jump();
                }
            });
        };

        // 画像が読み込めなかった場合のエラーハンドリング
        playerImage.onerror = function() {
            alert('画像が読み込めませんでした。画像のURLを確認してください。');
        };
    });