Ships not displaying canvas game

Question

I am trying to develop a simple Canvas game, but I'm currently stuck at making the enemies display itself.

Heres the code I'm using :

<html lang="en-us">
<head>
<meta http-equiv="content-type"  content="text/html" charset="utf-8">
<title>Cyber Space War</title>
</head>

<body style="margin:10px">

<canvas id="canvas"  style="background:#111;"></canvas>


<script type="text/javascript">


//   SETUP INICIAL
     var canvas = document.getElementById('canvas'),
         ctx = canvas.getContext('2d');
     var innerWidth = 360,
         innerHeight = 620;
         canvas.width = innerWidth;
         canvas.height = innerHeight;


// VARIAVEIS
   var score = 0,
   lastTime = 0;

//   TECLAS DE MOVIMENTAÇÃO
window.onkeydown = pressionaTecla;
function pressionaTecla(tecla){
    if(tecla.keyCode == 38)  {
          player.y = player.y - 10;
    }
    if(tecla.keyCode == 40)  {
          player.y = player.y + 10;
    }
    if(tecla.keyCode == 39)  {
          player.x = player.x + 10;
    }
    if(tecla.keyCode == 37)  {
          player.x = player.x - 10;
    }

}
//   PERSONALIZAÇÃO DO PLAYER
    var player = { },
        player_width = 100,
        player_height = 105,
        player_img = new Image();
        player_img.src = 'images/spaceship.png';

//   OBJETO DO PLAYER
    player = {
        width : player_width,
        height: player_height,
        x : innerWidth/2 - player_width/2,   // centralizar
        y: innerHeight - (player_height+10),  //deixar em baixo
        power : 10,
        draw: function(){


          // FUNÇÃO QUE BLOQUEIA O OBJETO PLAYER SAIR DO CANVAS


          if(this.x <= 0 ){
            this.x = 0;
          }else if (this.x >= (innerWidth - this.width)) {
            this.x = (innerWidth - this.width);
          }

          if(this.y <= 0 ){
            this.y = 0;
          }else if (this.y >= (innerHeight - this.height)) {
            this.y = (innerHeight - this.height);
          }









          ctx.drawImage(player_img, this.x, this.y, this.width, this.height);
        }



   };


// FUNDO DE GALAXIA     *codigo fonte do fundo retirado do site codepen.io     https://codepen.io/LeonGr/pen/fdCsI
   var stars = [], // Array that contains the stars
    FPS = 60, // Frames per second
    x = canvas.width; // Number of stars


    for (var i = 0; i < x; i++) {
  stars.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    radius: Math.random(),
    vx: Math.floor(Math.random() * 10) - 5,
    vy: Math.floor(Math.random() * 10) - 5
  });
}
function updatefundo() {
  for (var i = 0, x = stars.length; i < x; i++) {
    var s = stars[i];

    s.x += s.vx / FPS;
    s.y += s.vy / FPS;

    if (s.x < 0 || s.x > canvas.width) s.x = -s.x;
    if (s.y < 0 || s.y > canvas.height) s.y = -s.y;
  }
}
function drawfundo() {
  ctx.clearRect(0,0,canvas.width,canvas.height);

  ctx.globalCompositeOperation = "lighter";

  for (var i = 0, x = stars.length; i < x; i++) {
    var s = stars[i];

    ctx.fillStyle = "#fff";
    ctx.beginPath();
    ctx.arc(s.x, s.y, s.radius, 0, 2 * Math.PI);
    ctx.fill();
  }
}




 //  PERSONALIZAÇÃO DO INIMIGO

  var enemyArray = [],
      enemyIndex = 0,
      enemy_width = 35,
      enemy_height = 43,
      enemy_timer = 1000,
      enemy_img = new Image ();
      enemy_img.src = 'images/spaceship.png';

 // OBJETO DO INIMIGO

  function enemy (x, y, dx, dy, enemy_img, enemy_width, enemy_height, rotation){
            this.x = x;
            this.y = y;
            this.dx = dx;
            this.dy = dy;
            this.img = enemy_img;
            this.width = enemy_width;
            this.height = enemy_height;
            this.rotation = rotation;
            enemyIndex++;
            enemyArray[enemyIndex] = this;
            this.id = enemyIndex;

            ctx.drawImage(this.img, this.x, this.y, this.width, this.height);



            this.update = function(){
              this.y+= this.dy;
              this.x+= this.dx;


              this.draw();

            }


            this.delete = function(){
              delete enemyArray[this.id];
            }
            this.draw = function(){
              ctx.drawImage(this.img, this.x, this.y, this.width, this.height);

            }




}



// FUNÇÃO DE CRIAR INIMIGOS


  function create_enemy(){
      var x = Math.random() * (innerWidth - enemy_width);
      var y = -enemy_height;
      var dx = 3;
      var dy = 3;
      var rotation = Math.random();

      new enemy (x, y, dx, dy, enemy_img, enemy_width, enemy_height, rotation);




  }






//  LOOPING DA ANIMAÇAO  (MAINFRAME DO GAME)
  function gameLoop(currentTime){
    requestAnimationFrame(gameLoop);
    ctx.clearRect (0,0,  canvas.width, canvas.height);



    drawfundo();
    updatefundo();

    // SCORE
    ctx.font = '17px arial';
    ctx.fillStyle = '#fff';
    ctx.fillText('PONTOS: '+score , 15, 30);

    // ENERGIA
    ctx.font = '17px arial';
    ctx.fillStyle = '#fff';
    ctx.fillText('ENERGIA '+player.power , innerWidth-110, 30);



    // JOGADOR
    player.draw();


    if(currentTime >= lastTime + enemy_timer){
      lastTime = currentTime;
      create_enemy();
    }
    create_enemy();




  }
    gameLoop();







</script>

Everything is working fine except the enemies not showing.

Already checked the images folder and it's all set up like I've puted in the code. Enemies lines are " // PERSONALIZAÇÃO DO INIMIGO " "// OBJETO DO INIMIGO"

any errors in the browser developer tools console? – Jaromanda X May 07 '20 at 04:07 — Jaromanda X, May 07 '20 at 04:07
Already checked that too and does not show anything! – haupt May 07 '20 at 04:08 — haupt, May 07 '20 at 04:08

Danziger · Accepted Answer · 2020-05-07T21:00:54.600

You are drawing the enemy outside the canvas. Just change var y = -enemy_height to var y = enemy_height:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const innerWidth = canvas.width = window.innerWidth;
const innerHeight = canvas.height = window.innerHeight;


// VARIAVEIS:

let score = 0;
let lastTime = 0;

// TECLAS DE MOVIMENTAÇÃO:

window.onkeydown = (e) => {
  e.preventDefault();
  
  if (e.keyCode == 38) player.y = player.y - 10;
  if (e.keyCode == 40) player.y = player.y + 10;
  if (e.keyCode == 39) player.x = player.x + 10;
  if (e.keyCode == 37) player.x = player.x - 10;
};


// PERSONALIZAÇÃO DO PLAYER:

var player = { },
player_width = 100,
player_height = 105,
player_img = new Image();
player_img.src = 'https://i.stack.imgur.com/L5XWd.png';


// OBJETO DO PLAYER:

player = {
  width : player_width,
  height: player_height,
  x : innerWidth / 2 - player_width / 2, // centralizar
  y: innerHeight - (player_height + 10), //deixar em baixo
  power : 10,
  draw: function() {
    // FUNÇÃO QUE BLOQUEIA O OBJETO PLAYER SAIR DO CANVAS
    
    if(this.x <= 0 ){
      this.x = 0;
    } else if (this.x >= (innerWidth - this.width)) {
      this.x = (innerWidth - this.width);
    }
    
    if(this.y <= 0 ){
      this.y = 0;
    } else if (this.y >= (innerHeight - this.height)) {
      this.y = (innerHeight - this.height);
    }
      
    ctx.drawImage(player_img, this.x, this.y, this.width, this.height);
  }
};


// FUNDO DE GALAXIA (https://codepen.io/LeonGr/pen/fdCsI):

var stars = [], // Array that contains the stars
  FPS = 60, // Frames per second
  x = canvas.width; // Number of stars

for (var i = 0; i < x; i++) {
  stars.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    radius: Math.random(),
    vx: Math.floor(Math.random() * 10) - 5,
    vy: Math.floor(Math.random() * 10) - 5
  });
}

function updatefundo() {
  for (var i = 0, x = stars.length; i < x; i++) {
    var s = stars[i];
    
    s.x += s.vx / FPS;
    s.y += s.vy / FPS;
    
    if (s.x < 0 || s.x > canvas.width) s.x = -s.x;
    if (s.y < 0 || s.y > canvas.height) s.y = -s.y;
  }
}

function drawfundo() {
  ctx.clearRect(0,0,canvas.width,canvas.height);
  
  ctx.globalCompositeOperation = "lighter";
  
  for (var i = 0, x = stars.length; i < x; i++) {
    var s = stars[i];
    
    ctx.fillStyle = "#fff";
    ctx.beginPath();
    ctx.arc(s.x, s.y, s.radius, 0, 2 * Math.PI);
    ctx.fill();
  }
}


// PERSONALIZAÇÃO DO INIMIGO:

var enemyArray = [],
enemyIndex = 0,
enemy_width = 35,
enemy_height = 43,
enemy_timer = 1000,
enemy_img = new Image();
enemy_img.src = 'https://i.stack.imgur.com/SnOAO.png';


// OBJETO DO INIMIGO:

function enemy (x, y, dx, dy, enemy_img, enemy_width, enemy_height, rotation){
  this.x = x;
  this.y = y;
  this.dx = dx;
  this.dy = dy;
  this.img = enemy_img;
  this.width = enemy_width;
  this.height = enemy_height;
  this.rotation = rotation;
  enemyIndex++;
  enemyArray[enemyIndex] = this;
  this.id = enemyIndex;
  
  ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
  
  this.update = function(){
    this.y+= this.dy;
    this.x+= this.dx;
    
    this.draw();
  }
  
  this.delete = function() {
    delete enemyArray[this.id];
  }
  
  this.draw = function() {
    ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
  }
}


// FUNÇÃO DE CRIAR INIMIGOS:

function create_enemy(){
  var x = Math.random() * (innerWidth - enemy_width);
  var y = enemy_height;
  var dx = 3;
  var dy = 3;
  var rotation = Math.random();
  
  new enemy (x, y, dx, dy, enemy_img, enemy_width, enemy_height, rotation);
}

// LOOPING DA ANIMAÇAO (MAINFRAME DO GAME):

function gameLoop(currentTime){
  ctx.clearRect (0,0,  canvas.width, canvas.height);

  drawfundo();
  updatefundo();
  
  // SCORE
  ctx.font = '17px arial';
  ctx.fillStyle = '#fff';
  ctx.fillText('PONTOS: '+score , 15, 30);
  
  // ENERGIA
  ctx.font = '17px arial';
  ctx.fillStyle = '#fff';
  ctx.fillText('ENERGIA '+player.power , innerWidth-110, 30);

  // JOGADOR
  player.draw();
    
  if(currentTime >= lastTime + enemy_timer){
    lastTime = currentTime;
    create_enemy();
  }
  
  create_enemy();
  
  requestAnimationFrame(gameLoop);

}

requestAnimationFrame(gameLoop);

body {
  margin: 0;
  height: 100vh;
}

#canvas {
  width: 100%;
  height: 100%;
}

<canvas id="canvas"  style="background:#111;"></canvas>

Images used:

Enemy:

Player:

Dude you are a life saver! Cool name by the way, Danzing is one of my favourite musicians hehe thanks a lot. — haupt, May 07 '20 at 21:49
I cleaned up the code a bit and made some style changes while going through it, but the relevant change is the line I highlighted. `let` is block-scoped and not hoisted while `var` is function-scoped and hoisted. In this example, it makes no difference, but most style guides favour ES6's `let` and `const` over `var`. See https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var. — Danziger, May 07 '20 at 22:14
Since you took a great look at my code, do you know how I could make the stars background upgrade every X time? It gets at a point where all the stars stick at the bottom and I didn't found a way of making it update... — haupt, May 07 '20 at 22:21
You could swap the sign of the speed every X frames or just randomize it, just like you do when you initialize them. Currently, they start moving from a random position at a certain random speed, but that speed doesn't change, so at some point, they are all going to be out of the canvas. — Danziger, May 07 '20 at 22:30
Alternatively, make them wrap: When they leave by the right side of the canvas, they will appear again from the left side and vice-versa. Same thing vertically. That means `s.x = (s.x + s.vx / FPS) % innerWidth` and `s.y = (s.y + s.vy / FPS) % innerHeight` and it's probably the option that would look better. — Danziger, May 07 '20 at 22:33

Ships not displaying canvas game

1 Answers1