Crie um jogo onde se você clica na tela vai aperaça um quadrado azul e vermelho e quando eles se tocam e gerado um verde e os quadrados ficam andando pela na tela's game

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

No:35977

←

Prev Next

→

Crie um jogo onde se você clica na tela vai aperaç..ALL
Developer User16419｜Date and time 24/1/16 5:41:50
Build time 9.791 sec｜Game capacity 2.95KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Jogo dos Quadrados</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        #gameContainer {
            position: relative;
            height: 100%;
        }
        
        .square {
            position: absolute;
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div id="gameContainer"></div>

return square;
        }

function generateRandomPosition(maxX, maxY) {
            const x = Math.floor(Math.random() * maxX);
            const y = Math.floor(Math.random() * maxY);

return { x, y };
        }

function checkCollision(square1, square2) {
            const rect1 = square1.getBoundingClientRect();
            const rect2 = square2.getBoundingClientRect();

return (
                rect1.x < rect2.x + rect2.width &&
                rect1.x + rect1.width > rect2.x &&
                rect1.y < rect2.y + rect2.height &&
                rect1.y + rect1.height > rect2.y
            );
        }

function moveSquare(square, x, y) {
            square.style.top = y + 'px';
            square.style.left = x + 'px';
        }

function gameLoop() {
            if (checkCollision(blueSquare, redSquare)) {
                const greenSquare = createSquare('green');
                const { x, y } = generateRandomPosition(screenWidth, screenHeight);
                moveSquare(greenSquare, x, y);

gameContainer.appendChild(greenSquare);
                greenSquareArray.push(greenSquare);
            }

for (const square of greenSquareArray) {
                const { x, y } = generateRandomPosition(screenWidth, screenHeight);
                moveSquare(square, x, y);
            }

requestAnimationFrame(gameLoop);
        }

// Iniciando o jogo
        const screenWidth = window.innerWidth;
        const screenHeight = window.innerHeight;
        const gameContainer = document.getElementById('gameContainer');

const blueSquare = createSquare('blue');
        const redSquare = createSquare('red');

// Definindo as posições iniciais
        const { x: blueX, y: blueY } = generateRandomPosition(screenWidth, screenHeight);
        const { x: redX, y: redY } = generateRandomPosition(screenWidth, screenHeight);

// Movendo os quadrados
        moveSquare(blueSquare, blueX, blueY);
        moveSquare(redSquare, redX, redY);

gameContainer.appendChild(blueSquare);
        gameContainer.appendChild(redSquare);

const greenSquareArray = [];

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