AI game creator

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

No:17709

←

Prev Next

→

Megaman
Developer User7774｜Date and time 23/9/24 10:14:22
Build time 17.236 sec｜Game capacity 3.06KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<html>
<head>
    <style>
        body {
            text-align: center;
            font-family: 'Arial', sans-serif;
            margin-top: 100px;
        }
        
        #game {
            width: 400px;
            height: 300px;
            border: 2px solid black;
            position: relative;
            margin: 0 auto;
            overflow: hidden;
        }
        
        #player {
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        
        #enemy {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="game">
        <div id="player"></div>
        <div id="enemy"></div>
    </div>
    
    <script>
        document.addEventListener("DOMContentLoaded", function(event) {
            var player = document.getElementById("player");
            var enemy = document.getElementById("enemy");
            var game = document.getElementById("game");
            
            var playerSpeed = 10;
            var enemySpeed = 5;
            
            function movePlayer(event) {
                var key = event.keyCode;
                
                if (key === 37) { // left arrow
                    var newX = Math.max(0, player.offsetLeft - playerSpeed);
                    player.style.left = newX + "px";
                } else if (key === 39) { // right arrow
                    var newX = Math.min(game.offsetWidth - player.offsetWidth, player.offsetLeft + playerSpeed);
                    player.style.left = newX + "px";
                }
            }
            
            function moveEnemy() {
                var newY = enemy.offsetTop + enemySpeed;
                enemy.style.top = newY + "px";
                
                if (newY + enemy.offsetHeight >= game.offsetHeight) {
                    alert("Game Over!");
                    clearInterval(gameInterval);
                }
                
                if (detectCollision()) {
                    enemy.style.backgroundColor = "green";
                    setTimeout(function() {
                        enemy.style.backgroundColor = "red";
                    }, 200);
                }
            }
            
            function detectCollision() {
                var playerRect = player.getBoundingClientRect();
                var enemyRect = enemy.getBoundingClientRect();
                
                return !(playerRect.right < enemyRect.left || 
                         playerRect.left > enemyRect.right || 
                         playerRect.bottom < enemyRect.top || 
                         playerRect.top > enemyRect.bottom);
            }
            
            document.addEventListener("keydown", movePlayer);
            
            var gameInterval = setInterval(moveEnemy, 50);
        });
    </script>
</body>
</html>