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

No:26405

←

Prev Next

→

A Sonic game
Developer User13089｜Date and time 23/11/30 8:29:31
Build time 61.289 sec｜Game capacity 2.773KB｜

Script

Sonic Game

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Sonic Game</title>
<style>
    body {
        font-family: 'Arial', sans-serif;
        text-align: center;
    }

#game-container {
        display: inline-block;
        position: relative;
        width: 500px;
        height: 400px;
        border: 2px solid black;
        overflow: hidden;
        margin-top: 20px;
    }

#sonic {
        position: absolute;
        width: 50px;
        height: 50px;
    }

#obstacles {
        position: absolute;
        width: 80px;
        height: 80px;
    }

.score {
        margin-top: 10px;
    }
</style>
</head>
<body>
<h1>Sonic Game</h1>
<div id="game-container">
    <img src="sonic.png" id="sonic">
    <img src="obstacles.png" id="obstacles">
</div>
<p class="score">Score: <span id="score">0</span></p>

// Set initial position of sonic and obstacles
    var sonicPosition = { x: 250, y: 200 };
    var obstaclesPosition = { x: 0, y: 200 };
    sonic.style.left = sonicPosition.x + "px";
    sonic.style.top = sonicPosition.y + "px";

// Function to move sonic based on key press
    window.addEventListener("keydown", function (event) {
        switch (event.key) {
            case "ArrowUp":
                sonicPosition.y -= 10;
                break;
            case "ArrowDown":
                sonicPosition.y += 10;
                break;
            case "ArrowLeft":
                sonicPosition.x -= 10;
                break;
            case "ArrowRight":
                sonicPosition.x += 10;
                break;
        }
        moveSonic();
    });

// Function to move sonic and check for collisions
    function moveSonic() {
        sonic.style.left = sonicPosition.x + "px";
        sonic.style.top = sonicPosition.y + "px";

// Check for collision with obstacles
        if (
            sonicPosition.x < obstaclesPosition.x + obstacles.width &&
            sonicPosition.x + sonic.width > obstaclesPosition.x &&
            sonicPosition.y < obstaclesPosition.y + obstacles.height &&
            sonicPosition.y + sonic.height > obstaclesPosition.y
        ) {
            // Collision occurred, end the game
            gameOver();
        } else {
            // Update score
            score++;
            document.getElementById("score").textContent = score;
        }
    }

// Function to end the game
    function gameOver() {
        gameContainer.innerHTML = "<h2>Game Over</h2><p class='score'>Final Score: " + score + "</p>";
    }
</script>
</body>
</html>