JavaScript - Punctuation

Question

JavaScript - Punctuation

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm a beginner. How to make the points (score) stay green and on the same screen. I'm having trouble updating the points it shows on the next screen. There is something to do, I am 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>

javascript

asked by anonymous 13.05.2018 / 03:44

2 answers

0

Just use the properties and method below:

fillStyle to set the color of the text (otherwise the text will turn green;
font to set 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)

Full 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 text below the canvas - below the green element - you can use the textContent property 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>

13.05.2018 / 07:34

How to insert a value of a variable in the PHP Header? Change button color using conditional

score 0 · Accepted Answer

Use innerHTML instead of document.write , which rewrites the whole document, so add

So:

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

As for staying on the green side, you would need to change 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>