Running game with obstacles to the end's game

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
Running game with obstacles to the end's game | AI game creator

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

No:6162

1661

←

Prev Next

→

Running game with obstacles to the end
Developer User3863｜Date and time 23/7/1 18:12:23
Build time 32.513 sec｜Game capacity 4.268KB｜

Script

Here's an example of a simple game implemented as a single HTML file using JavaScript. The game involves a player navigating through obstacles to reach the end goal. Please note that pictograms are not used in this example, but you can modify and enhance it as per your requirement.

In this game, the player (represented by a blue square) can be moved using the arrow keys on a smartphone. The obstacles (red squares) are randomly placed on the screen, and the goal (green square) is located at the bottom right corner. The game checks for collision when the player touches any of the obstacles and detects when the player reaches the goal. The collision and goal events can be further customized based on your specific game logic.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Obstacle Game</title>
    <style>
        #player {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background-color: blue;
        }

.obstacle {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
        }

#end-goal {
            position: absolute;
            bottom: 10px;
            right: 10px;
            width: 50px;
            height: 50px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="player"></div>
    <div id="end-goal"></div>
    <div class="obstacle" style="top: 150px; left: 250px;"></div>
    <div class="obstacle" style="top: 300px; left: 500px;"></div>
    <div class="obstacle" style="top: 450px; left: 750px;"></div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const player = document.getElementById("player");
            const obstacles = document.getElementsByClassName("obstacle");
            const endGoal = document.getElementById("end-goal");

let playerX = 0;
            let playerY = 0;

function checkGoalReached() {
                const endGoalRect = endGoal.getBoundingClientRect();
                const playerRect = player.getBoundingClientRect();
                if (
                    playerRect.left < endGoalRect.right &&
                    playerRect.right > endGoalRect.left &&
                    playerRect.top < endGoalRect.bottom &&
                    playerRect.bottom > endGoalRect.top
                ) {
                    // Goal reached, handle it accordingly
                    console.log("Goal reached!");
                }
            }

document.addEventListener("keydown", handleKeyPress);
        });
    </script>
</body>
</html>
```