Javascript - Scoring

Question

Javascript - Scoring

Asked 6 years, 6 months ago

Viewed 336 times

0

I am a beginner. How to make the points (score) stay in the green position and on the same screen. I’m having trouble updating the stitches it shows on the next screen. There’s something to do, I’m using Document.write('text');

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
	
    var raio = 10;
    var xx;
    var yy;
    var pontos = 0;
	
    function inicio()
    {
		pincel.fillStyle = 'lightgray';
		pincel.fillRect(0, 0, 1200, 800);
		pincel.fillStyle = 'green';
		pincel.fillRect(1000,600, 1200, 800);
		document.write('Pontos: ' + pontos);
        function sorteia()
        {
            xx = Math.floor(Math.random() * 800);
            yy = Math.floor(Math.random() * 800);
        }
        sorteia();
        function desenhaCirculo(xx, yy, raio, cor)
        {
            pincel.fillStyle = cor;
            pincel.beginPath();
            pincel.arc(xx, yy, raio, 0, 2 * Math.PI);
            pincel.fill();
        }
        desenhaCirculo(xx,yy, raio + 20, 'red'); // maior círculo
        desenhaCirculo(xx,yy, raio + 10, 'white');
        desenhaCirculo(xx,yy, raio, 'red'); // menor circulo
        function dispara(evento)
        {
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            if(x <= xx + 10 & x >= xx - 10 & y >= yy -10 & y <= yy + 10){
                alert('Acertou no alvo, e ganhou 50 Pontos');
                pontos = pontos + 50;
                inicio();
            }
            if((x <= xx + 20 & x >= xx - 20 & y >= yy -20 & y <= yy + 20)!= (x <= xx + 10 & x >= xx - 10 & y >= yy -10 & y <= yy + 10))
            {
                alert('Acertou mais nao no alvo, e ganhou 15 Pontos');
                pontos = pontos + 15;
                inicio();
            }
            if((x <= xx + 30 & x >= xx - 30 & y >= yy -30 & y <= yy + 30)!= (x <= xx + 20 & x >= xx - 20 & y >= yy -20 & y <= yy + 20))
            {
                alert('quase errou, e ganhou 5 Pontos');
                pontos = pontos + 5;
                inicio();
            }
        }
	tela.onclick = dispara;
    }
    inicio();
</script>

2 answers

0

Use innerHTML instead of Document.write, in this case, rewrite the entire document, so it goes.

Thus:

document.getElementById('pontos').innerHTML = 'Pontos: ' + pontos;

As for staying on the green side, you would need to change the CSS and HTML.

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

<div id="pontos"></div>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
	
    var raio = 10;
    var xx;
    var yy;
    var pontos = 0;
	
    function inicio()
    {
		pincel.fillStyle = 'lightgray';
		pincel.fillRect(0, 0, 1200, 800);
		pincel.fillStyle = 'green';
		pincel.fillRect(1000,600, 1200, 800);
		document.getElementById('pontos').innerHTML = 'Pontos: ' + pontos;
        function sorteia()
        {
            xx = Math.floor(Math.random() * 800);
            yy = Math.floor(Math.random() * 800);
        }
        sorteia();
        function desenhaCirculo(xx, yy, raio, cor)
        {
            pincel.fillStyle = cor;
            pincel.beginPath();
            pincel.arc(xx, yy, raio, 0, 2 * Math.PI);
            pincel.fill();
        }
        desenhaCirculo(xx,yy, raio + 20, 'red'); // maior círculo
        desenhaCirculo(xx,yy, raio + 10, 'white');
        desenhaCirculo(xx,yy, raio, 'red'); // menor circulo
        function dispara(evento)
        {
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            if(x <= xx + 10 & x >= xx - 10 & y >= yy -10 & y <= yy + 10){
                alert('Acertou no alvo, e ganhou 50 Pontos');
                pontos = pontos + 50;
                inicio();
            }
            if((x <= xx + 20 & x >= xx - 20 & y >= yy -20 & y <= yy + 20)!= (x <= xx + 10 & x >= xx - 10 & y >= yy -10 & y <= yy + 10))
            {
                alert('Acertou mais nao no alvo, e ganhou 15 Pontos');
                pontos = pontos + 15;
                inicio();
            }
            if((x <= xx + 30 & x >= xx - 30 & y >= yy -30 & y <= yy + 30)!= (x <= xx + 20 & x >= xx - 20 & y >= yy -20 & y <= yy + 20))
            {
                alert('quase errou, e ganhou 5 Pontos');
                pontos = pontos + 5;
                inicio();
            }
        }
	tela.onclick = dispara;
    }
    inicio();
</script>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.

by Valdeir Psr • **10,804** points · Answer 1 · 2018-05-13T05:34:37+00:00

Just use the properties and method below:

fillStyle to set the color of the text (otherwise the text will turn green;
font to set the font size, type and style (optional); and
fillText to write something on the screen. In this method you can control the position X and Y of the element.

Example:

pincel.fillStyle = "blue"
pincel.font = "bold 16px Arial";
pincel.fillText(`Pontuação: ${pontos}`, 1000, 700)

Complete Example:

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
	
    var raio = 10;
    var xx;
    var yy;
    var pontos = 0;
	
    function inicio()
    {
		pincel.fillStyle = 'lightgray';
		pincel.fillRect(0, 0, 1200, 800);
		pincel.fillStyle = 'green';
		pincel.fillRect(1000,600, 1200, 800);
		
    pincel.fillStyle = "blue"
    pincel.font = "bold 16px Arial";
    pincel.fillText(`Pontuação: ${pontos}`, 1000, 700)
    
    
        function sorteia()
        {
            xx = Math.floor(Math.random() * 800);
            yy = Math.floor(Math.random() * 800);
        }
        sorteia();
        function desenhaCirculo(xx, yy, raio, cor)
        {
            pincel.fillStyle = cor;
            pincel.beginPath();
            pincel.arc(xx, yy, raio, 0, 2 * Math.PI);
            pincel.fill();
        }
        desenhaCirculo(xx,yy, raio + 20, 'red'); // maior círculo
        desenhaCirculo(xx,yy, raio + 10, 'white');
        desenhaCirculo(xx,yy, raio, 'red'); // menor circulo
        function dispara(evento)
        {
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            if(x <= xx + 10 & x >= xx - 10 & y >= yy -10 & y <= yy + 10){
                alert('Acertou no alvo, e ganhou 50 Pontos');
                pontos = pontos + 50;
                inicio();
            }
            if((x <= xx + 20 & x >= xx - 20 & y >= yy -20 & y <= yy + 20)!= (x <= xx + 10 & x >= xx - 10 & y >= yy -10 & y <= yy + 10))
            {
                alert('Acertou mais nao no alvo, e ganhou 15 Pontos');
                pontos = pontos + 15;
                inicio();
            }
            if((x <= xx + 30 & x >= xx - 30 & y >= yy -30 & y <= yy + 30)!= (x <= xx + 20 & x >= xx - 20 & y >= yy -20 & y <= yy + 20))
            {
                alert('quase errou, e ganhou 5 Pontos');
                pontos = pontos + 5;
                inicio();
            }
        }
	tela.onclick = dispara;
    }
    inicio();
</script>

If you want to add a text below the canvas - below the green element -, you can use the property textContent of an HTML element (div, p, span etc) and a bit of CSS, for example:

document.querySelector("#pontuacao")
        .textContent = `Pontuação: ${pontos}`;

Example:

#pontuacao {
  text-align:right;
  width: 1100px;
}

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

<p id="pontuacao">Pontuação: 0</p>

<script>

    const tela = document.querySelector('canvas');
    const pincel = tela.getContext('2d');
    const pontuacao = document.querySelector("#pontuacao")
	
    let raio = 10;
    let xx;
    let yy;
    let pontos = 0;
	
    function inicio()
    {
		pincel.fillStyle = 'lightgray';
		pincel.fillRect(0, 0, 1200, 800);
		pincel.fillStyle = 'green';
		pincel.fillRect(1000,600, 1200, 800);
		
    pontuacao.textContent = `Pontuação: ${pontos}`;
    
        function sorteia()
        {
            xx = Math.floor(Math.random() * 800);
            yy = Math.floor(Math.random() * 800);
        }
        sorteia();
        function desenhaCirculo(xx, yy, raio, cor)
        {
            pincel.fillStyle = cor;
            pincel.beginPath();
            pincel.arc(xx, yy, raio, 0, 2 * Math.PI);
            pincel.fill();
        }
        desenhaCirculo(xx,yy, raio + 20, 'red'); // maior círculo
        desenhaCirculo(xx,yy, raio + 10, 'white');
        desenhaCirculo(xx,yy, raio, 'red'); // menor circulo
        function dispara(evento)
        {
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            if(x <= xx + 10 & x >= xx - 10 & y >= yy -10 & y <= yy + 10){
                alert('Acertou no alvo, e ganhou 50 Pontos');
                pontos = pontos + 50;
                inicio();
            }
            if((x <= xx + 20 & x >= xx - 20 & y >= yy -20 & y <= yy + 20)!= (x <= xx + 10 & x >= xx - 10 & y >= yy -10 & y <= yy + 10))
            {
                alert('Acertou mais nao no alvo, e ganhou 15 Pontos');
                pontos = pontos + 15;
                inicio();
            }
            if((x <= xx + 30 & x >= xx - 30 & y >= yy -30 & y <= yy + 30)!= (x <= xx + 20 & x >= xx - 20 & y >= yy -20 & y <= yy + 20))
            {
                alert('quase errou, e ganhou 5 Pontos');
                pontos = pontos + 5;
                inicio();
            }
        }
	tela.onclick = dispara;
    }
    inicio();
</script>