AI game creator

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

No:49074

←

Prev Next

→

Endless runner
Developer User20920｜Date and time 24/3/3 16:32:35
Build time 7.565 sec｜Game capacity 2.692KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<title>Endless Runner Game</title>
<style>
    #gameArea {
        width: 100%;
        height: 500px;
        background-color: black;
        position: relative;
    }
    
    #player {
        width: 50px;
        height: 50px;
        background-color: red;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .obstacle {
        width: 40px;
        height: 40px;
        background-color: green;
        position: absolute;
        top: -40px;
    }
</style>
</head>
<body>
<div id="gameArea">
    <div id="player"></div>
</div>

function createObstacle() {
        let obstacle = document.createElement('div');
        obstacle.classList.add('obstacle');
        obstacle.style.left = Math.floor(Math.random() * (gameArea.offsetWidth - 40)) + 'px';
        gameArea.appendChild(obstacle);
        obstacles.push(obstacle);
    }

function moveObstacles() {
        obstacles.forEach((obstacle, index) => {
            let obstaclePosition = parseInt(obstacle.style.top);
            obstacle.style.top = obstaclePosition + speed + 'px';

if (obstaclePosition > gameArea.offsetHeight) {
                obstacles.splice(index, 1);
                gameArea.removeChild(obstacle);
            }

if (isColliding(obstacle)) {
                alert('Game Over! Your score was: ' + Math.floor(speed - 1));
                location.reload();
            }
        });
    }

function isColliding(obstacle) {
        let playerRect = player.getBoundingClientRect();
        let obstacleRect = obstacle.getBoundingClientRect();

return !(
            playerRect.top > obstacleRect.bottom ||
            playerRect.right < obstacleRect.left ||
            playerRect.bottom < obstacleRect.top ||
            playerRect.left > obstacleRect.right
        );
    }

document.addEventListener('keydown', function(event) {
        if (event.key === 'ArrowLeft' && parseInt(player.style.left) > 0) {
            player.style.left = parseInt(player.style.left) - 10 + 'px';
        }

if (event.key === 'ArrowRight' && parseInt(player.style.left) < gameArea.offsetWidth - 50) {
            player.style.left = parseInt(player.style.left) + 10 + 'px';
        }
    });

setInterval(() => {
        speed += 0.1;
        moveObstacles();
    }, 10);

setInterval(() => {
        createObstacle();
    }, obstacleInterval);
</script>
</body>
</html>