added fire and a stub for level 5

src/js/assets.js

@@ -3,14 +3,16 @@ const ProgressBar=require('progress');
 const assetSpecs=[
 	{ name: 'fruit',     filename: 'apple32.png',    type: 'image' },
 	{ name: 'wall',      filename: 'wall32.png',     type: 'image' },
-	{ name: 'hole',      filename: 'hole-ts.png',     type: 'image' },
+	{ name: 'hole',      filename: 'hole-ts.png',    type: 'image' },
+	{ name: 'fire',      filename: 'fire-anim.png',  type: 'image' },
 	{ name: 'snake',     filename: 'snake.json',     type: 'json'  },
 	{ name: 'levelList', filename: 'levelList.json', type: 'json'  },
 	{ name: 'config',    filename: 'config.json',    type: 'json'  }
 ];
 
 const tasks=[
-	{ from: 'hole', type: 'tileset', tiles: ['base', 'ul', 'dr', 'dl', 'ur', 'l', 'r', 'd', 'u'], steps: 9 }
+	{ from: 'hole', type: 'tileset', tiles: ['base', 'ul', 'dr', 'dl', 'ur', 'l', 'r', 'd', 'u'], steps: 3 },
+	{ from: 'fire', type: 'animation', steps: 6 }
 ];
 
 const cvs=document.createElement('canvas');
@@ -32,7 +34,7 @@ bar.addReadyListener(() => {
 });
 
 //XXX purposefully slow down asset loading
-const sleep=(ms=1000) => new Promise(ok => setTimeout(ok, ms*Math.random()));
+const sleep=(ms=500) => new Promise(ok => setTimeout(ok, ms*Math.random()));
 
 const loadAsset=async (asset) => {
 	const response=await fetch('assets/'+asset.filename);
@@ -75,8 +77,23 @@ let readyListeners=[];
 				for(let tId in task.tiles) {
 					const tName=task.tiles[tId];
 					asset[tName]=await createImageBitmap(source, 0, source.width*tId, source.width, source.width);
-					await sleep(100);
-					bar.update();
+					if(tId%(task.tiles.length/task.steps)==0) {
+						await sleep(100);
+						bar.update();
+					}
+				}
+				break;
+			}
+			
+			case 'animation': {
+				let anim=assets[task.from]=[];
+				let frameCount=source.height/source.width;
+				for(let i=0; i<frameCount; i++) {
+					anim[i]=await createImageBitmap(source, 0, source.width*i, source.width, source.width);
+					if(i%(frameCount/task.steps)==0) {
+						await sleep(100);
+						bar.update();
+					}
 				}
 				break;
 			}

src/js/snek.js

@@ -1,4 +1,4 @@
-const [EMPTY, FOOD, WALL, HOLE, HOLE_S, SNAKE]=Array(6).keys();
+const [EMPTY, FOOD, WALL, FIRE, HOLE, HOLE_S, SNAKE]=Array(7).keys();
 
 class SnekGame {
 	constructor(settings, canvas, rules) {
@@ -19,6 +19,7 @@ class SnekGame {
 							case 'f': return FOOD;
 							case 'w': return WALL;
 							case 'o': return HOLE;
+							case 'i': return FIRE;
 						}
 					})();
 				}
@@ -53,6 +54,9 @@ class SnekGame {
 			// add the holes
 			if(settings.holes) settings.holes.forEach(([x, y]) => this.world[x][y]=HOLE);
 
+			// add the fires
+			if(settings.fires) settings.fires.forEach(([x, y]) => this.world[x][y]=FIRE);
+
 			// add the food
 			settings.food.forEach(([x, y]) => this.world[x][y]=FOOD);
 			this.fruits=[...settings.food];
@@ -122,7 +126,7 @@ class SnekGame {
 		// draw our walls
 		const wall=assets.get('wall');
 		const hole=assets.get('hole');
-
+		const fire=assets.get('fire');
 		const putTile=(x, y, tile) => this.ctx.drawImage(
 			tile,
 			offsetX+cellSize*x,
@@ -149,6 +153,10 @@ class SnekGame {
 						putTile(x, y, wall);
 						break;
 
+					case FIRE:
+						putTile(x, y, fire[Math.floor(Date.now()/1000*60)%60]);
+						break;
+
 					case HOLE: 
 					case HOLE_S: {
 						putTile(x, y, hole.base);
@@ -253,6 +261,7 @@ class SnekGame {
 		switch(this.world[head[0]][head[1]]) {
 			// you hit, you die
 			case WALL:
+			case FIRE:
 			case SNAKE:
 			case HOLE_S:
 				return this.die();