Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Juguemos tiro al blanco!

¡Hola!, les comparto el código del tiro al blanco que realicé, para realizarlo estuve leyendo un poco sobre setInterval aqui: https://developer.mozilla.org/en-US/docs/Web/API/setInterval

No logré superar el nivel 3 y el puntaje de 1100, ¡a ver si alguien puede superarlo!. tiro al blanco con JavaScriptEl código:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

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

<script>
    var canvas1 = document.querySelector("canvas");
    var paint_brush = canvas1.getContext("2d");
    var area_x = 0, area_y = 100;
    var area_width = canvas1.width - area_x;
    var area_height = canvas1.height - area_y;
    var targetRadius = 30;
    var score = 0;
    var level = 1;
    var speed = 2000;
    var clicks = 0;
    var targetX = randomInt(30,770);
    var targetY = randomInt(130,570);
    var ID;

    function createTargetArea(){
        paint_brush.fillStyle = "black";
        paint_brush.fillRect(area_x,area_y,area_width,area_height);
    }

    function createMarkArea(){
        paint_brush.fillStyle = "darkgrey";
        paint_brush.fillRect(0,0,canvas1.width,canvas1.height-area_height);
        paint_brush.fillStyle = "black";
        paint_brush.font = "50px verdana";
        paint_brush.fillText("|Nivel:"+level+" |Puntaje:"+score,10,70);

    }

    function drawCircle(x,y,radius,color){

        paint_brush.fillStyle = color;
        paint_brush.beginPath();
        paint_brush.arc(x,y,radius,0,Math.PI*2);
        paint_brush.fill();
    }

    function drawTarget(x,y){
        drawCircle(x,y,30,"red");
        drawCircle(x,y,20,"white");
        drawCircle(x,y,10,"red");
    }

    function randomInt(lowerLimit,upperLimit){
        let result;
        while(true){
            result = Math.round(Math.random()*(10**(((upperLimit).toString().length))));
            if (result >= lowerLimit & result <= upperLimit) {
                return result;
                break;
            }
        }
    }    

    function targetHit(event){
        console.log(event);
        let click_x = event.x - canvas1.offsetLeft;
        let click_y = event.y - canvas1.offsetTop;
        if((click_x >= targetX-10 & click_x <= targetX+10)&
            (click_y >= targetY-10 & click_y <= targetY+10)){

            clicks ++;
            if(clicks >= 3){
                level++;
                clicks = 0;
                clearInterval(iD);
                iD = setSpeed();
            }
            score += 100*level;
            speed = speed / level;
        }
    }

    function starGame(){
        targetX = randomInt(30,770);
        targetY = randomInt(130,570);
        createMarkArea();
        createTargetArea();
        drawTarget(targetX,targetY);
    }
    function setSpeed(){
        return setInterval(starGame,speed);
    }
    createMarkArea();
    createTargetArea();
    iD = setSpeed();
    canvas1.onclick = targetHit;
</script>

Quedo atento a comentarios para mejorarlo y seguir aprendiendo.

1 respuesta

Hola Esteban, espero estés muy bien.

Felicitaciones por tu aprendizaje, continúa con ese empeño. Para agilizar el tiempo de respuesta en caso de dudas relacionadas con los cursos, estamos priorizando el foro para postear dudas.

En caso que desees compartir tus ejercicios o actividades dispusimos en Discord un canal exclusivo para ese fin (#compartatucodigo)

Te dejo éste link que muestra donde puedes compartir tus actividades https://www.youtube.com/watch?v=ZhXdFO6SxQ4

Si necesitas ayuda, estaremos aquí! Un saludo!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios