Jump to content

Ships not displaying canvas game


hauptspieler
 Share

Recommended Posts

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 :

<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.     Dev tools console does not show any errors.

 Enemie lines are " // PERSONALIZAÇÃO DO INIMIGO " and "// OBJETO DO INIMIGO"

 

Please help!

 
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...