Javascript-How to create a moving bullet animation from canvas

Question

the bullet cant see to move at all

function bullet() {
    this.x=playerx;
    this.y=playery;
    this.init=function(){
        this.x+=5;
        draw(this.x,this.y,10,10,"blue");
        console.log(this.x)
    }
}

in another function

if(k.keyCode==17){
    bullets=new bullet();
    bullets.init();
}

Answer 1

You need to update the bullet's position each frame. So you should add an update function to the bullet constructor. And in it, update the x property so that the bullet moves in the direction the player is facing.

Here a working example:

// Get the canvas and stuff
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var width = canvas.width;
var height = canvas.height;

// The secret woobler
var shouldWooble = false;
var woobler = document.querySelector('button');
woobler.addEventListener('click', function() {
  if (shouldWooble) {
    shouldWooble = false;
    woobler.innerHTML = "Turn on Wooble";
  } else {
    shouldWooble = true;
    woobler.innerHTML = "Turn off Wooble";
  }
});

// This way when we draw the bullet it's always blue
ctx.fillStyle = "blue";

// Our sprites container
var sprites = [];

function bullet() {
  this.x = 0;
  this.y = height / 2;
  this.alive = true;
  this.init = function() {
    // Update position
    this.x += 5;
    sprites.push(this);
  };
  this.render = function() {
    if (this.alive) {
      // Render only if the bullet is alive (aka on screen)
      ctx.fillRect(this.x, this.y, 10, 10);
    }
  };
  this.update = function() {
    if (this.alive) {
      // update the x value only if the object is alive
      this.x += 7;
      if (shouldWooble) {
        this.y = (Math.sin(this.x) * 34) + (height / 2);
      }

      // Check if the bullet is on screen
      if (this.x > width) {
        this.alive = false;
      }
    }
  };
}

function createBullet() {
  bullets = new bullet();
  bullets.init();
}

document.addEventListener('keyup', function(event) {
  // If space bar is pressed
  if (event.keyCode == 32) {
    createBullet();
  }
  event.preventDefault();
});

document.addEventListener('click', function() {
  createBullet();
});

function loop() {
  // Very simple and naive game loop
  update();
  render();
  requestAnimationFrame(loop);
}

function update() {
  // Here we update all the sprites
  // THe reverse for loop is faster
  for (var ix = sprites.length; ix--;) {
    sprites[ix].update();
  }
}

function render() {
  // Here we render all the sprites after clearing the screen
  ctx.clearRect(0, 0, width, height);
  for (var ix = sprites.length; ix--;) {
    sprites[ix].render();
  }
}

// Start the game
requestAnimationFrame(loop);

canvas {
  border: 1px solid black;
}

<p>Click on the canvas below, or press spacebar</p>
<canvas width="340" height="340"></canvas>
<button type="button">Turn on Wooble</button>