lostdecade · pm0d · Mar 9, 2018 · May 29, 2018 · Mar 3, 2019 · Mar 3, 2019
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
-# How to make a simple HTML5 Canvas game
+# A simple HTML5 Canvas game
 
-Build your first HTML5 Canvas game in no time! [Read the whole article here.](http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/)
+A HTML5 Canvas game based on this [article](http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/).
 
-* Subscribe to the [Lost Decade Games blog](http://www.lostdecadegames.com/rss.xml)
-* Listen to [Lostcast](http://www.lostdecadegames.com/lostcast/), the indie game dev podcast
-* Follow us [@LostDecadeGames](https://twitter.com/LostDecadeGames)
+Play it here --> https://pm0d.github.io/catch-the-goblins/
+
+<img width="409" alt="image" src="https://github.com/pm0d/catch-the-goblins/assets/20861876/53e43dfd-ff41-4c0a-8454-98cf4122a1f0">
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,50 @@
+html,
+body {
+    background: url('../images/page_background.png') center repeat;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: #fff;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+}
+#game-wrapper {
+    position: relative;
+    width: 512px;
+    height: 480px;
+    margin: 25px auto;
+}
+#game-sidebarright {
+    position: absolute;
+    top: 0;
+    right: -130px;
+    height: 200px;
+    padding: 0 10px;
+    text-align: left;
+}
+#game-sidebarleft {
+    position: absolute;
+    top: 0;
+    left: -140px;
+    height: 200px;
+    padding: 0 10px;
+    text-align: left;
+}
+h1 {
+    font-size: 32px;
+    font-weight: normal;
+    margin: 0;
+    padding: 0 0 10px 0;
+}
+h3 {
+    font-size: 16px;
+    font-weight: normal;
+    margin: 0;
+    padding: 0 0 10px 0;
+}
+div {
+    font-size: 12px;
+    text-align: left;
+}
+.icon {
+    padding: 10px;
+}
diff --git a/dinosaur.png b/dinosaur.png
diff --git a/images/dinosaur.png b/images/dinosaur.png
diff --git a/images/page_background.png b/images/page_background.png
diff --git a/index.html b/index.html
@@ -1,10 +1,45 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8">
-		<title>Simple Canvas Game</title>
-	</head>
-	<body>
-		<script src="js/game.js"></script>
-	</body>
-</html>
+
+<head>
+	<meta charset="utf-8">
+	<meta name="author" content="Pramod Ghuge">
+	<meta name="keywords" content="Vikings, Goblins, adventure, game, dragons, treasure, princess, html5, canvas">
+	<title>Vikings vs Goblin</title>
+	<link rel="stylesheet" href="css/style.css" type="text/css" />
+</head>
+
+<body>
+	<h1>Vikings vs Goblins</h1>
+	<div id="game-wrapper">
+		<div id="game-sidebarright">
+			<div><h3>Time played</h3></div>
+			<div id="timer"></div>
+			<br>
+			<div><h3>Current score</h3></div>
+			<div id="score"></div>
+		</div>
+		<div id="game-sidebarleft">
+			<h3>Instructions</h3>
+			<div>
+				<span class="icon fa fa-arrow-right"></span>
+				move right
+			</div>
+			<div>
+				<span class="icon fa fa-arrow-left"></span>
+				move left
+			</div>
+			<div>
+				<span class="icon fa fa-arrow-up"></span>
+				move up
+			</div>
+			<div>
+				<span class="icon fa fa-arrow-down"></span>
+				move down
+			</div>
+		</div>
+	</div>
+	<script src="js/game.js"></script>
+</body>
+
+</html>
diff --git a/js/game.js b/js/game.js
@@ -3,7 +3,12 @@ var canvas = document.createElement("canvas");
 var ctx = canvas.getContext("2d");
 canvas.width = 512;
 canvas.height = 480;
-document.body.appendChild(canvas);
+canvas.id = "game-block";
+document.getElementById('game-wrapper').appendChild(canvas);
+
+// Time elapsed from start
+var currentTime = new Date().getTime();
+var elapsed, minutes, seconds;
 
 // Background image
 var bgReady = false;
@@ -29,55 +34,67 @@ monsterImage.onload = function () {
 };
 monsterImage.src = "images/monster.png";
 
+
 // Game objects
 var hero = {
 	speed: 256 // movement in pixels per second
 };
+hero.x = canvas.width / 2;
+hero.y = canvas.height / 2;
 var monster = {};
 var monstersCaught = 0;
 
 // Handle keyboard controls
 var keysDown = {};
 
-addEventListener("keydown", function (e) {
-	keysDown[e.keyCode] = true;
-}, false);
-
-addEventListener("keyup", function (e) {
-	delete keysDown[e.keyCode];
-}, false);
+addEventListener(
+	"keydown",
+	function (e) {
+		keysDown[e.keyCode] = true;
+	},
+	false
+);
+
+addEventListener(
+	"keyup",
+	function (e) {
+		delete keysDown[e.keyCode];
+	},
+	false
+);
 
 // Reset the game when the player catches a monster
 var reset = function () {
-	hero.x = canvas.width / 2;
-	hero.y = canvas.height / 2;
-
-	// Throw the monster somewhere on the screen randomly
-	monster.x = 32 + (Math.random() * (canvas.width - 64));
-	monster.y = 32 + (Math.random() * (canvas.height - 64));
+	// Place the monster somewhere on the screen randomly
+	monster.x = Math.random() * (canvas.width - 80) + 32;
+	monster.y = Math.random() * (canvas.height - 80) + 32;
 };
 
 // Update game objects
 var update = function (modifier) {
-	if (38 in keysDown) { // Player holding up
+	if (38 in keysDown && hero.y >= 32) {
+		// Player holding up
 		hero.y -= hero.speed * modifier;
 	}
-	if (40 in keysDown) { // Player holding down
+	if (40 in keysDown && hero.y <= canvas.height - 65) {
+		// Player holding down
 		hero.y += hero.speed * modifier;
 	}
-	if (37 in keysDown) { // Player holding left
+	if (37 in keysDown && hero.x >= 32) {
+		// Player holding left
 		hero.x -= hero.speed * modifier;
 	}
-	if (39 in keysDown) { // Player holding right
+	if (39 in keysDown && hero.x <= canvas.width - 65) {
+		// Player holding right
 		hero.x += hero.speed * modifier;
 	}
 
 	// Are they touching?
 	if (
-		hero.x <= (monster.x + 32)
-		&& monster.x <= (hero.x + 32)
-		&& hero.y <= (monster.y + 32)
-		&& monster.y <= (hero.y + 32)
+		hero.x <= monster.x + 32 &&
+		monster.x <= hero.x + 32 &&
+		hero.y <= monster.y + 32 &&
+		monster.y <= hero.y + 32
 	) {
 		++monstersCaught;
 		reset();
@@ -99,32 +116,44 @@ var render = function () {
 	}
 
 	// Score
-	ctx.fillStyle = "rgb(250, 250, 250)";
-	ctx.font = "24px Helvetica";
-	ctx.textAlign = "left";
-	ctx.textBaseline = "top";
-	ctx.fillText("Goblins caught: " + monstersCaught, 32, 32);
+	ctx.fillStyle = "rgb(255, 255, 255)";
+	ctx.font = "12px Arial";
+	ctx.textAlign = "right";
+	//ctx.fillText(minutes + "m " + seconds + "s ", canvas.width - 16, 16);
+	//ctx.fillText("Goblins caught: " + monstersCaught, canvas.width - 16, canvas.height - 16);
+	document.getElementById("score").innerHTML = monstersCaught + " Goblins";
 };
 
 // The main game loop
 var main = function () {
 	var now = Date.now();
 	var delta = now - then;
-
 	update(delta / 1000);
 	render();
-
 	then = now;
 
+	// Find the elapsed time between now and start timestamp
+	elapsed = now - currentTime;
+
+	// Time calculations for minutes and seconds
+	minutes = Math.floor((elapsed % (1000 * 60 * 60)) / (1000 * 60));
+	seconds = Math.floor((elapsed % (1000 * 60)) / 1000);
+	//var playedtime = ;
+	document.getElementById("timer").innerHTML = minutes + "m " + seconds + "s ";
+
 	// Request to do this again ASAP
 	requestAnimationFrame(main);
 };
 
 // Cross-browser support for requestAnimationFrame
 var w = window;
-requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
+requestAnimationFrame =
+	w.requestAnimationFrame ||
+	w.webkitRequestAnimationFrame ||
+	w.msRequestAnimationFrame ||
+	w.mozRequestAnimationFrame;
 
 // Let's play this game!
 var then = Date.now();
 reset();
-main();
+main();