Hello,
i just wanted to create a simple game with javascript and HTML (not HTML5), in the game you will control a ship represented as a circle.
i made the circle move, but what i did not know is how to make it shoot bullets represented as a rectangles.
i tried to make the bullet as an object in javascript and when i press the spacebar a new object will be created and it will be pushed into and array and that bullets y coordinate will be decremented until it reaches the top of the screen then it will be deleted from the array but i cannot implement that idea in code 
.
any help will be appreciated 
this is the full code
<!DOCTYPE HTML>
<meta charset='utf-8'>
<title>shoot</title>
<style>
body {
margin:0px;
padding:0px;
}
#background {
border: 1px solid black;
}
#ball {
background: blue;
width: 20px;
height: 20px;
border-radius: 20px;
position:absolute;
}
</style>
<div id='background'>
<div id='ball'></div>
</div>
<script>
var ball = document.querySelector('#ball'),
background = document.querySelector('#background');
background.style.width = "500px";
background.style.height = "500px";
var pw = parseInt(background.style.width);
var ph = parseInt(background.style.height);
ball.style.left = (pw / 2 - 20) + 'px';
ball.style.top = (ph - 50) + 'px';
var bx = parseInt(ball.style.left);
var by = parseInt(ball.style.top);
var isSpace = false;
var isLeft = false;
var isRight = false;
var bullets = [];
game();
handleKeys();
function game() {
movePlayer();
window.requestAnimationFrame(game);
}
function movePlayer() {
if (isLeft && bx <= pw - 20) {
bx += 5;
ball.style.left = bx + "px";
}
if (isRight && bx >= 0) {
bx -= 5;
ball.style.left = bx + "px";
}
}
function handleKeys() {
window.addEventListener('keydown', function(e) {
var key = e.which || e.keycode;
e.preventDefault;
if (key === 32) {
isSpace = true;
}
if (key === 37) {
isRight = true;
}
if (key === 39) {
isLeft = true;
}}, false);
window.addEventListener('keyup', function(e) {
var key = e.which || e.keycode;
e.preventDefault;
if (key === 32) {
isSpace = false;
}
if (key === 37) {
isRight = false;
}
if (key === 39) {
isLeft = false;
}}, false);
}
function Bullet() {
this.bull = document.createElement('div');
this.color = 'green';
this.bull.style.background = this.color;
this.render = function() {
this.width = 3;
this.height = 5;
this.x = bx + 9;
this.y = by;
this.vy = 5;
this.canShoot = false;
this.bull.style.position = "absolute";
this.bull.style.width = this.width + "px";
this.bull.style.height = this.height + "px";
this.bull.style.left = this.x + "px";
this.bull.style.top = this.y + "px";
plan.appendChild(this.bull);
}
this.fire = function () {
this.y -= this.vy;
this.bull.style.top = this.y + "px";
}
this.delete = function() {
plan.removeChild(this.bull);
}
}
</script>
