Entrar Ainda não tem acesso?
2
respostas

validacao de codigo

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Nosso primeiro jogo e atividade Desenhe obras de arte

por Pamela
| 37.2k xp | 20 posts

Oi Pessoal, criei um codigo pra "simbolizar" um labirinto, mas estou com algumas duvidas. Se for muito complexo eu entendo.

  1. como fazer pra que so a bolinha seja "limpa" da tela, com o codigo clearRect some tudo do canvas.
  2. como fazer pra que a bolinha nao saia do caminho branco? Acredito que devo usar as instrucoes pageX .offsetLeft e pageY.offsetTop, mas quando tentei usar o resto do codigo parou de funcionar, entao fiquei na duvida.
  3. queria mostrar um pop-up quando a bolinha chegasse ao finish, mas novamente nao deu certo. Me deem uma luz, please rs

Obrigada desde ja.

<meta charset="utf-8">
<canvas width="600" height="400"></canvas>

<script>
var canvas = document.querySelector ('canvas');
var brush = canvas.getContext ('2d');
brush.fillStyle = 'lightgray';
brush.fillRect (0,0,600,400);

var reloadTax = 10;
var x = 30;
var y = 30;
var arrowUp = 38;
var arrowDown = 40;
var arrowRight = 39;
var arrowLeft = 37;

function drawSquare (squareX,squareY, width,height){
    brush.fillStyle = 'white';
    brush.beginPath ();
    brush.fillRect (squareX,squareY,width,height);
}

function drawPath (){
    drawSquare (10,20,35,375);
    drawSquare (20,360,200,35);
    drawSquare (185,365,35,-200);
    drawSquare (200,165,360,35);
    drawSquare (550,165,35,200);

}

function drawCircle (x,y){
    brush.fillStyle = 'red';
    brush.beginPath();
    brush.arc(x,y,10,0,2 * Math.PI);
    brush.fill();
}
/*
function clearPage(){  // queria que so a bolinha sumisse, mas com essa funcao, some a pagina inteira, como corrigir?
    brush.clearRect (0,0,600,400);
}
*/
function reloadPage (event){
    drawCircle(x,y);
}

function whatKey(event){
    if (event.keyCode == arrowUp){
        y = y - reloadTax;
    } else if (event.keyCode == arrowDown){
        y = y + reloadTax;
    } else if (event.keyCode == arrowRight){
        x = x + reloadTax;
    } else if (event.keyCode == arrowLeft){
        x = x - reloadTax;
    }
}

function drawText(text, x, y){
    brush.font = '17px Georgia';
    brush.fillStyle = 'black';
    brush.fillText (text,x,y)
}

/*
function drawInsideCanvas (event){
    x = event.pageX - offsetLeft;
    y = event.pageY - offsetTop;
    if (x >= 20 && x <= 580 && y >= 20 && y <= 380){
        return true;
        } else {
        return false;
    }
}
*/
drawPath ();
setInterval (reloadPage, 10);
drawText ('Start', 10,15);
drawText ('Finish', 540,390);
document.onkeydown = whatKey;


</script>
2 respostas
por Cássio Murilo
| 1276.4k xp | 2204 posts
Instrutor Agile Master

Olá, Pâmela! Tudo bem contigo? Espero que sim!

Eu tenho um exercício, com a estrutura diferente do tua, mas que adaptei para chegar no mesmo comportamento que espera.

Nele, só não coloquei um alerta para dizer que chegou no final, mas o restante cumpre o que quer.

Coloquei alguns comentários para facilitar o entendimento e espero que goste ;-)

<canvas width="600" height="400">

    <script>
        var canvas = document.querySelector('canvas');
        var brush = canvas.getContext('2d');
        brush.fillStyle = "lightgray";

        //Esta variável corresponde a função blockRetangle
        var WIDTH = canvas.width, HEIGHT = canvas.height;

        //Movimento do personagem
        var arrowUp = 38, arrowDown = 40, arrowRight = 39, arrowLeft = 37;
        var moveUp = moveDown = moveRight = moveLeft = false;

        //Estabeleci o tamanho de um quadrado na tela. É como se eu dividisse meu canvas em vários quadradinhos de 20
        var tileSize = 20;

        //Personagem
        var player = {
            x: 26,
            y: 26,
            width: 28,
            height: 28,
            speed: 1
        };

        //Array de paredes
        var walls = [];

        //Desenho meu caminho através de 0 e 1.
        // 0 = caminho e 1 = parede
        //Crie seu próprio
        var maze = [
            [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            [1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            [1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            [1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            [1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            [1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            [1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            [1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            [1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1],
            [1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1],
            [1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1],
            [1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1],
            [1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1],
            [1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1],
            [1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1],
            [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
        ];

        //Crio minha array de paredes e guardo na array acima - var walls = [];
        for (var row in maze) {
            for (var column in maze[row]) {
                var tile = maze[row][column];
                if (tile === 1) {
                    var wall = {
                        x: tileSize * column,
                        y: tileSize * row,
                        width: tileSize,
                        height: tileSize
                    };
                    walls.push(wall);
                }
            }
        }

        //Função para limitar o personagem a ficar no caminho e não atravessar a parede
        function blockRectangle(objA, objB) {
            var distX = (objA.x + objA.width / 2) - (objB.x + objB.width / 2);
            var distY = (objA.y + objA.height / 2) - (objB.y + objB.height / 2);

            var sumWidth = (objA.width + objB.width) / 2;
            var sumHeight = (objA.height + objB.height) / 2;

            if (Math.abs(distX) < sumWidth && Math.abs(distY) < sumHeight) {
                var overlapX = sumWidth - Math.abs(distX);
                var overlapY = sumHeight - Math.abs(distY);

                if (overlapX > overlapY) {
                    objA.y = distY > 0 ? objA.y + overlapY : objA.y - overlapY;
                } else {
                    objA.x = distX > 0 ? objA.x + overlapX : objA.x - overlapX;
                }
            }
        }
por Cássio Murilo
| 1276.4k xp | 2204 posts
Instrutor Agile Master

...continuação

        //Funções para o personagem caminhar - keydownHandler, keyupHandler e update
        window.addEventListener("keydown", keydownHandler, false);
        window.addEventListener("keyup", keyupHandler, false);

        function keydownHandler(e) {
            var key = e.keyCode
            switch (key) {
                case arrowLeft:
                    moveLeft = true;
                    break;
                case arrowUp:
                    moveUp = true;
                    break;
                case arrowRight:
                    moveRight = true;
                    break;
                case arrowDown:
                    moveDown = true;
                    break;
            }
        }

        function keyupHandler(e) {
            var key = e.keyCode
            switch (key) {
                case arrowLeft:
                    moveLeft = false;
                    break;
                case arrowUp:
                    moveUp = false;
                    break;
                case arrowRight:
                    moveRight = false;
                    break;
                case arrowDown:
                    moveDown = false;
                    break;
            }
        }

        function update() {
            if (moveLeft && !moveRight) {
                player.x -= player.speed;
            } else
                if (moveRight && !moveLeft) {
                    player.x += player.speed;
                }
            if (moveUp && !moveDown) {
                player.y -= player.speed;
            } else
                if (moveDown && !moveUp) {
                    player.y += player.speed
                }
            //Trabalha as limitações entre meu caminho e personagem
            for (var i in walls) {
                var wall = walls[i];
                blockRectangle(player, wall);
            }
        }

        //Desenha meu caminho
        function render() {
            brush.clearRect(0, 0, WIDTH, HEIGHT);
            brush.save();
            for (var row in maze) {
                for (var column in maze[row]) {
                    var tile = maze[row][column];
                    if (tile === 1) {
                        var x = column * tileSize;
                        var y = row * tileSize;
                        brush.fillRect(x, y, tileSize, tileSize);
                    }
                }
            }
            //Desenha o texto
            drawText('Start', 23, 15);
            drawText('Finish', 540, 397);

            //Desenha meu personagem
            brush.fillStyle = 'red';
            brush.fillRect(player.x, player.y, player.width, player.height);
            brush.restore();
        }

        //Utilizei sua função para o texto
        function drawText(text, x, y) {
            brush.font = '17px Georgia';
            brush.fillStyle = 'black';
            brush.fillText(text, x, y)
        }

        //Esta função faz o loop constante
        function loop() {
            update();
            render();
            requestAnimationFrame(loop, canvas);
        }
        requestAnimationFrame(loop, canvas);

    </script>

Parabéns pelo projeto e ir além com o desenvolvimento.

Um abraço e bons estudos!