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 atela's game

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

No:35976

←

Prev Next

→

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

Script

Aqui está um exemplo de um jogo simples em que você clica na tela para criar quadrados azuis e vermelhos. Quando os quadrados se encontram, um quadrado verde é gerado e todos os quadrados começam a mover-se pela tela. O jogo é implementado em um único arquivo HTML, usando JavaScript e pictogramas.

Para jogar o jogo, você pode abrir o arquivo HTML em um navegador web no seu smartphone e, em seguida, tocar na tela para criar os quadrados. Os quadrados vão começar a se mover e, quando colidirem, quadrados verdes serão gerados.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Jogo dos Quadrados</title>
    <style>
        #gameCanvas {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <script>
        // Criando o canvas do jogo
        var canvas = document.createElement("canvas");
        canvas.id = "gameCanvas";
        document.body.appendChild(canvas);

// Configurando o contexto do canvas
        var context = canvas.getContext("2d");

// Armazenando a largura e altura do canvas
        var canvasWidth = canvas.width = window.innerWidth;
        var canvasHeight = canvas.height = window.innerHeight;

// Variáveis para armazenar o estado dos quadrados
        var squares = [];

// Função para criar os quadrados azuis e vermelhos
        function createSquare(x, y, color) {
            return {
                x: x,
                y: y,
                vx: Math.random() * 2 - 1,
                vy: Math.random() * 2 - 1,
                size: 20,
                color: color
            };
        }

// Função para atualizar o estado dos quadrados e checar colisões
        function update() {
            // Limpar o canvas
            context.clearRect(0, 0, canvasWidth, canvasHeight);

// Percorrer cada quadrado
            squares.forEach(function(square) {
                // Atualizar a posição do quadrado
                square.x += square.vx;
                square.y += square.vy;

// Checar colisões com as bordas do canvas
                if (square.x < 0 || square.x + square.size > canvasWidth) {
                    square.vx *= -1; // Inverter a velocidade na direção X
                }
                if (square.y < 0 || square.y + square.size > canvasHeight) {
                    square.vy *= -1; // Inverter a velocidade na direção Y
                }

// Desenhar o quadrado na tela
                context.fillStyle = square.color;
                context.fillRect(square.x, square.y, square.size, square.size);
            });

// Checar colisões entre os quadrados
            for (var i = 0; i < squares.length; i++) {
                for (var j = i + 1; j < squares.length; j++) {
                    if (collides(squares[i], squares[j])) {
                        // Criar um quadrado verde na posição da colisão
                        var greenSquare = createSquare(squares[i].x, squares[i].y, "green");
                        squares.push(greenSquare);
                    }
                }
            }

// Chamar a função update na próxima iteração do frame
            requestAnimationFrame(update);
        }

// Função para checar colisões entre dois quadrados
        function collides(a, b) {
            return a.x < b.x + b.size &&
                   a.x + a.size > b.x &&
                   a.y < b.y + b.size &&
                   a.y + a.size > b.y;
        }

// Função para criar quadrados quando a tela é clicada
        function createSquaresOnClick(event) {
            var x = event.clientX;
            var y = event.clientY;

// Criar um quadrado azul
            var blueSquare = createSquare(x, y, "blue");
            squares.push(blueSquare);

// Criar um quadrado vermelho
            var redSquare = createSquare(x, y, "red");
            squares.push(redSquare);
        }

// Adicionar o evento de clique na tela
        canvas.addEventListener("click", createSquaresOnClick);

// Iniciar o jogo chamando a função update
        update();
    </script>
</body>
</html>
```

Para jogar o jogo, você pode abrir o arquivo HTML em um navegador web no seu smartphone e, em seguida, tocar na tela para criar os quadrados. Os quadrados vão começar a se mover e, quando colidirem, quadrados verdes serão gerados.