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();
}
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>