2
respuestas

[Sugerencia] Modifacion que no salgan bordes de la pantalla

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Nuestro primer juego y actividad Disparando contra el objetivo

por Diego Maximiliano Medina
| 52.6k xp | 25 posts
Administrativo

Buenas les comparto mi codigo

le hice una modificacion para que los blancos no salgan de la pizzarra teniendo en cuenta su radio

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

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");    
    pincel.fillStyle = "grey";
    pincel.fillRect(0,0,600,400); 

    var x_aleatorio;
    var y_aleatorio;
    var radio= 10;


    function dibujar_circulo(x,y,color,radio){
        pincel.fillStyle = color;
        pincel.beginPath();
        pincel.arc(x, y, radio, 0, 2*3.14);
        pincel.fill();  
    }
    function dibujar_blanco(width, height, radio){
        x = width;
        y = height;
        dibujar_circulo(x,y,"red",radio + 40);
        dibujar_circulo(x,y,"white",radio + 30);
        dibujar_circulo(x,y,"red",radio + 20);
        dibujar_circulo(x,y,"white",radio +10);
        dibujar_circulo(x,y,"red",radio);
    }

    function limpiarPantalla(){
       pincel.clearRect(0,0,600,400);
    }


    function actualizarPantalla(){
        limpiarPantalla();
        var min = 50;
        var max_x = 350;
        var max_y = 550;
        x_aleatorio = Math.round(Math.random()*(max_y - min) + min);
        y_aleatorio = Math.round(Math.random()*(max_x - min) + min);
        dibujar_blanco(x_aleatorio, y_aleatorio, radio);
    }


    function disparar(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;

        if((x < x_aleatorio + radio) && ( y < y_aleatorio + radio) &&
           (x > x_aleatorio - radio) && ( y > y_aleatorio - radio)){
                alert("Tiro certero!");
        }
    }

    pantalla.onclick = disparar;

    setInterval(actualizarPantalla,1000);



</script>
2 respuestas
por Oniel Alexis Contreras Alcántara
| 55.3k xp | 36 posts

Muy interesante, gracias por compartirlo compañero Diego.

por Edsel Yael Alván Ventura
| 145.9k xp | 75 posts

Interesante, quice aplicar tambien algo similar, usaste las propiedades de desigualdad para que no salga del campo de la pantalla: x_aleatorio = Math.round(Math.random()*(max_y - min) + min);

  • [0,1> * (max-min)+min
  • [0,max-min>+min
  • [min, max> Lo mismo quice aplicar, pero esta vez para ubicar el centro, me demore un poco, pero luego de releer las propiedades de incecuaciones un rato, me di cuenta ajajaj.

Se hace asi:

  1. |xdisparo - xaleatorio| < radio
  2. -1*radio < xdisparo -xaleatorio < radio
  3. Si le sume xaleatorio, para no alterar la igualdad. Se traduce a:
    1. xaleatorio-radio < xdisparo < xaleatorio + radio
    2. Y es justamente lo que queremos en nuestra if que hizo el profesor:
      1. if ( (x < x_aleatorio + radio) && (x < x_aleatorio - radio))
      2. Solo que esta expresado en código y ya no de manera matemática.
      3. Con esta forma, nos ahorramos unos cuantos If, puede ser util, para varias condiciones asi, como un hezagono, etc.

Aqui les muestro el código completo:

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

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    pincel.fillStyle = "lightblue";
    pincel.fillRect(0,0,600,400);
    var x,y,radio;
    function drawCircle(x,y,radio,color){
        pincel.fillStyle =color;
        pincel.beginPath();
        pincel.arc(x,y,radio,0,2*Math.PI);
        pincel.fill();
    }

    function drawObjective(radio,x,y){
        drawCircle(x,y,radio+40,"red");
        drawCircle(x,y,radio+20,"white");
        drawCircle(x,y,radio,"red");
    }
    function setRandomPosition(max,radio){
        return Math.floor(Math.random()*(max-radio));
    }
    function cleanScreen(){
        pincel.clearRect(0,0,600,400);
    }
    function updateScreen(){
        cleanScreen();
        radio = 20;
        x=setRandomPosition(600,radio*2);
        y=setRandomPosition(400,radio*2);
        drawObjective(radio,x,y) 
    }
    function oneShot(event){
        let xshot = event.pageX - pantalla.offsetLeft;
        let yshot = event.pageY - pantalla.offsetTop;

        if( (Math.abs(xshot-x)< radio) && (Math.abs(yshot-y)< radio) ){
            alert("One shot");
        }
    }
    pantalla.onclick = oneShot;
    // drawObjective(radio,x,y);
    setInterval(updateScreen,1000);
</script>

Gracias por compartir tu código, ahora si podriamos decir que aplicamos lo que aprendimos en el colegio o escuela :).

Aqui les dejo las propiedades, que pueden ser muy utiles:

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad