Make a game where you control a blue square with a joy stick at the bottom of the screen. You have to dodge many red squares that come from all around the screen. If one touches the blue square then the game stops and displays game over with a button that allows you to reset your score and try again's game

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

No:52129

136

←

Prev Next

→

Make a game where you control a blue square with a..ALL
Developer User21762｜Date and time 24/3/18 0:32:27
Build time 11.029 sec｜Game capacity 2.624KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dodge the Squares Game</title>
<style>
    body {
        margin: 0;
        padding: 0;
    }

#gameArea {
        width: 100vw;
        height: 100vh;
        background-color: black;
    }

#joyStick {
        width: 50px;
        height: 50px;
        background-color: blue;
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
    }

.square {
        width: 50px;
        height: 50px;
        background-color: red;
        position: absolute;
    }

</style>
</head>
<body>
<div id="gameArea"></div>
<div id="joyStick"></div>

joyStick.addEventListener('touchmove', (e) => {
    e.preventDefault();
    joyStick.style.left = e.touches[0].clientX + 'px';
});

function createSquare() {
    const square = document.createElement('div');
    square.classList.add('square');
    square.style.top = Math.random() * 100 + 'vh';
    square.style.left = Math.random() * 100 + 'vw';
    gameArea.appendChild(square);

const moveSquare = setInterval(() => {
        if (!isGameOver) {
            const squares = document.querySelectorAll('.square');
            squares.forEach((sq) => {
                sq.style.top = sq.offsetTop + 1 + 'px';

if (sq.offsetTop > window.innerHeight) {
                    sq.remove();
                    score++;
                }

if (checkCollision(joyStick, sq)) {
                    gameOver();
                }
            });
        }
    }, 20);

if (!isGameOver) {
        setTimeout(() => {
            createSquare();
        }, 1000 + Math.random() * 3000);
    } else {
        clearInterval(moveSquare);
    }
}

function checkCollision(joyStick, square) {
    const joyStickRect = joyStick.getBoundingClientRect();
    const squareRect = square.getBoundingClientRect();

return !(
        joyStickRect.top > squareRect.bottom ||
        joyStickRect.right < squareRect.left ||
        joyStickRect.bottom < squareRect.top ||
        joyStickRect.left > squareRect.right
    );
}

function gameOver() {
    isGameOver = true;
    alert('Game Over! Your score: ' + score);
    score = 0;
    gameArea.innerHTML = '';
    isGameOver = false;
}

createSquare();
</script>
</body>
</html>