Added Image Loading and first character sprite

gamkedo-la · Feb 4, 2025 · 23df29f · 23df29f
1 parent 933ea1c
commit 23df29f
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 2 deletions.
diff --git a/vince_mckeown/Dungeon Crawler/js/main.js b/vince_mckeown/Dungeon Crawler/js/main.js
@@ -40,6 +40,7 @@ window.onload = function() {
 		canvasContext.fill();
 
 		canvasContext.restore();
+
 	}	
 
 	canvas.addEventListener('mousemove', function(evt) {

diff --git a/vince_mckeown/topdownRPG/imageLoading.js b/vince_mckeown/topdownRPG/imageLoading.js
@@ -0,0 +1,47 @@
+var spriteSheet1Pic = document.createElement("img");
+var spriteCharacterPic = document.createElement("img");
+var spriteEnemyPic = document.createElement("img");
+
+//var titlepagePic = document.createElement("img");
+var tilePics = [];
+
+
+var picsToLoad = 0;
+
+function countLoadedImagesAndLaunchIfReady(){
+		picsToLoad--;
+		console.log(picsToLoad);
+		if(picsToLoad == 0) {
+			imageLoadingDoneSoStartGame();
+	}
+}
+
+function beginLoadingImage(imgVar, fileName) {
+	imgVar.onload = countLoadedImagesAndLaunchIfReady;
+	imgVar.src = "images/" + fileName;
+}
+
+function loadImageForRoomCode(tileCode, fileName)  {
+	tilePics[tileCode] = document.createElement("img");
+	beginLoadingImage(tilePics[tileCode], fileName);	
+}
+
+function loadImages() {
+
+		var imageList = [
+			{varName: warriorPic, theFile: "spriteSheet1.png"},
+			{varName: spriteCharacterPic, theFile: "spritePlayer.png"},
+			{varName: spriteEnemyPic, theFile: "spriteEnemy.png"},
+		];
+
+	picsToLoad = imageList.length;
+
+	for(var i=0; i<imageList.length; i++) {
+		if(imageList[i].trackType != undefined){
+			loadImageForRoomCode(imageList[i].trackType, imageList[i].theFile);
+		}
+		else {
+			beginLoadingImage(imageList[i].varName, imageList[i].theFile);
+		}
+	}
+}
diff --git a/vince_mckeown/topdownRPG/main.js b/vince_mckeown/topdownRPG/main.js
@@ -6,13 +6,12 @@ player.levelUp();
 
 const goblin = new Monster("Goblin", 300, 200, 30, 5, 20);
 enemies.push(goblin);
+
 console.log(`${goblin.name} is lurking in the woods...`);
 goblin.attack(player);
 
 console.log(`${player.name} now has ${player.health} HP.`);
 
-const canvas = document.getElementById('gameCanvas');
-const ctx = canvas.getContext('2d');
 
 // Game state
 const gameState = {
@@ -27,6 +26,13 @@ const keys = {
     right: false,
 };
 
+window.onload = function() {
+    canvas = document.getElementById('gameCanvas');
+    ctx = canvas.getContext('2d');
+
+    loadImages();
+}
+
 document.addEventListener('keydown', (event) => {
     if (event.key === 'ArrowUp') keys.up = true;
     if (event.key === 'ArrowDown') keys.down = true;

diff --git a/vince_mckeown/topdownRPG/towndown.html b/vince_mckeown/topdownRPG/towndown.html
@@ -11,6 +11,7 @@
 </head>
 <body>
     <canvas id="gameCanvas" width="800" height="600"></canvas>
+    <script src="imageLoading.js"></script>
     <script src="entity.js"></script> 
     <script src="player.js"></script>
     <script src="enemy.js"></script>

diff --git a/vince_mckeown/wizard.png b/vince_mckeown/wizard.png
-Original file line number
+Diff line change
@@ Expand Up / @@ -40,6 +40,7 @@ window.onload = function() { @@
     		canvasContext.fill();
     		canvasContext.restore();
     	}
     	canvas.addEventListener('mousemove', function(evt) {
@@ Expand Down @@