diff --git a/Script.js b/Script.js index 76108ac..257f9c6 100644 --- a/Script.js +++ b/Script.js @@ -21,6 +21,9 @@ var keys = { fire: false } +var playerShipImg = new Image(); +playerShipImg.src = 'img/pixelShip.png' + window.onload = function () { init() } @@ -86,8 +89,11 @@ function updateGame() { game.frames++; } -function drawGame() { +function drawGame(){ player1.draw(); + + drawNewText('Score: ' +player1.score, 30, 610, 'white'); + drawNewText('Player Lives: ' +player1.lives, 1100, 610, 'white'); } function gameLoop(timestamp){ @@ -101,30 +107,51 @@ class PlayerObject{ constructor(x, y){ this.x = x; this.y = y; - this.width = 150; - this.height = 150; - this.color = 'blue'; - this.speed = 5; + this.width = 170; + this.height = 105; + this.image = playerShipImg; + this.speed = 8; this.lives = 3; this.score = 0; this.health = 100; } draw(){ ctx.save(); - ctx.fillStyle = this.color; - ctx.fillRect(this.x, this.y, this.width, this.height); - ctx.fill(); + ctx.drawImage(this.image, this.x, this.y, this.width, this.height); ctx.restore(); } + update(){ - if(keys.up){ + if (keys.up) { + if(this.y > 0){ this.y -= this.speed; + } } - else if (keys.down){ + else if (keys.down) { + if (this.x < canvasWidth - this.width) { this.y += this.speed; + } + } + + if (keys.right) { + if (this.x < canvasWidth - this.width) { + this.x += this.speed; + } + } + + if (keys.left) { + if (this.x > 10) { + this.x -= this.speed; + } } } } -let player1 = new PlayerObject(100,100); \ No newline at end of file +let player1 = new PlayerObject(100, 100); + +function drawNewText(txt, x, y, color){ + ctx.font = "20px Arial"; + ctx.fillStyle = color; + ctx.fillText(txt, x, y); +} \ No newline at end of file diff --git a/img/pixelShip.png b/img/pixelShip.png new file mode 100644 index 0000000..eedda0f Binary files /dev/null and b/img/pixelShip.png differ