Create a game similar to geometry dash, where when you jump, you go up and then back down, avoid spikes throughout the level. If you jump over a spike you get 3 points. If you get 50 points you won!'s game | AI game creator

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

No:43363

52

Create a game similar to geometry dash, where when..ALL
Developer User19162｜Date and time 24/2/15 9:00:35
Build time 16.473 sec｜Game capacity 6.115KB｜

Sure! Here's an example implementation of a simplified game similar to Geometry Dash using JavaScript, HTML, and CSS. Please note that this is a basic version of the game and may require further enhancements to achieve a complete gameplay experience.

Score: 0

To play the game, you can save the above code into a single HTML file (e.g., "geometry-dash-game.html"). Then, open the file in a web browser (preferably on a smartphone) to start the game. The blue circle represents the player, and you can control it by touching the screen or pressing the space key or the up arrow key to jump. The objective is to avoid colliding with the red spikes and try to jump over them to earn points. If you score 50 points, you win the game. The game will end if you collide with a spike. Please note that this is a basic implementation and lacks some features of the full-fledged Geometry Dash game. It's a starting point that can be expanded and enhanced further according to your requirements and design preferences.

→ 　

0　

0　

　

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

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

(C)2023 HisashiApp

Sure! Here's an example implementation of a simplified game similar to Geometry Dash using JavaScript, HTML, and CSS. Please note that this is a basic version of the game and may require further enhancements to achieve a complete gameplay experience.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Geometry Dash-like Game</title>
    <style>
            height: 400px;
            border: 1px solid black;
        }
        /* Styling for player character */
        #player {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: blue;
            border-radius: 50%;
            bottom: 0;
            transition: bottom 0.2s ease-in-out;
        }
        /* Styling for spike obstacles */
        .spike {
            position: absolute;
            width: 20px;
            height: 100px;
            background-color: red;
            bottom: 0;
        }
        /* Styling for score display */
        #score {
            font-size: 24px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="gameCanvas">
        <div id="player"></div>
        <div id="score">Score: 0</div>
    </div>

<script>
        document.addEventListener("DOMContentLoaded", function() {
            // Game parameters
            var gameSpeed = 4; // Speed at which obstacles move
            var jumpHeight = 200; // Vertical jump distance
            var spikeGap = 200; // Gap between spikes

// Game variables
            var score = 0;
            var gameInProgress = true;

// Function to handle player jump
            function jump() {
                if (gameInProgress) {
                    var player = document.getElementById("player");
                    player.style.bottom = jumpHeight + "px";
                    setTimeout(function() {
                        player.style.bottom = "0";
                    }, 300);
                }
            }

// Function to check collision between player and spikes
            function checkCollision() {
                var player = document.getElementById("player");
                var spikes = document.getElementsByClassName("spike");
                var playerBottom = player.getBoundingClientRect().bottom;
                var playerLeft = player.getBoundingClientRect().left;
                var playerRight = player.getBoundingClientRect().right;

for (var i = 0; i < spikes.length; i++) {
                    var spikeBottom = spikes[i].getBoundingClientRect().bottom;
                    var spikeLeft = spikes[i].getBoundingClientRect().left;
                    var spikeRight = spikes[i].getBoundingClientRect().right;

if (playerBottom >= spikeBottom && playerLeft < spikeRight && playerRight > spikeLeft) {
                        endGame();
                        break;
                    }

// Increment score if player successfully jumps over a spike
                    if (playerBottom >= spikeBottom + 100 && playerBottom <= spikeBottom + 150 && !spikes[i].passed) {
                        spikes[i].passed = true;
                        score += 3;
                        document.getElementById("score").innerHTML = "Score: " + score;
                    }
                }
            }

// Function to move obstacles (spikes)
            function moveSpikes() {
                var spikes = document.getElementsByClassName("spike");

for (var i = 0; i < spikes.length; i++) {
                    var spikePosition = spikes[i].offsetLeft;
                    spikePosition -= gameSpeed;

// Reset spike position and mark as not passed if it goes off-screen
                    if (spikePosition < -20) {
                        spikePosition = 400;
                        spikes[i].passed = false;
                    }

spikes[i].style.left = spikePosition + "px";
                }

checkCollision();

if (gameInProgress) {
                    requestAnimationFrame(moveSpikes);
                }
            }

// Function to end the game
            function endGame() {
                gameInProgress = false;
                alert("Game Over. Final Score: " + score);
            }

// Event listener for touch/keydown to trigger jump
            document.addEventListener("touchstart", jump);
            document.addEventListener("keydown", function(event) {
                if (event.key === " " || event.key === "ArrowUp") {
                    jump();
                }
            });

// Initial spike generation
            for (var i = 0; i < 10; i++) {
                var spikePosition = 400 + i * spikeGap;
                var newSpike = document.createElement("div");
                newSpike.className = "spike";
                newSpike.style.left = spikePosition + "px";
                document.getElementById("gameCanvas").appendChild(newSpike);
            }

// Start the game loop by moving the spikes
            moveSpikes();
        });
    </script>
</body>
</html>
```

To play the game, you can save the above code into a single HTML file (e.g., "geometry-dash-game.html"). Then, open the file in a web browser (preferably on a smartphone) to start the game. The blue circle represents the player, and you can control it by touching the screen or pressing the space key or the up arrow key to jump. The objective is to avoid colliding with the red spikes and try to jump over them to earn points. If you score 50 points, you win the game. The game will end if you collide with a spike.

Please note that this is a basic implementation and lacks some features of the full-fledged Geometry Dash game. It's a starting point that can be expanded and enhanced further according to your requirements and design preferences.