CODEWITHSUNDEEP
javascripthtmlcsscanvas
Thiago Medeiros
Thiago Medeiros

Reputation: 11

Javascript Canvas is showing nothing

I can't find what is causing the canvas to show nothing. Please help me!

Here is the image that shows what is happening https://i.sstatic.net/EMvky.jpg

In the body tag I'm calling the function inicializar, like this: < body onload="inicializar()">

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

canvas.width = 600;
canvas.height = 480;
var w = canvas.width;
var h = canvas.height;

var friction = 0.98,
  alturaJogador,
  larguraJogador,
  pontosJogador,
  espaco,
  keys = [];

var jogador1 = {
  x: w / 2,
  y: h / 2,
  s: 2,
  vx: 0,
  vy: 0,
  dir: 0
};

var bola = {
  x: canvas.width / 2,
  y: 250,
  d: 10,
  s: 2,
  vx: 0,
  vy: 0
};

function inicializar() {
  alturaJogador = 25;
  larguraJogador = 25;

  pontosJogador = 0;

  canvas = document.getElementById("canvas");
  context = canvas.getContext("2d");

  espaco = false;

  setInterval(update, 10);
}

function intersects(x1, y1, w1, h1, x2, y2, w2, h2) {
  if (w2 !== Infinity && w1 !== Infinity) {
    w2 += x2;
    w1 += x1;
    if (isNaN(w1) || isNaN(w2) || x2 > w1 || x1 > w2) {
      return false;
    }
  }
  if (y2 !== Infinity && h1 !== Infinity) {
    h2 += y2;
    h1 += y1;
    if (isNaN(h1) || isNaN(y2) || y2 > h1 || y1 > h2) {
      return false;
    }
  }
  return true;
}

function update() {
  if (keys[38]) {
    if (jogador1.vy > -jogador1.s) {
      jogador1.vy--;
    }
  }

  if (keys[40]) {
    if (jogador1.vy < jogador1.s) {
      jogador1.vy++;
    }
  }
  if (keys[39]) {
    if (jogador1.vx < jogador1.s) {
      jogador1.vx++;
    }
  }
  if (keys[37]) {
    if (jogador1.vx > -jogador1.s) {
      jogador1.vx--;
    }
  }

  if (keys[32]) {
    espaco = true;
  } else {
    espaco = false;
  }

  var vB = 10;
  var angle = Math.atan(Math.abs(jogador1.vy / jogador1.vx));
  var vBx = Math.cos(angle) * vB;
  if (jogador1.vx < 0) {
    vBx *= -1;
  }
  var vBy = Math.sin(angle) * vB;
  if (jogador1.vy < 0) {
    vBy *= -1;
  }

  jogador1.vy *= friction;
  jogador1.y += jogador1.vy / 2;
  jogador1.vx *= friction;
  jogador1.x += jogador1.vx / 2;

  if (jogador1.x >= 575) {
    jogador1.x = 575;
  } else if (jogador1.x <= 0) {
    jogador1.x = 0;
  }

  if (jogador1.y > 455) {
    jogador1.y = 455;
  } else if (y <= 0) {
    jogador1.y = 0;
  }

  ctx.clearRect(0, 0, 600, 480);
  ctx.beginPath();
  ctx.fillRect(jogador1.x, jogador1.y, alturaJogador, larguraJogador);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(bola.x, bola.y, bola.d, 0, Math.PI * 2, true);
  ctx.fill();

  ctx.font = "32pt Tahoma";
  ctx.fillText(pontosJogador, canvas.width - 70, 50);
  ctx.fillText(jogador1.vx, canvas.width - 570, 50);
  ctx.fillText(jogador1.vy, canvas.width - 570, 90);
  ctx.fillText(jogador1.dir, canvas.width - 570, 130);

}

update();

document.body.addEventListener("keydown", function(e) {
  keys[e.keyCode] = true;
});
document.body.addEventListener("keyup", function(e) {
  keys[e.keyCode] = false;
});
canvas {
  border: 1px solid #000000;
}
<canvas id="canvas" width="600" height="480">
  Navegador não suporta HTML5
</canvas>

<!DOCTYPE html>


<head>
        <title>Game</title>
        <style type="text/css">
            canvas {
                border: 1px solid #000000;
            }
        </style>
</head>
<body onload="inicializar()">
        <canvas id="canvas" width="600" height="480">
            HTML5 not supported
        </canvas>

    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        canvas.width = 600;
        canvas.height = 480;
        var w = canvas.width;
        var h = canvas.height;

        var friction = 0.98,
            alturaJogador,
            larguraJogador,
            pontosJogador,
            espaco,
            keys = [];

        var jogador1 = {
            x: w / 2,
            y: h / 2,
            s: 2,
            vx: 0,
            vy: 0,
            dir: 0
        };

        var bola = {
            x: canvas.width / 2,
            y: 250,
            d: 10,
            s: 2,
            vx: 0,
            vy: 0
        };

        function inicializar() {
            alturaJogador = 25;
            larguraJogador = 25;

            pontosJogador = 0;

            canvas = document.getElementById("canvas");
            context = canvas.getContext("2d");

            espaco = false;

            setInterval(update, 10);
        }

        function intersects(x1, y1, w1, h1, x2, y2, w2, h2) {
                if (w2 !== Infinity && w1 !== Infinity) {
                    w2 += x2;
                    w1 += x1;
                    if (isNaN(w1) || isNaN(w2) || x2 > w1 || x1 > w2){
                        return false;
                    }
                }
                if (y2 !== Infinity && h1 !== Infinity) {
                    h2 += y2;
                    h1 += y1;
                    if (isNaN(h1) || isNaN(y2) || y2 > h1 || y1 > h2){
                        return false;   
                    }
                }
                return true;
        }

        function update() {
            if(keys[38]) {
                if(jogador1.vy > -jogador1.s) {
                    jogador1.vy--;
                }
            }

            if(keys[40]) {
                if(jogador1.vy < jogador1.s) {
                    jogador1.vy++;
                }
            }
            if(keys[39]) {
                if(jogador1.vx < jogador1.s) {
                    jogador1.vx++;
                }
            }
            if(keys[37]) {
                if(jogador1.vx > -jogador1.s) {
                    jogador1.vx--;
                }
            }

            if(keys[32]) {
                espaco = true;
            } else {
                espaco = false;
            }

            var vB=10;
            var angle=Math.atan(Math.abs(jogador1.vy/jogador1.vx));
            var vBx = Math.cos(angle)*vB;
            if (jogador1.vx < 0) {
                vBx *= -1;
            }
            var vBy = Math.sin(angle)*vB;
            if (jogador1.vy < 0) {
                vBy *= -1;
            }

            jogador1.vy *= friction;
            jogador1.y += jogador1.vy /2;
            jogador1.vx *= friction;
            jogador1.x += jogador1.vx/2;

            if(jogador1.x >= 575) {
                jogador1.x = 575;
            } else if(jogador1.x <= 0) {
                jogador1.x = 0;
            }

            if(jogador1.y > 455) {
                jogador1.y = 455;
            } else if(y <= 0) {
                jogador1.y = 0;
            }

            ctx.clearRect(0, 0, 600, 480);
            ctx.beginPath();
            ctx.fillRect(jogador1.x, jogador1.y, alturaJogador, larguraJogador);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(bola.x, bola.y, bola.d, 0, Math.PI * 2, true);
            ctx.fill();

            ctx.font = "32pt Tahoma";
            ctx.fillText(pontosJogador, canvas.width - 70, 50);
            ctx.fillText(jogador1.vx, canvas.width - 570, 50);
            ctx.fillText(jogador1.vy, canvas.width - 570, 90);
            ctx.fillText(jogador1.dir, canvas.width - 570, 130);

        }

        update();

        document.body.addEventListener("keydown", function (e) {
            keys[e.keyCode] = true;
        });
        document.body.addEventListener("keyup", function (e) {
            keys[e.keyCode] = false;
        });
    </script>   
</body>
</html>

Upvotes: 1

Views: 637

Answers (1)

Assafi Cohen-Arazi
Assafi Cohen-Arazi

Reputation: 847

Give the body an id:

<body id="body">

Then go into javascript to interact:

var body = document.getElementById("body");
body.onload = function () {
inicializar();
}

I hope this helped :)

Upvotes: 1

Related Questions