Model Score Lives

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);
+let player1 = new PlayerObject(100, 100);
+
+function drawNewText(txt, x, y, color){
+    ctx.font = "20px Arial";
+    ctx.fillStyle = color;
+    ctx.fillText(txt, x, y);
+}