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:35975

←

Prev Next

→

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

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        var blueX = 50; // coordenadas iniciais do quadrado azul
        var blueY = 50;
        var redX = 150; // coordenadas iniciais do quadrado vermelho
        var redY = 150;
        var greenX = 100; // coordenadas iniciais do quadrado verde
        var greenY = 100;
        var blueSpeedX = 2; // velocidade horizontal do quadrado azul
        var blueSpeedY = 1; // velocidade vertical do quadrado azul
        var redSpeedX = 1.5; // velocidade horizontal do quadrado vermelho
        var redSpeedY = -1; // velocidade vertical do quadrado vermelho
        var greenSpeedX = -1.5; // velocidade horizontal do quadrado verde
        var greenSpeedY = 1.5; // velocidade vertical do quadrado verde
        
        function drawBlue() {
            ctx.fillStyle = "blue";
            ctx.fillRect(blueX, blueY, 50, 50);
        }
        
        function drawRed() {
            ctx.fillStyle = "red";
            ctx.fillRect(redX, redY, 50, 50);
        }
        
        function drawGreen() {
            ctx.fillStyle = "green";
            ctx.fillRect(greenX, greenY, 50, 50);
        }
        
        function updateBlue() {
            blueX += blueSpeedX;
            blueY += blueSpeedY;
            if (blueX < 0 || blueX + 50 > canvas.width) {
                blueSpeedX = -blueSpeedX;
            }
            if (blueY < 0 || blueY + 50 > canvas.height) {
                blueSpeedY = -blueSpeedY;
            }
        }
        
        function updateRed() {
            redX += redSpeedX;
            redY += redSpeedY;
            if (redX < 0 || redX + 50 > canvas.width) {
                redSpeedX = -redSpeedX;
            }
            if (redY < 0 || redY + 50 > canvas.height) {
                redSpeedY = -redSpeedY;
            }
        }
        
        function updateGreen() {
            greenX += greenSpeedX;
            greenY += greenSpeedY;
            if (greenX < 0 || greenX + 50 > canvas.width) {
                greenSpeedX = -greenSpeedX;
            }
            if (greenY < 0 || greenY + 50 > canvas.height) {
                greenSpeedY = -greenSpeedY;
            }
        }
        
        function checkCollision() {
            if (blueX < redX + 50 &&
                blueX + 50 > redX &&
                blueY < redY + 50 &&
                blueY + 50 > redY) {
                // Quadrado azul colidiu com o quadrado vermelho
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                drawGreen();
                return;
            }
            if (blueX < greenX + 50 &&
                blueX + 50 > greenX &&
                blueY < greenY + 50 &&
                blueY + 50 > greenY) {
                // Quadrado azul colidiu com o quadrado verde
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                drawGreen();
                return;
            }
            if (redX < greenX + 50 &&
                redX + 50 > greenX &&
                redY < greenY + 50 &&
                redY + 50 > greenY) {
                // Quadrado vermelho colidiu com o quadrado verde
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                drawGreen();
                return;
            }
        }
        
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBlue();
            drawRed();
            updateBlue();
            updateRed();
            checkCollision();
            requestAnimationFrame(gameLoop);
        }
        
        canvas.addEventListener("click", function() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            blueX = Math.floor(Math.random() * (canvas.width - 50));
            blueY = Math.floor(Math.random() * (canvas.height - 50));
            redX = Math.floor(Math.random() * (canvas.width - 50));
            redY = Math.floor(Math.random() * (canvas.height - 50));
            gameLoop();
        });
    };
</script>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>