Fais un bonhomme qui court à l'infini puis on doit appuyer sur l'écran pour faire sauter le bonhomme pour éviter des obstacles's game

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

No:35611

←

Prev Next

→

Fais un bonhomme qui court à l'infini puis on doit..ALL
Developer User16596｜Date and time 24/1/15 0:18:18
Build time 8.596 sec｜Game capacity 2.012KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Game: Bonhomme qui court</title>
    <style>
        #bonhomme {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background-image: url('bonhomme.png');
            background-size: cover;
        }

#obstacle {
            position: fixed;
            top: 50%;
            left: 100%;
            transform: translate(0, -50%);
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <script>
        var bonhomme = document.getElementById('bonhomme');
        var obstacle = document.getElementById('obstacle');
        var gameInterval;

function startGame() {
            bonhomme.addEventListener('click', jump);
            gameInterval = setInterval(moveObstacle, 10);
        }

function jump() {
            bonhomme.style.animation = 'jump 0.5s';
            setTimeout(function() {
                bonhomme.style.animation = '';
            }, 500);
        }

function moveObstacle() {
            var bonhommeTop = bonhomme.offsetTop;
            var obstacleLeft = obstacle.offsetLeft;

if (obstacleLeft <= 0) {
                obstacle.style.left = '100%';
            } else {
                obstacle.style.left = obstacleLeft - 3 + 'px';
            }

if (obstacleLeft <= 60 && obstacleLeft >= 0 && bonhommeTop >= 30 && bonhommeTop <= 90) {
                clearInterval(gameInterval);
                alert('Game Over !');
                resetGame();
            }
        }

function resetGame() {
            bonhomme.style.top = '50%';
            obstacle.style.left = '100%';
            startGame();
        }

window.onload = function() {
            startGame();
        };
    </script>
    <div id="bonhomme"></div>
    <div id="obstacle"></div>
</body>
</html>