Lode Runner version 2.21c, AI_VERSION=4

(1) Add gamepad support:
   (1.1) xinput controller is better, Microsoft Edge only support Xinput devices
   (1.2) Browser support tables: http://caniuse.com/#feat=gamepad
   (1.3) gamepad test page: http://html5gamepad.com/

(2) Add color themes selection
(3) More control key support: add "QWE ASD" and ",." keyboard support
(4) Rewrite editor function for more compatible with browser
(5) Maybe get bigger play screen, change scale step from 25% to %5

lodeRunner.colorSelector.js

@@ -0,0 +1,333 @@
+function colorSelectorClass(_screenX1, _screenY1, baseX)
+{
+	var radius = baseX*3/4|0;
+	var px = (baseX *7/5)|0;
+	var py = (baseX *7/5)|0;
+	var left = screenBorder;
+	var top =  baseX/4|0;
+	
+	var colorCanvas, colorStage;
+	var colorSelector;
+	var colorShape=[]; 
+	var activeCircle;
+	
+	var smallScale = 0.4;
+	var colorSelectorIsSmall = 0;
+	
+	var outFocusTimer = null;
+	var colorStageTicker = null;
+	
+	var self = this;
+	var enabled = 0;
+	
+	var bgColor= backgroundColor;
+	
+	init();
+	
+	function init()
+	{
+		createColorCanvas();
+		createColorSelector();
+	}
+
+	this.enable = function ()
+	{
+		if(enabled) return;
+
+		enabled = 1;
+		colorSelector.set({alpha:1});
+		colorStage.enableMouseOver(30);
+		colorStage.update();
+	}
+	
+	this.disable = function (hidden)
+	{
+		enabled = 0;
+		if(hidden) {
+			colorSelector.set({alpha:0});
+		} else {
+			colorSelector.set({alpha:1})
+		}
+		colorStage.enableMouseOver(0);
+		colorStage.update();
+	}
+	
+	this.themeChange = function()
+	{
+		for(var i=0; i < maxThemeColor;i++) {
+			setColorShape(colorShape[i], i, pinker(getThemeTileColor(i)) );
+		}
+		setActiveCircle();
+		colorStage.update();
+	}
+	
+	this.activeColorChange = function()
+	{
+		setActiveCircle();
+		colorStage.update();
+	}
+
+	function createColorCanvas()
+	{
+		colorCanvas = document.createElement('canvas');
+		colorCanvas.id = "theme_color_selector";
+		colorCanvas.width  = px * 2;
+		colorCanvas.height = py * 2;
+		colorCanvas.style.left = left + "px";
+		colorCanvas.style.top =  top + "px";
+		colorCanvas.style.position = "absolute";
+		document.body.appendChild(colorCanvas);
+	}	
+	
+	function createColorSelector()
+	{
+		var bgCircle = new createjs.Shape();
+		colorStage = new createjs.Stage(colorCanvas);
+		colorSelector = new createjs.Container();
+
+		bgCircle.graphics.beginFill(bgColor).drawCircle(px,py, radius*5/3|0);
+		colorSelector.addChild(bgCircle);
+		//colorSelector.regY =radius*5/3*2;
+		//colorSelector.y = radius*5/3*2;
+		
+		addColorShape();
+		setColorSelectorMouseEvent();
+		colorSelectorTransform(1);
+		
+		addActiveCircle();
+		setActiveCircleMouseEvent();
+
+		colorSelector.set({alpha:0}); //disabled
+		colorStage.addChild(colorSelector);
+		colorStage.update();
+	}
+	
+//= 2 =========================
+	
+	function addColorShape()
+	{
+		for(var i=0; i < maxThemeColor;i++) createColorShape(i);
+		for(var i=0; i < maxThemeColor;i++)	createBGBar(i);
+		
+		function createColorShape(id)
+		{
+			var color = pinker( getThemeTileColor(i));
+			colorShape[id] = new createjs.Shape();
+			setColorShape(colorShape[id], id, color);
+			setColorShapeMouseEvent(colorShape[id], id)
+			colorSelector.addChild(colorShape[id]);
+		}	
+		
+		function createBGBar(id)
+		{
+			var s = Math.PI*2/5 + (2*Math.PI) * id/5;
+			var bar = new createjs.Shape();
+
+			bar.graphics.setStrokeStyle(baseX/6|0)
+			.beginStroke(bgColor).moveTo(px, py)
+			.lineTo(px+ Math.sin(s)*radius*3/2, py+Math.cos(s)*radius*3/2)
+			.endStroke();
+			colorSelector.addChild(bar);
+		}
+	}
+
+	function setColorSelectorMouseEvent()
+	{
+		colorSelector.on("mouseover", mouseOver);
+		colorSelector.on("mouseout", mouseOut);
+		colorSelector.on("click", mouseClick);
+
+		function mouseOver()
+		{
+			if(gameState == GAME_PAUSE || (gameState == GAME_WAITING && playMode != PLAY_EDIT)) {
+				colorSelector.cursor = "default";
+				return;
+			}
+			if(colorSelectorIsSmall) {
+				colorSelector.cursor = "pointer";
+				return;
+			}
+			setTransformTimeout(0); //clear timeout
+		}
+		
+		function mouseOut()
+		{
+			if(colorSelectorIsSmall) return;
+			setTransformTimeout(1); //set timeout
+		}
+		
+		function mouseClick()
+		{
+			if(gameState == GAME_PAUSE || (gameState == GAME_WAITING && playMode != PLAY_EDIT)) return;
+			if(!colorSelectorIsSmall) return;
+			colorSelectorTransform(0);
+		}
+	}
+	
+	function addActiveCircle()
+	{
+		activeCircle = new createjs.Shape();
+		colorSelector.addChild(activeCircle);
+		setActiveCircle();
+	}
+	
+	function setActiveCircleMouseEvent()
+	{
+		activeCircle.on("mouseover", function(){
+			if(gameState == GAME_PAUSE || (gameState == GAME_WAITING && playMode != PLAY_EDIT)) return;
+			if(colorSelectorIsSmall) return; 
+			colorSelector.cursor = "pointer";
+		});
+		activeCircle.on("mouseout", function(){
+			if(colorSelectorIsSmall) return; 
+			colorSelector.cursor = "default";
+		});
+		activeCircle.on("click",function() {
+			if(gameState == GAME_PAUSE || (gameState == GAME_WAITING && playMode != PLAY_EDIT)) return;
+			if(colorSelectorIsSmall) return;
+			setTransformTimeout(0); //clear timeout
+			colorSelectorTransform(0); //transform to small
+		});
+	}
+	
+	function colorSelectorTransform(immediate)
+	{
+		if(colorSelectorIsSmall) {
+			colorCanvas.width = px * 2; 
+			colorCanvas.height = py * 2; 
+			if(immediate) {
+				colorSelector.scaleX = colorSelector.scaleY = 1;
+				colorSelectorIsSmall = 0;
+				colorSelector.cursor = "default";
+			} else {
+				createjs.Tween.get(colorSelector)
+				.to({scaleX: 1, scaleY: 1}, 100)
+				.call(function(){
+					colorSelectorIsSmall = 0; 
+					setActiveCircle();
+					colorSelector.cursor = "default";
+					createjs.Ticker.off("tick", colorStageTicker);
+					colorStageTicker = null;
+					colorStage.update();
+				});
+				colorStageTicker = createjs.Ticker.on("tick", colorStage);
+			}
+			
+		} else {
+			if(immediate) {
+				colorSelector.scaleX = colorSelector.scaleY = smallScale;
+				colorSelectorIsSmall = 1;
+				colorSelector.cursor = "pointer";
+				
+				colorCanvas.width = px * 2 * smallScale; 
+				colorCanvas.height = py * 2 * smallScale; 
+			} else {
+				createjs.Tween.get(colorSelector)
+				.to({scaleX: smallScale, scaleY: smallScale}, 100)
+				.call(function(){
+					colorCanvas.width = px * 2 * smallScale; 
+					colorCanvas.height = py * 2 * smallScale; 
+					
+					colorSelectorIsSmall = 1; 
+					//setActiveCircle();
+					//self.themeChange();
+					colorSelector.cursor = "pointer";
+					createjs.Ticker.off("tick", colorStageTicker);
+					colorStageTicker = null;
+					colorStage.update();
+				});
+				colorStageTicker = createjs.Ticker.on("tick", colorStage);
+			}
+		}
+	}	
+	
+//= 3 ===========================	
+	
+	function pinker(hexColor)
+	{
+		var orgRGB = hexToRGB(hexColor);
+		var percent = 1/2, whitePercent = 1-percent;
+		for(var i=0; i < 3; i++) {
+			orgRGB[i] = (orgRGB[i]*percent+255*whitePercent)|0;
+			if(orgRGB[i]>255) orgRGB[i]=255;
+		}
+		return rgbToHex(orgRGB)
+	}
+	
+	function setColorShape(shape, id, color)
+	{
+		var s = (2*Math.PI) * id/5-(Math.PI)*7/10+(Math.PI)/40;
+		var e = (2*Math.PI) * (id+1)/5-(Math.PI)*7/10-(Math.PI)/40;
+		
+		shape.graphics.clear().setStrokeStyle(radius-2)
+		.beginStroke(color).arc(px, py, radius, s, e).endStroke();
+	}
+
+	function setColorShapeMouseEvent(shape, id)
+	{
+		shape.on("mouseover", mouseOver, null, false, {id:id});
+		shape.on("mouseout", mouseOut, null, false, {id:id});
+		shape.on("click", mouseClick, null, false, {id:id});
+		
+		function mouseOver(evt, data)
+		{
+			var id = data.id;
+			var curColorId = getCurColorId();
+			
+			if(gameState == GAME_PAUSE || (gameState == GAME_WAITING && playMode != PLAY_EDIT)) return;
+			if(colorSelectorIsSmall) return;
+			
+			colorSelector.cursor = "pointer";
+			setColorShape(colorShape[id], id, getThemeTileColor(id));
+			colorStage.update();
+		}
+		
+		function mouseOut(evt, data)
+		{
+			var id = data.id;
+			var curColorId = getCurColorId();
+			
+			if(gameState == GAME_PAUSE || (gameState == GAME_WAITING && playMode != PLAY_EDIT)) return;
+			if(colorSelectorIsSmall) return;
+			
+			colorSelector.cursor = "default";
+			setColorShape(colorShape[id], id,  pinker(getThemeTileColor(id)));
+			colorStage.update();
+		}
+		
+		function mouseClick(evt, data)
+		{
+			var id = data.id;
+			var curColorId = getCurColorId();
+			
+			if(gameState == GAME_PAUSE || (gameState == GAME_WAITING && playMode != PLAY_EDIT)) return;
+			if(colorSelectorIsSmall || curColorId == id) return;
+			
+			themeColorChange(id);
+			setActiveCircle();
+			colorStage.update();
+		}
+	}	
+	
+	function setTransformTimeout(enable)
+	{
+		//clear timeout
+		if(outFocusTimer) {
+			clearTimeout(outFocusTimer);
+			outFocusTimer = null;
+		}
+		
+		//set timeout
+		if(enable) {
+			outFocusTimer = setTimeout(function(){ colorSelectorTransform(0); }, 1000);
+		}
+	}	
+	
+	function setActiveCircle()
+	{
+		var color = getThemeTileColor(getCurColorId());
+		
+		activeCircle.graphics.clear().beginFill(color).drawCircle(px,py, radius*3/8|0);
+		//activeCircle.alpha = colorSelectorIsSmall?0:1;
+	}	
+}

lodeRunner.colorTheme.js

@@ -0,0 +1,199 @@
+
+var baseBitmapName = [
+	"empty", "brick", "solid", "ladder", "rope",
+	"trapBrick", "hladder", "gold", "redhat", "guard1", "runner1",
+	"runner", "guard", "hole", "ground", "over", "text"
+];
+
+
+var themeColor = {};
+themeColor[THEME_APPLE2] = [
+	null,      //original image color
+	"#60C0A0",
+	"#DD8D5D",
+	"#C080F0",
+	"#FF83BB",
+];
+
+themeColor[THEME_C64] = [
+	null,     //original image color
+	"#DF5050",
+	"#F7993E",
+	"#4A4AFF",
+	"#2E8B57"
+];
+
+var maxThemeColor = themeColor[THEME_APPLE2].length;
+var themeBaseBitmap = {};
+var curColorId = {};
+var orgImageColor = {};
+var themeNameList = [THEME_APPLE2, THEME_C64];
+
+function createBaseBitmapInstance()
+{
+	for(var i = 0; i < themeNameList.length; i++) {
+		var themeName = themeNameList[i];
+		var id = curColorId[themeName];
+		orgImageColor[themeName] = getOrgImageColor(themeName);
+		createThemeBaseBitmap(themeName, hexToRGB(themeColor[themeName][id]), id);
+	}
+	
+	//for edit mode only 
+	themeBaseBitmap["eraser"] = createBitmap("eraser", null, null);
+}
+
+function createThemeBaseBitmap(themeName, newColor, id)
+{
+	var oldColor = orgImageColor[themeName]; //get original image color
+
+	for(var i=0; i < baseBitmapName.length; i++){
+		var imageName = baseBitmapName[i]+themeName;
+		if( (imageName+id) in themeBaseBitmap) 
+			return;
+		themeBaseBitmap[imageName+id] = createBitmap(imageName, oldColor, newColor);
+	}
+}
+
+function getThemeBitmap(name)
+{
+	if(name == "eraser") return themeBaseBitmap[name].clone(); //for edit mode only
+	
+	return themeBaseBitmap[name+ curTheme+curColorId[curTheme]].clone();
+}
+
+function getThemeImage(name) 
+{
+	return preload.getResult(name);
+}
+
+function getThemeTileColor(id)
+{
+	var curId = (typeof id != 'undefined')?id:curColorId[curTheme];
+	
+	if(curId == 0) return rgbToHex(orgImageColor[curTheme]); //original color	
+	
+	return themeColor[curTheme][curId];
+}
+
+function getCurColorId()
+{
+	return curColorId[curTheme];
+}
+
+function getOrgImageColor(themeName)
+{
+	var canvas = document.createElement('canvas');
+	var ctx=canvas.getContext("2d");
+	var stage = new createjs.Stage(canvas);
+	var bitmap = new createjs.Bitmap(getThemeImage("solid"+themeName)); //"solid" as sample image
+	var imgData, orgColor;
+	
+	canvas.width  = bitmap.getBounds().width;
+	canvas.height = bitmap.getBounds().height;
+	stage.addChild(bitmap);	
+	stage.update();
+	stage.cache(0, 0, canvas.width, canvas.height);
+
+	imgData=ctx.getImageData(0, 0, canvas.width, canvas.height);
+	orgColor = [imgData.data[0], imgData.data[1], imgData.data[2] ];
+	stage.uncache();
+	stage.removeAllChildren();
+	stage.update();
+	
+	return orgColor;
+}
+
+function createBitmap(imageName, oldColor, newColor)
+{
+	var bitmap = new createjs.Bitmap(getThemeImage(imageName));
+	var newBitmap;
+	
+	if(newColor != null && (newBitmap = changeBitmapColor(bitmap, oldColor, newColor)) != null)
+		return newBitmap; //color changed
+	else 
+		return bitmap;
+}
+
+function changeBitmapColor(bitmap, oldColor, newColor)
+{
+	var canvas = document.createElement('canvas');
+	var stage = new createjs.Stage(canvas);
+	var changed;
+	
+	canvas.width  = bitmap.getBounds().width;
+	canvas.height = bitmap.getBounds().height;
+	stage.addChild(bitmap);	
+	stage.update();
+	stage.cache(0, 0, canvas.width, canvas.height);
+
+	changed = changeColor(canvas, oldColor, newColor);
+	stage.uncache();
+	stage.removeAllChildren();
+	
+	if(changed) return (new createjs.Bitmap(stage.canvas));
+	else return null;
+}
+
+function changeColor(canvas, oldColor, newColor)
+{
+	var ctx=canvas.getContext("2d");
+	var imgData=ctx.getImageData(0, 0, canvas.width, canvas.height);
+	var data = imgData.data;
+	var bitChanged = 0;
+	
+	for (var i = 0; i < data.length; i += 4) {
+		var red   = data[i + 0];
+		var green = data[i + 1];
+		var blue  = data[i + 2];
+		var alpha = data[i + 3];
+		if(oldColor[0] == red && oldColor[1] == green && oldColor[2] == blue) {
+			data[i+0] = newColor[0];
+			data[i+1] = newColor[1];
+			data[i+2] = newColor[2];
+			bitChanged = 1;
+		}
+	}
+	ctx.putImageData(imgData, 0, 0);
+	return bitChanged;
+}
+
+function themeColorChange(id)
+{
+	var newColor;
+
+	if(curColorId[curTheme] == id) return; //don't need change 
+	
+	newColor = hexToRGB(themeColor[curTheme][id]);
+	curColorId[curTheme] = id;
+	createThemeBaseBitmap(curTheme, newColor, id)
+	themeDataReset(0); //don't need reset sound instance
+	
+	setThemeColor();
+	themeColorObj.activeColorChange();
+	
+	if(playMode == PLAY_EDIT) {
+		if(editLevelModified()) saveTestState();
+		stopEditTicker();
+		startEditMode();		
+	} else {
+		changeThemeScreen(); //real time change theme screen
+	}
+}
+
+function hexToRGB(hex) 
+{
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? [ 
+		parseInt(result[1], 16), 
+		parseInt(result[2], 16), 
+		parseInt(result[3], 16)
+	] : null;
+}
+
+function rgbToHex(rgb)
+{
+	return "#" + 
+		("00" + rgb[0].toString(16)).slice(-2)+
+		("00" + rgb[1].toString(16)).slice(-2)+
+		("00" + rgb[2].toString(16)).slice(-2);
+}

lodeRunner.def.js

@@ -1,4 +1,4 @@
-var VERSION = "2.11a";
+var VERSION = "2.21c";
 var AI_VERSION = 4;
 
 var NO_OF_TILES_X = 28,
@@ -16,7 +16,7 @@ var BASE_SCREEN_X = (NO_OF_TILES_X * BASE_TILE_X);
 var BASE_SCREEN_Y = (NO_OF_TILES_Y * BASE_TILE_Y + GROUND_TILE_Y + TEXT_TILE_Y);
 
 var MIN_SCALE = 0.5,
-	MAX_SCALE = 2;
+	MAX_SCALE = 3;
 
 var MENU_ICON_X = 40, MENU_ICON_Y = 36, ICON_BORDER = 4;
 var BASE_ICON_X = (MENU_ICON_X + ICON_BORDER * 2);
@@ -52,11 +52,16 @@ var KEYCODE_BKSPACE = 8, //backspace
 	
 	KEYCODE_A = 65, //'A'
 	KEYCODE_C = 67, //'C'
+	KEYCODE_D = 68, //'D'
+	KEYCODE_E = 69, //'E'
 	KEYCODE_G = 71, //'G'	
+	KEYCODE_H = 72, //'H'
+	KEYCODE_Q = 81, //'Q'
 	KEYCODE_R = 82, //'R'
 	KEYCODE_S = 83, //'S'
 	KEYCODE_T = 84, //'T'
-	KEYCODE_V = 86; //'V'
+	KEYCODE_V = 86, //'V'
+	KEYCODE_W = 87; //'W'
 
 var	KEYCODE_0 = 48,
 	KEYCODE_1 = 49,
@@ -179,5 +184,7 @@ var STORAGE_PLAYER_NAME = "loderunner_player";
 var STORAGE_UID = "loderunner_uid";
 
 var STORAGE_THEME_MODE = "loderunner_theme";
+var STORAGE_THEME_COLOR = "loderunner_color_";
 
 var STORAGE_REPEAT_ACTION = "loderunner_actRepeat";
+var STORAGE_GAMEPAD_MODE = "loderunner_gamepadMode";

lodeRunner.demo.js

@@ -1,6 +1,6 @@
-/////////////////
+//===============
 // Auto Demo 
-/////////////////
+//===============
 
 var demoRecordIdx, demoGoldIdx, demoBornIdx;
 var	demoTickCount;
@@ -10,9 +10,6 @@ function initAutoDemoRnd()
 {
 	demoRnd = [];
 	demoRnd[0] = new rangeRandom(0, demoData1.length-1, 0); //random range 0 .. demoData1.length-1
-/* auto demo data always use demoData1 (because now can select demo levels from demo mode) , 6/12/2014	
-	demoRnd[1] = new rangeRandom(0, demoData2.length-1, 0); //random range 0 .. demoData1.length-2
-*/	
 }
 
 var demoRecord, demoGoldDrop, demoBornPos;
@@ -22,23 +19,12 @@ function getAutoDemoLevel(initValue)
 	if(initValue) {
 		curScore = 0;	
 		runnerLife = 1;
-/* auto demo data always use demoData1 (because now can select demo levels from demo mode) , 6/12/2014		
-		if(playData == PLAY_DATA_2) { //lode runner 2 demo data
-			demoLevel = 1;
-			demoCount = 1;
-			demoMaxCount = 2;
-			demoData = demoData2;
-			levelData = levelData2;
-			demoIdx = 1;
-		} else { //lode runner 1 demo data
-*/		
 		demoLevel = 1;
 		demoCount = 1;
 		demoMaxCount = 3;
 		demoData = demoData1;
 		levelData = playVersionInfo[0].verData;
 		demoIdx = 0;
-//		}
 	} else {
 		demoLevel++;
 		demoCount++;
@@ -128,29 +114,10 @@ function getDemoBornPos()
 // for demo mode (User select level)
 //====================================
 
-//var playerDemoData = [], noDemoData = [];
-//var wDemoData1 = [], wDemoData2 = [], wDemoData3 = [], wDemoData4 = [], wDemoData5 = []; //temp temp temp
-
 var playerDemoData = [], wDemoData = [];
 var demoPlayData = 0; //for syn demo data with current playData
 var demoDataLoading = 0;
 
-/* No used
-function showGameLoading()
-{
-	lastGameState = gameState;	
-	gameState = GAME_LOADING;
-	showTipsText("Loading ...", 0, 3/4); //display "Loading"
-}
-
-function hideGameLoading()
-{
-	gameState = lastGameState;
-	showTipsText("", 100); //clear text
-	//if(playMode == PLAY_MODERN && gameState == GAME_START ) demoIconObj.enable();
-}
-*/
-
 function initDemoData()
 {
 	demoPlayData = playData;
@@ -172,47 +139,8 @@ function setDemoData(jsonTxt)
 	}
 	demoDataLoading = 0; 
 	if(playMode == PLAY_MODERN && gameState == GAME_START ) demoIconObj.enable();
-
-	//hideGameLoading();
 }
 
-/*
-function initDemoModeVariable()
-{
-	for(var i = 0; i < maxPlayId; i++) {
-		playerDemoData[i] = [];
-		noDemoData[i] = 1;
-		//wHighScore[i] = [];
-	}
-
-	
-	for(var i = 0; i < wDemoData1.length; i++) { //temp
-		playerDemoData[0][wDemoData1[i].level-1] = wDemoData1[i]; 
-	}
-	
-	for(var i = 0; i < wDemoData2.length; i++) { //temp
-		playerDemoData[1][wDemoData2[i].level-1] = wDemoData2[i]; 
-	}
-	
-	for(var i = 0; i < wDemoData3.length; i++) { //temp
-		playerDemoData[2][wDemoData3[i].level-1] = wDemoData3[i]; 
-	}
-	
-	for(var i = 0; i < wDemoData4.length; i++) { //temp
-		playerDemoData[3][wDemoData4[i].level-1] = wDemoData4[i]; 
-	}
-	
-	for(var i = 0; i < wDemoData5.length; i++) { //temp
-		playerDemoData[4][wDemoData5[i].level-1] = wDemoData5[i]; 
-	}
-	
-	for(var i = 0; i < maxPlayId; i++) {
-		if(playerDemoData[i].length > 0) noDemoData[i] = 0; 
-	}
-}
-*/
-
-
 function initDemoInfo()
 {
 	var idx = curLevel - 1;
@@ -289,7 +217,6 @@ function getNextDemoLevel()
 function curDemoLevelIsVaild()
 {
 	if(playData == PLAY_DATA_USERDEF) return 0;
-	//return (typeof playerDemoData[playData-1][curLevel-1] != "undefined");
 	return (typeof playerDemoData[curLevel-1] != "undefined");
 }
 
@@ -335,28 +262,6 @@ function respUpdatePlayerDemoData(jsonTxt)
 	}
 }
 
-/*
-function updatePlayerDemoData(playData, demoDataInfo)
-{
-	var updateDemoData = playerDemoData[playData-1];
-	var level = demoDataInfo.level;
-	
-	if(updateDemoData == null) updateDemoData = [];
-	
-	updateDemoData[level-1] = { 
-		level: demoDataInfo.level, 
-		ai: demoDataInfo.ai, 
-		time: demoDataInfo.time, 
-		state: demoDataInfo.state,
-		action: demoDataInfo.action,
-		goldDrop: demoDataInfo.goldDrop,
-		bornPos: demoDataInfo.bornPos,
-		godMode: demoDataInfo.godMode
-	};
-	noDemoData[playData-1] = 0;
-}
-*/
-
 //==============================
 // Record play action for demo
 //==============================
@@ -409,6 +314,7 @@ function saveKeyCode(code, keyAction)
 function recordModeDump(state)
 {
 	recordPlayTime(state);
+	remapActionKey();
 	convertBornPos();
 	dumpRecord();
 }
@@ -481,11 +387,6 @@ var recordIdx;
 function recordPlayDemo()
 {
 	if(recordIdx < playRecord.length) {
-		/*
-		if(playRecord[recordIdx].count == recordCount) {
-			loadingTxt.text = recordIdx;
-			pressKey(playRecord[recordIdx++].code);
-		}*/
 		if(playRecord[recordIdx*2] == recordCount) {
 			//loadingTxt.text = recordIdx;  //for debug
 			pressKey(playRecord[recordIdx*2+1]);
@@ -528,6 +429,31 @@ function recordPlayTime(state)
 	recordState = (state == GAME_FINISH)?1:0; //finish or dead
 }
 
+var actionKeyMapping = [
+	[ KEYCODE_A, KEYCODE_LEFT],  //move left
+	[ KEYCODE_D, KEYCODE_RIGHT], //move right
+	[ KEYCODE_W, KEYCODE_UP],    //move up
+	[ KEYCODE_S, KEYCODE_DOWN],  //move down
+	[ KEYCODE_Q, KEYCODE_Z],     //dig left
+	[ KEYCODE_E, KEYCODE_X],     //dig right
+	[ KEYCODE_COMMA, KEYCODE_Z], //dig left
+	[ KEYCODE_PERIOD, KEYCODE_X] //dig right
+];
+
+//Remap action key to orignal "left, right, up down and Z, X"
+//for backward compatible
+function remapActionKey()
+{
+	for(var i = 0; i < playRecord.length; i+=2){
+		for(var j = 0; j < actionKeyMapping.length; j++) {
+			if(actionKeyMapping[j][0] == playRecord[i+1]) {
+				playRecord[i+1] = actionKeyMapping[j][1];
+				break;
+			}
+		}
+	}
+}
+
 function convertBornPos()
 {
 	var len, offset = 1;

lodeRunner.edit.js

@@ -4,6 +4,7 @@ var editMap;
 	
 var MAX_EDIT_GUARD = 5;     //maximum number of guards
 var EMPTY_ID = 0, GUARD_ID = 8, RUNNER_ID = 9;
+var EDIT_PADDING = 1;
 
 //value | Character | Type
 //------+-----------+-----------
@@ -18,6 +19,8 @@ var EMPTY_ID = 0, GUARD_ID = 8, RUNNER_ID = 9;
 //  0x8 |     0     | Guard
 //  0x9 |     &     | Player
 
+var tileIdMapping = { ' ':0, '#':1, '@':2, 'H':3, '-':4, 'X':5, 'S':6, '$':7, '0':8, '&':9 };
+
 var tileInfo = [
 	[ "eraser",   ' ' ], //(0), empty
 	[ "brick",    '#' ], //(1)
@@ -36,27 +39,39 @@ var lastRunner = null;
 var lastGuardList = [];	
 var editBorder, editStartX;
 var testLevelInfo = {level: -1};
+
 var mouseInStage = 1;
+//var mouseOver = 0;	
+var mouseDown = 0;
+var lastDown = {x:-1, y:-1};
+
+var testButton, newButton, saveButton, loadButton;
+var editorTile =[], editorActiveTileId = -1;
+var editorButton = [], editorButtonMouseOverId = -1;
+var editInNarrowScreen = 0;
 
 function startEditMode() 
 {
-	soundIconObj.disable(1);
-	repeatActionIconObj.disable(1);
 	playMode = PLAY_EDIT;
 	playData = PLAY_DATA_USERDEF; //for title name only
 	mainStage.removeAllChildren();
-	//document.onkeydown = function() { return true; };
 	document.onkeydown = editHandleKeyDown;
 	
-	////getEditLevelInfo(); //move to main.js
+	editInNarrowScreen = canvasEditReSize();
+	
+	soundIconObj.disable(1);
+	repeatActionIconObj.disable(1);
+	if(editInNarrowScreen) themeColorObj.disable(1);
+	//if(gamepadIconObj) gamepadIconObj.disable(1);
+	
+	
 	setEditSelectMenu();
 	
-	canvasEditReSize();
 	createBaseTile();
 	createEditMap();
 	startEditTicker();
 	setButtonState();
-	initForPlay();      // 1/19/2015
+	initForPlay();
 }
 
 function setEditSelectMenu()
@@ -65,52 +80,12 @@ function setEditSelectMenu()
 	else selectIconObj.disable(1);
 }
 
-function back2EditMode(rc)
-{
-	if(rc == 1) { //pass
-		testLevelInfo.pass = 1;
-		setTestLevel(testLevelInfo);
-		//enableSaveButton();
-	} else { //fail
-		//if(testLevelInfo.pass && !testLevelInfo.modified) enableSaveButton();
-	}
-	startEditMode();
-	//setButtonState();
-}
-
-function saveTestState()
-{
-	map2LevelData();
-	setTestLevel(testLevelInfo);
-}
-
-function startTestMode()
-{
-	playMode = PLAY_TEST;
-	playData = PLAY_DATA_USERDEF;
-	
-	curLevel = testLevelInfo.level;
-	stopEditTicker();
-	saveTestState();
-	canvasReSize();
-	document.onkeydown = handleKeyDown; //key press
-	selectIconObj.disable(1);
-	initShowDataMsg();
-	startGame();
-}
-
-function getTestLevelMap(initValue)
-{
-	return testLevelInfo.levelMap;
-}
-
-var EDIT_PADDING = 1;
-
 function canvasEditReSize()
 {
 	var menuIconAreaX = screenBorder + BASE_ICON_X * tileScale; //current icon size X
 	var toolAreaX = BASE_TILE_X*3/2; //edit tool size X
 	var canvas = document.getElementById('canvas');
+	var narrowScreen = 0;
 	
 	//(1) try use scale same as play mode 
 	canvasX = (BASE_SCREEN_X+toolAreaX) * tileScale + EDIT_PADDING * (NO_OF_TILES_X+1);
@@ -130,7 +105,10 @@ function canvasEditReSize()
 	var left = ((screenX1 - canvasX)/2|0),
 		top  = ((screenY1 - canvasY)/2|0);
 	
-	if(left < menuIconAreaX) left = ((screenX1 - canvasX - menuIconAreaX)/2|0);
+	if(left < menuIconAreaX) {
+		narrowScreen = 1;
+		left = ((screenX1 - canvasX - menuIconAreaX)/2|0);
+	}
 
 	canvas.width = canvasX;
 	canvas.height = canvasY;
@@ -144,15 +122,17 @@ function canvasEditReSize()
 	
 	editBorder = 4 * tileScale;	
 	editStartX = (tileWScale + W2 * tileScale);
+	
+	return narrowScreen;
 }
 
 function createBaseTile()
 {
 	for(var id = 0; id < tileInfo.length; id++) {
-		baseTile[id] = { image: getThemeImage(tileInfo[id][0]), id: id };
+		baseTile[id] = { image: getThemeBitmap(tileInfo[id][0]).image, id: id };
 	}
 	
-	emptyTile = { image: getThemeImage("empty"), id: 0 };
+	emptyTile = { image: getThemeBitmap("empty").image, id: 0 };
 	actTile = baseTile[1];
 }
 
@@ -205,15 +185,11 @@ function createEditMap()
 				 (tileHScale+EDIT_PADDING)*NO_OF_TILES_Y+EDIT_PADDING
 	);
 	
-	
 	addSelectIcon();
  	addCursorTile();
 	drawEditLevel();
-	drawSaveButton();
-	drawTestButton();
-	drawNewButton();
-	drawLoadButton();
-	enableTestButton();
+ 	
+	addEditorButton();
 	
 	mouseInStage = 1;
 	mainStage.on("stagemouseup", stageMouseUp);
@@ -234,7 +210,6 @@ function clearEditMap()
 	}
 }
 
-var tileIdMapping = { ' ':0, '#':1, '@':2, 'H':3, '-':4, 'X':5, 'S':6, '$':7, '0':8, '&':9 };
 function tile2Id(tileChar)
 {
 	if( tileIdMapping.hasOwnProperty(tileChar)) {
@@ -250,7 +225,7 @@ function setCanvasBackground()
 	var background = new createjs.Shape();
 	background.graphics.beginFill("black").drawRect(0, 0, canvas.width, canvas.height);
 	mainStage.addChild(background);
-	document.body.style.background = "#301050";
+	document.body.style.background = backgroundColor;
 }
 
 function setEditBackground(startX, startY, width, height)
@@ -264,9 +239,8 @@ function setEditBackground(startX, startY, width, height)
 function drawEditBlock(startX, startY, width, height)
 {
 	var editBlock = new createjs.Shape();
-	editBlock.alpha = 0.6;
-	//editBack.graphics.beginFill("gold").drawRect(startX, startY, width, height);
 
+	editBlock.alpha = 0.6;
 	editBlock.graphics.setStrokeStyle(2);
 	editBlock.graphics.beginStroke("red");	
 	editBlock.graphics.moveTo(startX, startY);
@@ -295,14 +269,13 @@ function drawEditGround()
 
 function addSelectIcon()
 {
-	//var x =  (tileWScale+EDIT_PADDING)*NO_OF_TILES_X+tileWScale/2;
 	var x = W4 * tileScale;
 	var y;
 	for(var i = 1; i < baseTile.length; i++) {
-		y = (tileHScale*5/3)*(i-1) + tileHScale*1/4;
+		y = (tileHScale*5/3)*(i-1) + tileHScale/10;
 		drawSelectIcon(i, x, y);
 	}
-	y = (tileHScale*5/3)*(i-1) + tileHScale*1/4;
+	y = (tileHScale*5/3)*(i-1) + tileHScale/10;
 	drawSelectIcon(0, x, y);
 }
 	
@@ -327,15 +300,8 @@ function addCursorTile()
 function startEditTicker()
 {
 	stopEditTicker();
-	createjs.Ticker.setFPS(30);
-/*	
-	if(testLevelInfo.level >= MAX_EDIT_LEVEL) {
-		mainStage.cursor = 'default';
-		mainStage.update();
-		return;
-	}
-*/	
-	mainStage.enableMouseOver(120);
+	createjs.Ticker.setFPS(60);
+	mainStage.enableMouseOver(0);
 	gameTicker = createjs.Ticker.on("tick", editTick);	
 }
 	
@@ -344,7 +310,7 @@ function stopEditTicker()
 	if(gameTicker) {
 		createjs.Ticker.off("tick", gameTicker);
 		mainStage.enableMouseOver(0);
-		mainStage.cursor = 'default';
+		//mainStage.cursor = 'default';
 		gameTicker = null;
 	}
 }
@@ -384,12 +350,13 @@ function drawSelectIcon(id, x, y)
 	tile.y = y;
 	tile.myId = id;
 	tile.on('click', selectTileClick);
-	tile.on('mouseover', selectTileMouseOver);
-	tile.on('mouseout', selectTileMouseOut);
 	mainStage.addChild(tile);
+	
+	tile.x1 = x + tileWScale;
+	tile.y1 = y + tileHScale;
+	editorTile[id] = tile;
 }
 	
-var mouseOver = 0;	
 function selectTileClick()
 {
 	var actBorder = this.getChildAt(0);
@@ -406,28 +373,6 @@ function selectTileClick()
 	selectedTile = this;
 }
 	
-function selectTileMouseOver()
-{ 
-	var border = this.getChildAt(0);
-	
-	border.graphics.clear();
-	border.graphics.beginFill("gold").drawRect(-editBorder, -editBorder, tileWScale+editBorder*2, tileHScale+editBorder*2).endFill();
-
-	mainStage.cursor = 'pointer'
-	mouseOver = 1;
-}
-	
-function selectTileMouseOut()
-{ 
-	var border = this.getChildAt(0);
-	var color = (actTile.id == this.myId)?"red":"black";
-	
-	border.graphics.clear();
-	border.graphics.beginFill(color).drawRect(-editBorder, -editBorder, tileWScale+editBorder*2, tileHScale+editBorder*2).endFill();
-	
-	mouseOver = 0;
-}
-
 function drawEditLevel()
 {
 	var x = 17.2*(tileWScale+EDIT_PADDING)+EDIT_PADDING;	
@@ -450,183 +395,17 @@ function drawEditLevelNo()
 	editLevelNoObj = drawText(26.5*(tileWScale+EDIT_PADDING), y, ("00"+(testLevelInfo.level)).slice(-3), mainStage);
 }
 
-var testButton, newButton, saveButton, loadButton;
-
-function drawTestButton()
+function addEditorButton()
 {
-	var border, backColor, text;
-	var textSting = "TEST";
+	editorButton = [];
+	editorButtonMouseOverId = -1;
 	
-	var width = textSting.length * tileWScale;
-	var x = 8.5*(tileWScale+EDIT_PADDING)+EDIT_PADDING;
-	var y = canvas.height - tileHScale - editBorder;
+	drawNewButton();
+	drawLoadButton();
+	drawTestButton();
+	drawSaveButton();
 	
-	testButton = new createjs.Container();
-
-	//child id = 0
-	border = new createjs.Shape();
-	border.graphics.beginFill("#40F").drawRect(-editBorder, -editBorder, width+editBorder*2, tileHScale+editBorder*2).endFill();
-	
-	//child id = 1
-	backColor = new createjs.Shape();
-	backColor.graphics.beginFill("#FFF").drawRect(0, 0, width, tileHScale).endFill();
-	
-	testButton.addChild(border, backColor);
-	
-	//child id = 2
-	drawText(0, 0, textSting, testButton);
-		
-	testButton.x = x;
-	testButton.y = y;
-	testButton.on('click', testButtonClick);
-	testButton.on('mouseover', testButtonMouseOver);
-	testButton.on('mouseout', testButtonMouseOut);
-	testButton.alpha = 0;
-	mainStage.addChild(testButton);	
-
-	function testButtonClick()
-	{
-		mainStage.cursor = 'default';
-		startTestMode();
-	}
-
-	function testButtonMouseOver()
-	{
-		var border = this.getChildAt(0);
-	
-		border.graphics.clear();
-		border.graphics.beginFill("red").drawRect(-editBorder, -editBorder, 4*tileWScale+editBorder*2, tileHScale+editBorder*2).endFill();
-
-		var backColor = this.getChildAt(1);
-		backColor.graphics.clear();
-		backColor.graphics.beginFill("#ffa").drawRect(0, 0, width, tileHScale).endFill();
-		
-		mainStage.cursor = 'pointer';
-		mouseOver = 1;	
-	}
-
-	function testButtonMouseOut()
-	{
-		var border = this.getChildAt(0);
-	
-		border.graphics.clear();
-		border.graphics.beginFill("#40F").drawRect(-editBorder, -editBorder, 4*tileWScale+editBorder*2, tileHScale+editBorder*2).endFill();
-		
-		var backColor = this.getChildAt(1);
-		backColor.graphics.clear();
-		backColor.graphics.beginFill("#FFF").drawRect(0, 0, width, tileHScale).endFill();
-
-		
-		mouseOver = 0;	
-	}	
-}
-
-function drawSaveButton()
-{
-	var border, backColor, text;
-	var textSting = "SAVE";
-	
-	var width = textSting.length * tileWScale;
-	var x = 13*(tileWScale+EDIT_PADDING)+EDIT_PADDING;
-	var y = canvas.height - tileHScale - editBorder;
-	
-	saveButton = new createjs.Container();
-
-	//child id = 0
-	border = new createjs.Shape();
-	border.graphics.beginFill("#40F").drawRect(-editBorder, -editBorder, width+editBorder*2, tileHScale+editBorder*2).endFill();
-	
-	//child id = 1
-	backColor = new createjs.Shape();
-	backColor.graphics.beginFill("#FFF").drawRect(0, 0, width, tileHScale).endFill();
-	
-	saveButton.addChild(border, backColor);
-	
-	//child id = 2
-	drawText(0, 0, textSting, saveButton);
-		
-	saveButton.x = x;
-	saveButton.y = y;
-	saveButton.on('click', saveButtonClick);
-	saveButton.on('mouseover', saveButtonMouseOver);
-	saveButton.on('mouseout', saveButtonMouseOut);
-	saveButton.alpha = 0;
-	mainStage.addChild(saveButton);	
-
-	function saveButtonClick()
-	{
-		stopEditTicker();
-		saveEditLevel();
-		yesNoDialog(["Save Successful", "Play It ?"], yesBitmap, noBitmap, mainStage, tileScale, playConfirm);
-
-	}
-
-	function saveButtonMouseOver()
-	{
-		var border = this.getChildAt(0);
-	
-		border.graphics.clear();
-		border.graphics.beginFill("red").drawRect(-editBorder, -editBorder, 4*tileWScale+editBorder*2, tileHScale+editBorder*2).endFill();
-		
-		var backColor = this.getChildAt(1);
-		backColor.graphics.clear();
-		backColor.graphics.beginFill("#ffa").drawRect(0, 0, width, tileHScale).endFill();
-
-		mainStage.cursor = 'pointer';
-		mouseOver = 1;	
-	}
-
-	function saveButtonMouseOut()
-	{
-		var border = this.getChildAt(0);
-	
-		border.graphics.clear();
-		border.graphics.beginFill("#40F").drawRect(-editBorder, -editBorder, 4*tileWScale+editBorder*2, tileHScale+editBorder*2).endFill();
-		
-		var backColor = this.getChildAt(1);
-		backColor.graphics.clear();
-		backColor.graphics.beginFill("#fff").drawRect(0, 0, width, tileHScale).endFill();
-	
-		mouseOver = 0;	
-	}	
-	
-	function playConfirm(rc)
-	{
-		if(rc) { //yes
-			clearTestLevel(); //clear current edit level 
-			startPlayUserLevel();
-		} else { //no
-			//enableTestButton();
-			setButtonState();
-			startEditTicker();
-		}
-	}
-	
-	function startPlayUserLevel()
-	{
-		playMode = PLAY_MODERN;
-		playData = PLAY_DATA_USERDEF;
-	
-		curLevel = testLevelInfo.level;
-		setModernInfo();
-	
-		canvasReSize();
-		document.onkeydown = handleKeyDown;
-		initShowDataMsg();
-		startGame();
-	}	
-}
-
-function editLevelModified()
-{
-	return (testLevelInfo.modified);
-}
-
-function editConfirmAbortState(callbackFun)
-{
-	stopEditTicker();
-	yesNoDialog(["Abort current editing ?"], yesBitmap, noBitmap, mainStage, tileScale, 
-				function(rc) { if(rc) callbackFun(); else startEditTicker(); });
+	enableTestButton();
 }
 
 function drawNewButton()
@@ -655,10 +434,12 @@ function drawNewButton()
 	newButton.x = x;
 	newButton.y = y;
 	newButton.on('click', newButtonClick);
-	newButton.on('mouseover', newButtonMouseOver);
-	newButton.on('mouseout', newButtonMouseOut);
 	mainStage.addChild(newButton);	
 	
+	newButton.x1 = x + width;
+	newButton.y1 = y + tileHScale;
+	editorButton[editorButton.length] = newButton;
+	
 	function newLevel(rc)
 	{
 		if(rc) 	{
@@ -677,10 +458,12 @@ function drawNewButton()
 			testLevelInfo.fromLevel = -1;
 		}
 		startEditTicker();
+		gameResume();
 	}
 	
 	function newButtonClick()
 	{
+		gamePause();
 		stopEditTicker();
 		if(testLevelInfo.modified) {
 			yesNoDialog(["Abort current editing ?"], yesBitmap, noBitmap, mainStage, tileScale, newLevel);
@@ -688,41 +471,8 @@ function drawNewButton()
 			newLevel(1);
 		}
 	}
-
-	function newButtonMouseOver()
-	{
-		var border = this.getChildAt(0);
-	
-		border.graphics.clear();
-		border.graphics.beginFill("red").drawRect(-editBorder, -editBorder, 3*tileWScale+editBorder*2, tileHScale+editBorder*2).endFill();
-		
-		var backColor = this.getChildAt(1);
-		backColor.graphics.clear();
-		backColor.graphics.beginFill("#ffa").drawRect(0, 0, width, tileHScale).endFill();
-
-		mainStage.cursor = 'pointer';
-		mouseOver = 1;	
-	}
-
-	function newButtonMouseOut()
-	{
-		var border = this.getChildAt(0);
-	
-		border.graphics.clear();
-		border.graphics.beginFill("#40F").drawRect(-editBorder, -editBorder, 3*tileWScale+editBorder*2, tileHScale+editBorder*2).endFill();
-		
-		var backColor = this.getChildAt(1);
-		backColor.graphics.clear();
-		backColor.graphics.beginFill("#fff").drawRect(0, 0, width, tileHScale).endFill();
-	
-		mouseOver = 0;	
-	}	
 }
 
-//========================
-// LOAD BUTTON
-// 05/21/2015
-//========================
 function drawLoadButton()
 {
 	var border, backColor, text;
@@ -754,22 +504,25 @@ function drawLoadButton()
 	loadButton.x = x;
 	loadButton.y = y;
 	loadButton.on('click', loadButtonClick);
-	loadButton.on('mouseover', loadButtonMouseOver);
-	loadButton.on('mouseout', loadButtonMouseOut);
 	mainStage.addChild(loadButton);	
 	initLoadVariable();
 
+	loadButton.x1 = x + width;
+	loadButton.y1 = y + tileHScale;
+	editorButton[editorButton.length] = loadButton;
 	
 	function saveState()
 	{
-		saveStateObj = saveKeyHandler(noKeyDown);
+		//saveStateObj = saveKeyHandler(noKeyDown);
+		gamePause();
 		stopEditTicker();
 	}
 	
 	function restoreState()
 	{
-		restoreKeyHandler(saveStateObj);
+		//restoreKeyHandler(saveStateObj);
 		startEditTicker();
+		gameResume();
 	}
 	
 	function initLoadVariable()
@@ -830,67 +583,178 @@ function drawLoadButton()
 			loadExistLevel(1);
 		}
 	}
+}
 
-	function loadButtonMouseOver()
+function drawTestButton()
+{
+	var border, backColor, text;
+	var textSting = "TEST";
+	
+	var width = textSting.length * tileWScale;
+	var x = 8.5*(tileWScale+EDIT_PADDING)+EDIT_PADDING;
+	var y = canvas.height - tileHScale - editBorder;
+	
+	testButton = new createjs.Container();
+
+	//child id = 0
+	border = new createjs.Shape();
+	border.graphics.beginFill("#40F").drawRect(-editBorder, -editBorder, width+editBorder*2, tileHScale+editBorder*2).endFill();
+	
+	//child id = 1
+	backColor = new createjs.Shape();
+	backColor.graphics.beginFill("#FFF").drawRect(0, 0, width, tileHScale).endFill();
+	
+	testButton.addChild(border, backColor);
+	
+	//child id = 2
+	drawText(0, 0, textSting, testButton);
+		
+	testButton.x = x;
+	testButton.y = y;
+	testButton.on('click', testButtonClick);
+	testButton.alpha = 0;
+	mainStage.addChild(testButton);	
+
+	testButton.x1 = x + width;
+	testButton.y1 = y + tileHScale;
+	editorButton[editorButton.length] = testButton;
+	
+	function testButtonClick()
 	{
-		var border = this.getChildAt(0);
-	
-		border.graphics.clear();
-		border.graphics.beginFill("red").drawRect(-editBorder, -editBorder, 4*tileWScale+editBorder*2, tileHScale+editBorder*2).endFill();
-		
-		var backColor = this.getChildAt(1);
-		backColor.graphics.clear();
-		backColor.graphics.beginFill("#ffa").drawRect(0, 0, width, tileHScale).endFill();
-		
-		mainStage.cursor = 'pointer';
-		mouseOver = 1;	
-	}
-
-	function loadButtonMouseOut()
-	{
-		var border = this.getChildAt(0);
-	
-		border.graphics.clear();
-		border.graphics.beginFill("#40F").drawRect(-editBorder, -editBorder, 4*tileWScale+editBorder*2, tileHScale+editBorder*2).endFill();
-	
-		var backColor = this.getChildAt(1);
-		backColor.graphics.clear();
-		backColor.graphics.beginFill("#fff").drawRect(0, 0, width, tileHScale).endFill();
-		
-		mouseOver = 0;	
+		//mainStage.cursor = 'default';
+		startTestMode();
 	}
 }
 
-function setButtonState()
+function drawSaveButton()
 {
-	if(testLevelInfo.level > MAX_EDIT_LEVEL) {
-		newButton.alpha = 0;
-		testButton.alpha = 0;
+	var border, backColor, text;
+	var textSting = "SAVE";
+	
+	var width = textSting.length * tileWScale;
+	var x = 13*(tileWScale+EDIT_PADDING)+EDIT_PADDING;
+	var y = canvas.height - tileHScale - editBorder;
+	
+	saveButton = new createjs.Container();
+
+	//child id = 0
+	border = new createjs.Shape();
+	border.graphics.beginFill("#40F").drawRect(-editBorder, -editBorder, width+editBorder*2, tileHScale+editBorder*2).endFill();
+	
+	//child id = 1
+	backColor = new createjs.Shape();
+	backColor.graphics.beginFill("#FFF").drawRect(0, 0, width, tileHScale).endFill();
+	
+	saveButton.addChild(border, backColor);
+	
+	//child id = 2
+	drawText(0, 0, textSting, saveButton);
+		
+	saveButton.x = x;
+	saveButton.y = y;
+	saveButton.on('click', saveButtonClick);
 	saveButton.alpha = 0;
-		editWarningMsg(0);
-		return;
-	} else {
-		newButton.alpha = 1;
-		editWarningMsg(1);
+	mainStage.addChild(saveButton);	
+	
+	saveButton.x1 = x + width;
+	saveButton.y1 = y + tileHScale;
+	editorButton[editorButton.length] = saveButton;
+
+	function saveButtonClick()
+	{
+		gamePause();
+		stopEditTicker();
+		saveEditLevel();
+		yesNoDialog(["Save Successful", "Play It ?"], yesBitmap, noBitmap, mainStage, tileScale, playConfirm);
+
 	}
 
-	if(testLevelInfo.modified) 	{
-		enableTestButton();
-		if(testLevelInfo.pass) {
-			saveButton.alpha = 1;
-		} else {
-			saveButton.alpha = 0;
+	function playConfirm(rc)
+	{
+		gameResume();
+		if(rc) { //yes
+			clearTestLevel(); //clear current edit level 
+			startPlayUserLevel();
+		} else { //no
+			setButtonState();
+			startEditTicker();
 		}
-	} else {
-		testLevelInfo.pass = 0;
-		saveButton.alpha = 0;
 	}
+	
+	function startPlayUserLevel()
+	{
+		playMode = PLAY_MODERN;
+		playData = PLAY_DATA_USERDEF;
+	
+		curLevel = testLevelInfo.level;
+		setModernInfo();
+	
+		canvasReSize();
+		document.onkeydown = handleKeyDown;
+		initShowDataMsg();
+		startGame();
+	}	
+}
+
+//=======================
+// BEGIN for TEST Mode 
+//=======================
+function startTestMode()
+{
+	playMode = PLAY_TEST;
+	playData = PLAY_DATA_USERDEF;
+	
+	curLevel = testLevelInfo.level;
+	stopEditTicker();
+	saveTestState();
+	canvasReSize();
+	document.onkeydown = handleKeyDown; //key press
+	selectIconObj.disable(1);
+	initShowDataMsg();
+	startGame();
+}
+
+function saveTestState()
+{
+	map2LevelData();
+	setTestLevel(testLevelInfo);
+}
+
+function back2EditMode(rc)
+{
+	if(rc == 1) { //pass
+		testLevelInfo.pass = 1;
+		setTestLevel(testLevelInfo);
+		//enableSaveButton();
+	} else { //fail
+		//if(testLevelInfo.pass && !testLevelInfo.modified) enableSaveButton();
+	}
+	startEditMode();
+}
+
+function getTestLevelMap(initValue)
+{
+	return testLevelInfo.levelMap;
 }
 
 function enableTestButton()
 {
 	if(lastRunner) testButton.alpha = 1;
 }
+//==========================
+
+function editLevelModified()
+{
+	return (testLevelInfo.modified);
+}
+
+function editConfirmAbortState(callbackFun)
+{
+	gamePause();
+	stopEditTicker();
+	yesNoDialog(["Abort current editing ?"], yesBitmap, noBitmap, mainStage, tileScale, 
+				function(rc) {  gameResume(); if(rc) callbackFun(); else startEditTicker(); } );
+}
 
 function disableTestButton()
 {
@@ -928,10 +792,6 @@ function saveEditLevel()
 	setEditSelectMenu();
 }
 	
-
-var mouseDown = 0;
-var lastDown = {x:-1, y:-1};
-	
 function stageMouseDown(event)
 {
 	mouseDown = 1;
@@ -1148,6 +1008,115 @@ function editHandleKeyDown(event)
 	return true;
 }	
 
+function checkTileMouseOver(x, y)
+{
+	var curTile;
+	for(var i = 0; i < editorTile.length; i++) {
+		curTile = editorTile[i];
+		if(curTile.x <= x && curTile.y <= y && curTile.x1 >= x && curTile.y1 >= y) {
+			if(editorActiveTileId == i) return;
+			selectTileMouseOver(curTile);
+			if(editorActiveTileId >= 0) selectTileMouseOut(editorTile[editorActiveTileId]);
+			editorActiveTileId = i;
+			return;
+		}
+	}
+	if(editorActiveTileId >= 0) selectTileMouseOut(editorTile[editorActiveTileId]);
+	editorActiveTileId = -1;
+}
+
+function selectTileMouseOver(tile)
+{ 
+	var border = tile.getChildAt(0);
+	
+	border.graphics.clear();
+	border.graphics.beginFill("gold").drawRect(-editBorder, -editBorder, tileWScale+editBorder*2, tileHScale+editBorder*2).endFill();
+	//mouseOver = 1;
+}
+	
+function selectTileMouseOut(tile)
+{ 
+	var border = tile.getChildAt(0);
+	var color = (actTile.id == tile.myId)?"red":"black";
+	
+	border.graphics.clear();
+	border.graphics.beginFill(color).drawRect(-editBorder, -editBorder, tileWScale+editBorder*2, tileHScale+editBorder*2).endFill();
+	//mouseOver = 0;
+}
+
+function checkButtonMouseOver(x, y)
+{
+	var curButton;
+	for(var i = 0; i < editorButton.length; i++) {
+		curButton = editorButton[i];
+		if(curButton.x <= x && curButton.y <= y && curButton.x1 >= x && curButton.y1 >= y) {
+			if(editorButtonMouseOverId == i) return;
+			editorButtonMouseOver(curButton);
+			if(editorButtonMouseOverId >= 0) editorButtonMouseOut(editorButton[editorButtonMouseOverId]);
+			editorButtonMouseOverId = i;
+			return;
+		}
+	}
+	if(editorButtonMouseOverId >= 0) editorButtonMouseOut(editorButton[editorButtonMouseOverId]);
+	editorButtonMouseOverId = -1;
+}
+
+function editorButtonMouseOver(button)
+{
+	var border = button.getChildAt(0);
+	var width = button.x1-button.x;
+	
+	border.graphics.clear();
+	border.graphics.beginFill("red").drawRect(-editBorder, -editBorder, width+editBorder*2, tileHScale+editBorder*2).endFill();
+		
+	var backColor = button.getChildAt(1);
+	backColor.graphics.clear();
+	backColor.graphics.beginFill("#ffa").drawRect(0, 0, width, tileHScale).endFill();
+		
+	//mouseOver = 1;	
+}
+
+function editorButtonMouseOut(button)
+{
+	var border = button.getChildAt(0);
+	var width = button.x1-button.x;
+	
+	border.graphics.clear();
+	border.graphics.beginFill("#40F").drawRect(-editBorder, -editBorder, width+editBorder*2, tileHScale+editBorder*2).endFill();
+	
+	var backColor = button.getChildAt(1);
+	backColor.graphics.clear();
+	backColor.graphics.beginFill("#fff").drawRect(0, 0, width, tileHScale).endFill();
+		
+	//mouseOver = 0;	
+}	
+
+function setButtonState()
+{
+	if(testLevelInfo.level > MAX_EDIT_LEVEL) {
+		newButton.alpha = 0;
+		testButton.alpha = 0;
+		saveButton.alpha = 0;
+		editWarningMsg(0);
+		return;
+	} else {
+		newButton.alpha = 1;
+		editWarningMsg(1);
+	}
+	
+	if(testLevelInfo.modified) 	{
+		enableTestButton();
+		if(testLevelInfo.pass) {
+			saveButton.alpha = 1;
+		} else {
+			saveButton.alpha = 0;
+		}
+	} else {
+		testLevelInfo.pass = 0;
+		saveButton.alpha = 0;
+	}
+} 
+
 function editTick() 
 {
 	var x = ((mainStage.mouseX-EDIT_PADDING - editStartX)/(tileWScale+EDIT_PADDING));
@@ -1155,14 +1124,15 @@ function editTick()
 	var y = ((mainStage.mouseY-EDIT_PADDING) / (tileHScale+EDIT_PADDING) )| 0;
 	
 	if(testLevelInfo.level > MAX_EDIT_LEVEL) {
-		mainStage.cursor = 'default'; 
-		mainStage.update();
 		return;
 	}
 	//debug(mainStage.mouseX,editStartX, x,y);
 	if(mouseInStage && x >= 0 && x < NO_OF_TILES_X && y >= 0 && y < NO_OF_TILES_Y) {
 		//edit area
-		mainStage.cursor = 'pointer'; 
+
+		if(editorActiveTileId >= 0) selectTileMouseOut(editorTile[editorActiveTileId]);
+		if(editorButtonMouseOverId >= 0) editorButtonMouseOut(editorButton[editorButtonMouseOverId]);
+		
 		if( x != lastDown.x || y != lastDown.y) {
 			cursorTileObj.alpha = 1;
 			cursorTileObj.x = (tileWScale + EDIT_PADDING) * x+EDIT_PADDING + editStartX;
@@ -1171,7 +1141,7 @@ function editTick()
 				var clickTile = editMap[x][y];
 				
 				if(!actTile.id || clickTile.id == actTile.id) {
-					if(actTile.id) cursorTileObj.alpha = 0;
+					if(actTile.id) cursorTileObj.alpha = 0.1;
 					delManCheck(clickTile.id, x, y);
 					clickTile.tile.getChildAt(1).image =  emptyTile.image;
 					clickTile.id = emptyTile.id;
@@ -1191,7 +1161,8 @@ function editTick()
 			}
 		}
 	} else {
-		if(!mouseOver) mainStage.cursor = 'default'; 
+		checkTileMouseOver(mainStage.mouseX, mainStage.mouseY);
+		checkButtonMouseOver(mainStage.mouseX, mainStage.mouseY);
 		cursorTileObj.alpha = 0;
 	}
 	mainStage.update();

lodeRunner.gamepad.js

@@ -0,0 +1,255 @@
+var MAX_CONTROLLER = 4;
+
+var gamepadReady = 0;
+var gamepadPollingId = null;
+var gamepadLastId = -1; //for send to server only
+
+var requestAnimationFrame = window.requestAnimationFrame ||
+	window.webkitRequestAnimationFrame ||
+	window.mozRequestAnimationFrame;
+
+var cancelRequestAnimationFrame = window.cancelRequestAnimationFrame ||
+	window.webkitCancelRequestAnimationFrame ||
+	window.mozCancelRequestAnimationFrame;
+
+function gamepadEnable()
+{
+	if(!gamepadSupport()) return;
+	
+	window.addEventListener("gamepadconnected",gamepadConnectFun, false);
+	window.addEventListener("gamepaddisconnected", gamepadDisconnectFun, false);
+	gamepadPollingId = setInterval(gamepadCheck, 500);
+}
+
+function gamepadSupport() 
+{
+	return ("getGamepads" in navigator) || ("webkitGetGamepads" in navigator);
+}
+ 
+function gamepadConnectFun(e)
+{
+	//console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+	//            e.gamepad.index, e.gamepad.id,
+	//            e.gamepad.buttons.length, e.gamepad.axes.length);
+	gamepadReady = 1;
+	if(gamepadPollingId) { 
+		clearInterval(gamepadPollingId); 
+		gamepadPollingId = null; 
+	}
+	requestAnimationFrame(gamepadRequestState);
+}
+
+function gamepadDisconnectFun(e) 
+{
+	console.log("disconnection game port#%d", e.gamepad.index );
+	gamepadReady = 0;
+	if(!gamepadPollingId) gamepadPollingId = setInterval(gamepadCheck, 500);
+}
+
+function gamepadCheck()
+{
+	gamepad = gamepadGetInstance();
+	for(var id=0; id < MAX_CONTROLLER; id ++) {	
+		if(gamepad[id]) {	
+			if(!gamepadReady) { 
+				gamepadConnectTrigger(gamepad[id]);
+			}
+		}
+	}
+}
+
+function gamepadGetInstance()
+{
+	return ("getGamepads" in navigator) ? 
+	       navigator.getGamepads() : 
+	       (("webkitGetGamepads" in navigator) ? navigator.webkitGetGamepads() : []);
+}
+
+//=================================
+// Generate gamepadconnected event 
+//=================================
+function gamepadConnectTrigger(gamepad)
+{
+	var event = document.createEvent('Event');
+	event.initEvent("gamepadconnected", true, true); //can bubble, and is cancellable
+	event.gamepad = gamepad;
+	dispatchEvent(event);
+}
+
+function gamepadDisable()
+{
+	if(!gamepadSupport()) return;
+	
+	window.removeEventListener("gamepadconnected",gamepadConnectFun, false);
+	window.removeEventListener("gamepaddisconnected", gamepadDisconnectFun, false);
+	if(gamepadPollingId) { 
+		clearInterval(gamepadPollingId); 
+		gamepadPollingId = null; 
+	}
+	gamepadReady = 0;
+}
+
+function getLastGamepadInfo()
+{
+	var gamepadInfo = null;
+	
+	if(gamepadLastId >= 0 && gamepadLastId < MAX_CONTROLLER ) {
+		var gamepad = gamepadGetInstance()[gamepadLastId];
+		if(gamepad) {
+			gamepadInfo =gamepad.index + "." + gamepad.id + 
+			           (gamepad.mapping != ""?("." +gamepad.mapping):"");
+		}
+	}
+	
+	return gamepadInfo;
+}
+
+//===========================================================================
+
+var keyCodeMapping  = [
+  //[[keyCode1, ctrl, shift], [keyCode2, ctrl, shift]	
+	[[KEYCODE_UP,    0, 0],   [KEYCODE_UP,    0, 0]], //up
+	[[KEYCODE_DOWN,  0, 0],   [KEYCODE_DOWN,  0, 0]], //down
+	[[KEYCODE_LEFT,  0, 0],   [KEYCODE_LEFT,  0, 0]], //left
+	[[KEYCODE_RIGHT, 0, 0],   [KEYCODE_RIGHT, 0, 0]], //right
+	[[KEYCODE_Z,     0, 0],   [KEYCODE_ENTER, 0, 0]], //dig-left
+	[[KEYCODE_X,     0, 0],   [KEYCODE_ENTER, 0, 0]], //dig-right
+	[[KEYCODE_ESC,   0, 0],   [KEYCODE_ENTER, 0, 0]], //pause
+	[[KEYCODE_ENTER, 0, 0],   [KEYCODE_ENTER, 0, 0]], //enter
+	[[KEYCODE_A,     1, 0],   [KEYCODE_ENTER, 0, 0]]  //game abort
+];
+
+var gameButtonMapping = [ 
+	//index[0] buttonMethod: 0: don't repeat, 1: repeat, 2: combine button
+	
+	[ 1, ['B', 12],['A', 1, "<", -0.6],['B', 16]],    //UP
+	[ 1, ['B', 13],['A', 1, ">",  0.6],['B', 17]],    //DOWN
+	[ 1, ['B', 14],['A', 0, "<", -0.6],['B', 18]],    //LEFT
+	[ 1, ['B', 15],['A', 0, ">",  0.6],['B', 19]],    //RIGHT
+	[ 1, ['B',  2],['B', 3]],                         //DIG-LEFT
+	[ 1, ['B',  1]],                                  //DIG-RIGHT
+	[ 0, ['B',  8],['B', 11]],                        //PAUSE  (ESC)
+	[ 0, ['B',  9]],                        //Enter (Accept)
+	[ 2, ['B',  4],['B',  5], ['B',  6],['B',  7]]    //GAME ABORT (CTRL-A)
+];
+
+var lastButtonState = [ 
+	[ 0, 0, 0, 0, 0, 0, 0, 0, 0], 
+	[ 0, 0, 0, 0, 0, 0, 0, 0, 0], 
+	[ 0, 0, 0, 0, 0, 0, 0, 0, 0], 
+	[ 0, 0, 0, 0, 0, 0, 0, 0, 0] 
+];  
+
+function gamepadRequestState()
+{
+	var i, j;
+	var gamepad, curButtonState;
+	var buttonMethod;
+	
+	for(var id=0; id < MAX_CONTROLLER; id ++) {	
+		gamepad = gamepadGetInstance()[id];
+		curButtonState = [];
+		if(gamepad) {
+			for(i = 0; i < gameButtonMapping.length; i++) {
+				curButtonState[i] = 0;
+				buttonMethod = gameButtonMapping[i][0];
+				for(j = 1; j < gameButtonMapping[i].length && !curButtonState[i]; j++) {
+					var curButtonMapping = gameButtonMapping[i][j];
+					switch(curButtonMapping[0]) {
+					case 'A': //axes
+						var axesId = curButtonMapping[1];
+						if(gamepad.axes.length > axesId) {	
+							var axesCmpSign = curButtonMapping[2];	
+							var axesCmpValue = curButtonMapping[3];
+							var axesValue = Math.trunc(gamepad.axes[axesId]*100)/100;	
+							if(typeof axesValue != 'undefined' ) {
+								if( (axesCmpSign == ">" && axesValue > axesCmpValue && axesValue <= 1.05) 
+								  ||(axesCmpSign == "<" && axesValue < axesCmpValue && axesValue >= -1.05) ) 
+								{
+									//console.log("axes#%d = %f", axesId, axesValue );
+									curButtonState[i] = 1;
+								}
+							}
+						}
+						break;
+					case 'B': //button
+						var buttonId = curButtonMapping[1];
+						var button = gamepad.buttons[buttonId];	
+						if(buttonPressed(button))
+							curButtonState[i] = 1;
+						
+						if(buttonMethod == 2) { //combine mode
+							j++;
+							if(curButtonState[i]) {
+								curButtonMapping = gameButtonMapping[i][j];
+								buttonId = curButtonMapping[1];
+								button = gamepad.buttons[buttonId];	
+								if(buttonPressed(button)) {
+									curButtonState[i] = 1;							
+								} else {
+									curButtonState[i] = 0;
+								}
+							}
+						}
+						break;		
+					}
+				}
+				switch(buttonMethod) {
+				case 1: //repeat
+					if(document.onkeydown == handleKeyDown || document.onkeydown == anyKeyDown) {
+						if(curButtonState[i])sendKeyDown(keyCodeMapping[i], id); 
+						else if(lastButtonState[id][i]) sendKeyUp(keyCodeMapping[i], id);
+						break;
+					}
+				case 0: //don't repeat
+				case 2:		
+					if(lastButtonState[id][i] != curButtonState[i]) {
+						if(curButtonState[i])sendKeyDown(keyCodeMapping[i], id); 
+						else if(lastButtonState[id][i]) sendKeyUp(keyCodeMapping[i], id);
+					}
+					break;	
+				}
+			}
+			lastButtonState[id] = curButtonState;
+		}
+	}
+	if(gamepadReady) requestAnimationFrame(gamepadRequestState);
+}
+
+function buttonPressed(button)
+{
+	var pressed = button == 1.0;
+	
+	if (typeof(button) == "object") {
+        pressed = button.pressed;
+	}
+	
+	return pressed;
+}
+
+function gamepadClearId()
+{
+	gamepadLastId = -1;
+}
+
+function sendKeyUp(twinKey, id)
+{
+	var key = (inputNameState)? twinKey[1]:twinKey[0];
+	if(key[0] == null) return;
+	
+	var event = {keyCode: key[0], ctrlKey: key[1], shiftKey: key[2]};
+	//console.log("sendKeyUp = %d",keyCode );
+	if(typeof document.onkeydown == "function" ) document.onkeyup(event);
+	gamepadLastId = id;
+}
+
+function sendKeyDown(twinKey, id)
+{
+	var key = (inputNameState)? twinKey[1]:twinKey[0];
+	if(key[0] == null) return;
+	
+	var event = {keyCode: key[0], ctrlKey: key[1], shiftKey: key[2]};
+	//console.log("sendKeyDown = %d",keyCode );
+	if(typeof document.onkeydown == "function" ) document.onkeydown(event);
+	gamepadLastId = id;
+}

lodeRunner.guard.js

@@ -221,6 +221,7 @@ function guardMoveStep( id, action)
 					} else 
 						decGold(); //gold disappear 
 					curGuard.hasGold = 0;
+					guardRemoveRedhat(curGuard); //9/4/2016
 				}
 				//----------------------------------------------------------------------
 				
@@ -236,6 +237,7 @@ function guardMoveStep( id, action)
 						decGold(); //gold disappear 
 				}
 				curGuard.hasGold = 0;
+				guardRemoveRedhat(curGuard); //9/4/2016
 				//----------------------------------------------------------------------
 				
 				if( curShape == "fallRight") newShape = "shakeRight";
@@ -359,7 +361,7 @@ function guardMoveStep( id, action)
 	{
 		//curGuard.hasGold = ((Math.random()*26)+14)|0; //14 - 39 
 		curGuard.hasGold = ((Math.random()*26)+12)|0; //12 - 37 change gold drop steps
-		
+		guardWearRedhat(curGuard); //9/4/2016
 		if(playMode == PLAY_AUTO || playMode == PLAY_DEMO || playMode == PLAY_DEMO_ONCE) 	getDemoGold(curGuard);
 		if(recordMode) processRecordGold(curGuard);
 		removeGold(x, y);
@@ -370,6 +372,18 @@ function guardMoveStep( id, action)
 	//checkCollision(runner.pos.x, runner.pos.y);
 }
 
+//meanings: guard with gold
+function guardWearRedhat(guard)
+{
+	if(redhatMode) guard.sprite.spriteSheet = redhatData;
+}
+
+//meanings: guard without gold
+function guardRemoveRedhat(guard) 
+{
+	if(redhatMode) guard.sprite.spriteSheet = guardData;
+}
+
 function dropGold(id) 
 {
 	var curGuard = guard[id];
@@ -381,7 +395,7 @@ function dropGold(id)
 		curGuard.hasGold--; // count > 1,  don't drop it only decrease count 
 		//loadingTxt.text = "(" + id + ") = " + curGuard.hasGold;
 		break;	
-	case (curGuard.hasGold == 1):
+	case (curGuard.hasGold == 1): //drop gold
 		var x = curGuard.pos.x, y = curGuard.pos.y;
 		
 		if(map[x][y].base == EMPTY_T && ( y >= maxTileY ||
@@ -391,6 +405,7 @@ function dropGold(id)
 			addGold(x,y);
 			curGuard.hasGold = -1; //for record play action always use value = -1
 			//curGuard.hasGold =  -(((Math.random()*10)+1)|0); //-1 ~ -10; //waiting time for get gold
+			guardRemoveRedhat(curGuard); //9/4/2016	
 			drop = 1;
 		}
 		break;	
@@ -399,6 +414,7 @@ function dropGold(id)
 		//loadingTxt.text = "(" + id + ") = " + curGuard.hasGold;
 		break;	
 	}
+	return drop;
 }
 
 
@@ -407,7 +423,7 @@ function dropGold(id)
 //=============================================
 var DEBUG_TIME = 0;
 var shakeRight  = [  8,  9, 10,  9, 10,  8 ];
-var shakeLeft   = [ 19, 20, 21, 20, 21, 19 ];
+var shakeLeft   = [ 30, 31, 32, 31, 32, 30 ];
 var shakeTime   = [ 36,  3,  3,  3,  3,  3 ];
 
 var shakingGuardList = [];
@@ -907,7 +923,7 @@ function setRunnerDead()
 //===============================================
 // BEGIN NEW FOR REBORN (ai version >= 3)
 //===============================================
-var rebornFrame = [ 17, 18 ];
+var rebornFrame = [ 28, 29 ];
 var rebornTime  = [  6,  2 ];
 
 var rebornGuardList = [];
@@ -943,13 +959,11 @@ function processReborn()
 				curGuard.sprite.gotoAndStop(rebornFrame[curGuard.curFrameIdx]);
 			} else {
 				//reborn 
-				
 				var id = rebornGuardList[i];
 				rebornGuardList.splice(i, 1); //remove from list
 				rebornComplete(id);
 				continue;
 			}
-				
 		}
 		i++;
 	}

lodeRunner.hiscore.js

@@ -1,3 +1,4 @@
+var inputNameState = 0;
 
 function showScoreTable(_playData, _curScoreInfo, _callbackFun, _waitTime)
 {
@@ -143,7 +144,6 @@ function showScoreTable(_playData, _curScoreInfo, _callbackFun, _waitTime)
 	
 	function drawHiScoreList()
 	{
-		//var title =  playDataName[_playData-1] + " HIGH SCORES";
 		var title = playDataToTitleName(_playData);
 		var localHighScore = "LOCAL HIGH SCORES";
 		var barTile;
@@ -158,7 +158,7 @@ function showScoreTable(_playData, _curScoreInfo, _callbackFun, _waitTime)
 
 		//bar 
 		for(var x = 0; x < NO_OF_TILES_X; x++) {
-			barTile = new createjs.Bitmap(getThemeImage("ground"));
+			barTile = getThemeBitmap("ground");
 			barTile.setTransform(x * tileWScale, 4.5*tileHScale , tileScale, tileScale);
 			scoreStage.addChild(barTile); 
 		}		
@@ -208,6 +208,7 @@ function showScoreTable(_playData, _curScoreInfo, _callbackFun, _waitTime)
 		
 		function initInput()
 		{
+			inputNameState = 1;
 			curPos = playerName.length;
 			name = playerName.split(""); //string to array;
 			nameText = []; //text object
@@ -257,6 +258,8 @@ function showScoreTable(_playData, _curScoreInfo, _callbackFun, _waitTime)
 			
 			createjs.Ticker.off("tick", hiScoreTicker);
 			setTimeout( function() { closeScoreTable(); }, 1500);
+			
+			inputNameState = 0;
 		}
 		
 		function removeNameText()
@@ -279,6 +282,20 @@ function showScoreTable(_playData, _curScoreInfo, _callbackFun, _waitTime)
 			moveChild2Top(scoreStage, cursor);
 		}
 		
+		function nextChar(charValue, nextMode)
+		{
+			if(typeof(charValue) == "undefined")charValue = " ";
+			var code = charValue.charCodeAt(0);
+
+			if(nextMode >=0) code++; else code--;
+			
+			if (code < 65 || code > 90) { //out of A-Z
+				if(nextMode >=0) code = 65;
+				else code= 90;
+			}
+			return String.fromCharCode(code); 
+		}
+		
 		function handleHiScoreName(event)
 		{
 			if(!event){ event = window.event; } //cross browser issues exist
@@ -324,6 +341,12 @@ function showScoreTable(_playData, _curScoreInfo, _callbackFun, _waitTime)
 			case (code == KEYCODE_RIGHT): //RIGHT
 				if(curPos < name.length) curPos++;	
 				break;
+			case (code == KEYCODE_UP): //UP
+				name[curPos] = nextChar(name[curPos], 1);
+				break;
+			case (code == KEYCODE_DOWN): //DOWN
+				name[curPos] = nextChar(name[curPos], -1);
+				break;
 			case (code == KEYCODE_ENTER): //ENTER
 				if(name.length > 0) inputFinish(true);	//async
 				else soundPlay("beep");	
@@ -410,6 +433,8 @@ function inputString(_stage, _maxSize, _startX, _startY, _defaultString, _callba
 		
 	function initInput()
 	{
+		inputNameState = 1;
+		
 		curPos = _defaultString.length; // cursor start position
 		inputText = _defaultString.split(""); //string to array
 		inputObj = []; //text object
@@ -452,6 +477,20 @@ function inputString(_stage, _maxSize, _startX, _startY, _defaultString, _callba
 		document.onkeydown = savedKeyDownHander;
 	}	
 
+	function nextChar(charValue, nextMode)
+	{
+		if(typeof(charValue) == "undefined") charValue = " ";
+		var code = charValue.charCodeAt(0);
+			
+		if(nextMode >=0) code++; else code--;
+			
+		if (code < 65 || code > 90) { //out of A-Z
+			if(nextMode >=0) code = 65;
+			else code= 90;
+		}
+		return String.fromCharCode(code);
+	}	
+	
 	function handleStringInput(event)
 	{
 		if(!event){ event = window.event; } //cross browser issues exist
@@ -496,6 +535,12 @@ function inputString(_stage, _maxSize, _startX, _startY, _defaultString, _callba
 		case (code == KEYCODE_RIGHT): //RIGHT
 			if(curPos < inputText.length) curPos++;	
 			break;
+		case (code == KEYCODE_UP): //UP
+			inputText[curPos] = nextChar(inputText[curPos], 1);
+			break;
+		case (code == KEYCODE_DOWN): //DOWN
+			inputText[curPos] = nextChar(inputText[curPos], -1);
+			break;
 		case (code == KEYCODE_ENTER): //ENTER
 			if(inputText.length > 0) { 
 				inputFinish();
@@ -528,5 +573,7 @@ function inputString(_stage, _maxSize, _startX, _startY, _defaultString, _callba
 		_stage.update();
 
 		_callbackFun(inputText.join(""));
+		
+		inputNameState = 0;
 	}
 }

lodeRunner.html

@@ -2,9 +2,9 @@
 <html>
 <head>
 	<title>Lode Runner Web Game</title>
-	<!-- DON'T FORGET TO MODIFY *.web.html
-	* ============================================================================= 
-	* Lode Runner (超級運動員) - APPLE-II version
+	<!--
+	* =================================================================================== 
+	* Lode Runner (超級運動員) - APPLE II & C64 version
 	*
 	* This program is a HTML5 remake game.
 	*
@@ -15,10 +15,11 @@
 	* http://www.kingstone.com.tw/book/book_page.asp?kmcode=2014710650538
 	* http://www.amazon.co.jp/Lode-Runnerで学ぶ実践C言語-ビー・エヌ・エヌ企画部/dp/4893690116
 	* 
-	* Source Code: https://github.com/SimonHung/LodeRunner
+	* Source Code: https://github.com/SimonHung/LodeRunner_TotalRecall
+	* Web page: http://LodeRunnerWebGame.com
 	*
-	* by Simon Hung 06/20/2014, 11/23/2014, 06/29/2015 (http://simonsays-tw.com)
-	* ============================================================================= 
+	* by Simon Hung 06/20/2014, 11/23/2014, 06/29/2015, 09/28/2016
+	* =================================================================================== 
 	-->
 	<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
 	<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=edge">
@@ -29,9 +30,9 @@
 
 	<script type="text/javascript" src="lodeRunner.wData.js"></script>
 
-	<script type="text/javascript" src="./lib/preloadjs-0.6.0.min.js"></script>
-	<script type="text/javascript" src="./lib/soundjs-0.6.0.min.js"></script>
-	<script type="text/javascript" src="./lib/tweenjs-0.6.0.min.js"></script>
+	<script type="text/javascript" src="./lib/preloadjs-0.6.2.min.js"></script>
+	<script type="text/javascript" src="./lib/soundjs-0.6.2.min.js"></script>
+	<script type="text/javascript" src="./lib/tweenjs-0.6.2.min.js"></script>
 	<script type="text/javascript" src="./lib/easeljs-0.7.1.min.js"></script>
 	
 	<script type="text/javascript" src="flag32Id.js"></script>
@@ -57,9 +58,11 @@
 	<script type="text/javascript" src="lodeRunner.demoData1.js"></script>
 	<script type="text/javascript" src="lodeRunner.edit.js"></script>
 	<script type="text/javascript" src="lodeRunner.preload.js"></script>
+	<script type="text/javascript" src="lodeRunner.colorTheme.js"></script>
+	<script type="text/javascript" src="lodeRunner.colorSelector.js"></script>
+	<script type="text/javascript" src="lodeRunner.gamepad.js"></script>
 	<script type="text/javascript" src="lodeRunner.main.js"></script>
 	<script type="text/javascript" src="lodeRunner.win.js"></script>
-	
 </head>
 <body onload="init();">	
 <div class="canvas">

lodeRunner.iconClass.js

@@ -1,3 +1,6 @@
+
+var mouseOverBGColor = "#fefef1"; //icon background color while mouse over it
+
 function mainMenuIconClass( _screenX1, _screenY1, _scale, _mainMenuBitmap)
 {
 	//_scale = _scale*2/3;
@@ -67,8 +70,6 @@ function mainMenuIconClass( _screenX1, _screenY1, _scale, _mainMenuBitmap)
 		mainMainCanvas.width  = bitmapX+border*2;
 		mainMainCanvas.height = bitmapY+border*2;
 	
-		//var left = (_screenX1 - mainMainCanvas.width - bitmapX/3),
-		//	top  = (_screenY1 - mainMainCanvas.height - bitmapY/4);
 		var left = (_screenX1 - mainMainCanvas.width - screenBorder),
 		    top  = bitmapY/2|0;
 		
@@ -84,7 +85,7 @@ function mainMenuIconClass( _screenX1, _screenY1, _scale, _mainMenuBitmap)
 		menuIcon = new createjs.Container();
 		menuBG = new createjs.Shape();
 		
-		menuBG.graphics.beginFill("#fefef1")
+		menuBG.graphics.beginFill(mouseOverBGColor)
 			      .drawRect(0, 0, bitmapX+border*2, bitmapY+border*2).endFill();
 		menuBG.alpha = 0;
 		menuIcon.addChild(menuBG);
@@ -152,7 +153,6 @@ function mainMenuIconClass( _screenX1, _screenY1, _scale, _mainMenuBitmap)
 
 function selectIconClass( _screenX1, _screenY1, _scale, _bitmap)
 {
-	//_scale = _scale*2/3;
 	var border = 4 * _scale;
 	var selectCanvas, stage;
 	var	selectIcon, selectBG;
@@ -220,9 +220,6 @@ function selectIconClass( _screenX1, _screenY1, _scale, _bitmap)
 		selectCanvas.width  = bitmapX+border*2;
 		selectCanvas.height = bitmapY+border*2;
 	
-		//var left = (_screenX1 - selectCanvas.width - bitmapX/3),
-		//	top  = bitmapY/4|0;
-			//top  = (_screenY1 - selectCanvas.height - bitmapY/4);
 		var left = (_screenX1 - selectCanvas.width - screenBorder),
 		    top  = (selectCanvas.height + bitmapY)|0;
 		
@@ -238,7 +235,7 @@ function selectIconClass( _screenX1, _screenY1, _scale, _bitmap)
 		selectIcon = new createjs.Container();
 		selectBG = new createjs.Shape();
 		
-		selectBG.graphics.beginFill("#fefef1")
+		selectBG.graphics.beginFill(mouseOverBGColor)
 			      .drawRect(0, 0, bitmapX+border*2, bitmapY+border*2).endFill();
 		selectBG.alpha = 0;
 		selectIcon.addChild(selectBG);
@@ -288,9 +285,6 @@ function selectIconClass( _screenX1, _screenY1, _scale, _bitmap)
 
 	function activeSelectPlay(level)
 	{
-		//debug("time play:" + level);
-		//if(callbackFun != null) callbackFun();
-		
 		soundStop(soundDig); 
 		soundStop(soundFall);
 		switch(playMode) {
@@ -343,18 +337,8 @@ function selectIconClass( _screenX1, _screenY1, _scale, _bitmap)
 	}
 }
 
-//==============================================================
-//
-// Champ icon will open a new window contains world high score 
-// while back to lode runner main window (onfocus) will auto
-// close "lode runner world high score" window
-//
-// 10/08/2014
-//==============================================================
-
 function demoIconClass( _screenX1, _screenY1, _scale, _bitmap)
 {
-	//_scale = _scale*2/3;
 	var border = 4 * _scale;
 	var canvas, stage;
 	var	iconObj, bgObj;
@@ -442,7 +426,7 @@ function demoIconClass( _screenX1, _screenY1, _scale, _bitmap)
 		
 		//create background shape
 		bgObj = new createjs.Shape();
-		bgObj.graphics.beginFill("#fefef1")
+		bgObj.graphics.beginFill(mouseOverBGColor)
 			      .drawRect(0, 0, bitmapX+border*2, bitmapY+border*2).endFill();
 		bgObj.alpha = 0;
 		
@@ -485,7 +469,7 @@ function demoIconClass( _screenX1, _screenY1, _scale, _bitmap)
 		demoSoundOff = 1; //always sound off when start demo
 		playMode = PLAY_DEMO_ONCE;
 		anyKeyStopDemo();
-		////setDemoInfo(); //save curLevel to demo info
+
 		startGame(1);
 		setTimeout(function() {showTipsText("HIT ANY KEY TO STOP DEMO", 3500);}, 50);
 	}
@@ -505,7 +489,6 @@ function demoIconClass( _screenX1, _screenY1, _scale, _bitmap)
 
 function soundIconClass( _screenX1, _screenY1, _scale, _soundOnBitmap, _soundOffBitmap)
 {
-	//_scale = _scale*2/3;
 	var border = 4 * _scale;
 	var canvas, stage;
 	var	iconObj, bgObj;
@@ -603,13 +586,13 @@ function soundIconClass( _screenX1, _screenY1, _scale, _soundOnBitmap, _soundOff
 		
 		//create background shape
 		bgObj = new createjs.Shape();
-		bgObj.graphics.beginFill("#fefef1")
+		bgObj.graphics.beginFill(mouseOverBGColor)
 			      .drawRect(0, 0, bitmapX+border*2, bitmapY+border*2).endFill();
 		bgObj.alpha = 0;
 		
 		//change bitmap size
-		_soundOnBitmap.setTransform(border, border, _scale, _scale); //sound on bitmap
-		_soundOffBitmap.setTransform(border, border, _scale, _scale); //sound iff bitmap
+		_soundOnBitmap.setTransform(border, border, _scale, _scale);
+		_soundOffBitmap.setTransform(border, border, _scale, _scale);
 		
 		iconObj.set({alpha:0})
 		
@@ -618,8 +601,6 @@ function soundIconClass( _screenX1, _screenY1, _scale, _soundOnBitmap, _soundOff
 		stage.update();
 	}
 
-
-	
 	function mouseOver()
 	{
 		if( gameState == GAME_PAUSE || (gameState != GAME_START && gameState != GAME_RUNNING) ) return;
@@ -650,9 +631,7 @@ function soundIconClass( _screenX1, _screenY1, _scale, _soundOnBitmap, _soundOff
 		mouseOut();
 	}	
 	
-	
 	init();
-
 }
 
 function repeatActionIconClass( _screenX1, _screenY1, _scale, _repeatActionOnBitmap, _repeatActionOffBitmap)
@@ -722,7 +701,6 @@ function repeatActionIconClass( _screenX1, _screenY1, _scale, _repeatActionOnBit
 		canvas.height = bitmapY+border*2;
 		
 		var left = (_screenX1 - canvas.width - screenBorder),
-			//top  = (_screenY1 - bitmapY*4.8)|0;
 		    top  = (_screenY1 - bitmapY*6.4)|0;
 		
 		canvas.style.left = left + "px";
@@ -748,13 +726,13 @@ function repeatActionIconClass( _screenX1, _screenY1, _scale, _repeatActionOnBit
 		
 		//create background shape
 		bgObj = new createjs.Shape();
-		bgObj.graphics.beginFill("#fefef1")
+		bgObj.graphics.beginFill(mouseOverBGColor)
 			      .drawRect(0, 0, bitmapX+border*2, bitmapY+border*2).endFill();
 		bgObj.alpha = 0;
 		
 		//change bitmap size
-		_repeatActionOnBitmap.setTransform(border, border, _scale, _scale); //sound on bitmap
-		_repeatActionOffBitmap.setTransform(border, border, _scale, _scale); //sound iff bitmap
+		_repeatActionOnBitmap.setTransform(border, border, _scale, _scale);
+		_repeatActionOffBitmap.setTransform(border, border, _scale, _scale);
 		
 		iconObj.set({alpha:0})
 		
@@ -861,7 +839,6 @@ function infoIconClass( _screenX1, _screenY1, _scale, _bitmap)
 		canvas.height = bitmapY+border*2;
 	
 		var left = (_screenX1 - canvas.width - screenBorder),
-			//top  = (_screenY1 - bitmapY*3.2);
 		    top  = (_screenY1 - bitmapY*4.8);
 		
 		canvas.style.left = left + "px";
@@ -877,7 +854,7 @@ function infoIconClass( _screenX1, _screenY1, _scale, _bitmap)
 		
 		//create background shape
 		bgObj = new createjs.Shape();
-		bgObj.graphics.beginFill("#fefef1")
+		bgObj.graphics.beginFill(mouseOverBGColor)
 			      .drawRect(0, 0, bitmapX+border*2, bitmapY+border*2).endFill();
 		bgObj.alpha = 0;
 		
@@ -948,7 +925,6 @@ function infoIconClass( _screenX1, _screenY1, _scale, _bitmap)
 
 function helpIconClass( _screenX1, _screenY1, _scale, _bitmap)
 {
-	//_scale = _scale*2/3;
 	var border = 4 * _scale;
 	var canvas, stage;
 	var	iconObj, bgObj;
@@ -1015,7 +991,6 @@ function helpIconClass( _screenX1, _screenY1, _scale, _bitmap)
 		canvas.height = bitmapY+border*2;
 	
 		var left = (_screenX1 - canvas.width - screenBorder),
-			//top  = (_screenY1 - bitmapY*1.6);
 		    top  = (_screenY1 - bitmapY*3.2);
 		
 		canvas.style.left = left + "px";
@@ -1031,7 +1006,7 @@ function helpIconClass( _screenX1, _screenY1, _scale, _bitmap)
 		
 		//create background shape
 		bgObj = new createjs.Shape();
-		bgObj.graphics.beginFill("#fefef1")
+		bgObj.graphics.beginFill(mouseOverBGColor)
 			      .drawRect(0, 0, bitmapX+border*2, bitmapY+border*2).endFill();
 		bgObj.alpha = 0;
 		
@@ -1103,7 +1078,6 @@ function helpIconClass( _screenX1, _screenY1, _scale, _bitmap)
 
 function themeIconClass( _screenX1, _screenY1, _scale, _themeBitmapApple2, _themeBitmapC64)
 {
-	//_scale = _scale*2/3;
 	var border = 4 * _scale;
 	var themeCanvas, stage;
 	var	themeIcon, themeBG;
@@ -1115,6 +1089,8 @@ function themeIconClass( _screenX1, _screenY1, _scale, _themeBitmapApple2, _them
 	var self = this;
 	var enabled = 0;
 	
+	var outColor = backgroundColor;
+	
 	init();
 	
 	function init()
@@ -1171,7 +1147,6 @@ function themeIconClass( _screenX1, _screenY1, _scale, _themeBitmapApple2, _them
 		themeCanvas.height = bitmapY+border*2;
 	
 		var left = (_screenX1 - themeCanvas.width - screenBorder),
-			//top  = (_screenY1 - themeCanvas.height)/2|0;
 		    top  = (_screenY1 - bitmapY*1.5);
 		
 		themeCanvas.style.left = left + "px";
@@ -1187,9 +1162,9 @@ function themeIconClass( _screenX1, _screenY1, _scale, _themeBitmapApple2, _them
 		
 		//create background shape
 		themeBG = new createjs.Shape();
-		themeBG.graphics.beginFill("#fefef1")
+		themeBG.graphics.beginFill(outColor)
 			      .drawRect(0, 0, bitmapX+border*2, bitmapY+border*2).endFill();
-		themeBG.alpha = 0;
+		//themeBG.alpha = 0;
 		
 		//change bitmap size
 		_themeBitmapApple2.setTransform(border, border, _scale, _scale);
@@ -1198,7 +1173,6 @@ function themeIconClass( _screenX1, _screenY1, _scale, _themeBitmapApple2, _them
 		themeIcon.set({alpha:0})
 		stage.addChild(themeIcon);
 		updateThemeImage(0);
-		//stage.update();
 	}
 	
 	function updateThemeImage(showTips)
@@ -1219,41 +1193,35 @@ function themeIconClass( _screenX1, _screenY1, _scale, _themeBitmapApple2, _them
 	
 	function mouseOver()
 	{
-		if(gameState == GAME_PAUSE || (gameState == GAME_WAITING && playMode != PLAY_EDIT) || 
-		   (gameState != GAME_START  && playMode != PLAY_DEMO && playMode != PLAY_DEMO_ONCE && playMode != PLAY_EDIT))
-			return;
-		
+		if(gameState == GAME_PAUSE || (gameState == GAME_WAITING && playMode != PLAY_EDIT)) return;
 		stage.cursor = "pointer";
-		themeBG.alpha = 1;
 		stage.update();
 	}
 	
 	function mouseOut()
 	{
 		stage.cursor = "default";
-		themeBG.alpha = 0;
 		stage.update();
 	}
 
 	function mouseClick()
 	{
-		if(gameState == GAME_PAUSE || (gameState == GAME_WAITING && playMode != PLAY_EDIT) || 
-		   (gameState != GAME_START && playMode != PLAY_DEMO && playMode != PLAY_DEMO_ONCE && playMode != PLAY_EDIT))
-			return;
-		
+		if(gameState == GAME_PAUSE || (gameState == GAME_WAITING && playMode != PLAY_EDIT)) return;
 		curTheme = (curTheme == THEME_APPLE2?THEME_C64:THEME_APPLE2);
+		
 		saveState();
 
 		soundStop(soundDig); 
 		soundStop(soundFall);
 	
-		themeDataReset();
+		themeDataReset(1);
 		updateThemeImage(1);
-		mouseOut();
+		themeColorIconUpdate();
+		
 		if(playMode == PLAY_EDIT) {
 			startEditMode();		
 		} else {
-			startGame(1);
+			changeThemeScreen(); //real time change theme screen
 		}
 	}
 	
@@ -1263,237 +1231,128 @@ function themeIconClass( _screenX1, _screenY1, _scale, _themeBitmapApple2, _them
 		if(playMode == PLAY_EDIT) {
 			if(editLevelModified()) saveTestState();
 			stopEditTicker();
-		} else {
-			stopPlayTicker();
-			stopAllSpriteObj();
 		}
 	}
 }
 
-//////////////////////////////////////////////////////////////////////////////////////////////////////
-/*
-function iconBase(_screenX, _screenY, _scale, _bitmap1, _bitmap2, _posY)
+function themeColorIconUpdate()
 {
-	var	border = 4 * _scale;
-	var canvas, stage;
-
-	var	iconObj, bgObj;
-	var mouseOverHandler = null, mouseOutHandler = null, mouseClickHandler = null;
-	
-	var bitmapX = _bitmap1.getBounds().width * _scale;
-	var bitmapY = _bitmap1.getBounds().height * _scale;	
-	var self = this;
-	var enabled = 0;
-	
-	function enableMouseHandler()
-	{
-		mouseOverHandler = iconObj.on("mouseover", mouseOver);
-		mouseOutHandler = iconObj.on("mouseout", mouseOut);
-		mouseClickHandler = iconObj.on("click", mouseClick);
-	}
-	
-	function disableMouseHandler()
-	{
-		iconObj.removeEventListener("mouseover", mouseOverHandler);
-		iconObj.removeEventListener("mouseout", mouseOutHandler);
-		iconObj.removeEventListener("click", mouseClickHandler);
-		stage.cursor = "default";
-		stage.update();
-	}
-	
-	function createCanvas()
-	{
-		canvas = document.createElement('canvas');
-		canvas.id = "theme_menu";
-		canvas.width  = bitmapX+border*2;
-		canvas.height = bitmapY+border*2;
-	
-		var left = (_screenX1 - canvas.width),
-			top  = (_screenY1 - _posY)|0;
-		
-		canvas.style.left = left + "px";
-		canvas.style.top =  top + "px";
-		canvas.style.position = "absolute";
-		document.body.appendChild(canvas);
-	}
-	
-	function createIcon()
-	{
-		stage = new createjs.Stage(canvas);
-		iconObj = new createjs.Container();
-		
-		//create background shape
-		bgObj = new createjs.Shape();
-		bgObj.graphics.beginFill("#fefef1")
-			      .drawRect(0, 0, bitmapX+border*2, bitmapY+border*2).endFill();
-		bgObj.alpha = 0;
-		
-		//change bitmap size
-		_bitmap1.setTransform(border, border, _scale, _scale);
-		if(_bitmap2) _bitmap2.setTransform(border, border, _scale, _scale);
-		
-		iconObj.set({alpha:0})
-		stage.addChild(iconObj);
-		
-		updateImage();
-		//stage.update();
-	}	
-	
-	function updateImage()
-	{
-		iconObj.addChild(bgObj);
-		iconObj.addChild(_bitmap1);
-		stage.update();
-	}
-
-	function invalidState()
-	{
-		if(gameState == GAME_PAUSE || 
-		   (gameState != GAME_START && gameState != GAME_RUNNING && playMode != PLAY_EDIT)) return 1;
-		
-		return 0;
-	}
-	
-	function mouseOver()
-	{
-		if(invalidState()) return;
-		
-		stage.cursor = "pointer";
-		bgObj.alpha = 1;
-		stage.update();
-	}
-	
-	function mouseOut()
-	{
-		stage.cursor = "default";
-		bgObj.alpha = 0;
-		stage.update();
-	}	
-
-	function mouseClick()
-	{
-		if(gameState == GAME_PAUSE || 
-		   (gameState != GAME_START && playMode != PLAY_DEMO && playMode != PLAY_DEMO_ONCE && playMode != PLAY_EDIT))
-			return;
-		
-		curTheme = (curTheme == THEME_APPLE2?THEME_C64:THEME_APPLE2);
-		saveState();
-		
-		soundStop(soundDig); 
-		soundStop(soundFall);
-		
-		themeDataReset();
-		updateThemeImage();
-		mouseOut();
-		if(playMode == PLAY_EDIT) {
-			startEditMode();		
-		} else {
-			startGame(1);
-		}
-	}
-		
-	
+	themeColorObj.themeChange();
 }
 
-iconBase.prototype.init = function()
+//======================================
+// BEGIN: Change Theme Screen real time
+//======================================
+
+function changeThemeScreen()
 {
-	this.createCanvas();
-	this.createIcon();
+	rebuildMap();
+	
+	//Change runner theme
+	runner.sprite.spriteSheet = runnerData;
+	
+	//change guard theme
+	for(var i = 0; i < guardCount; i++) {
+		if(redhatMode && guard[i].hasGold > 0)
+			guard[i].sprite.spriteSheet = redhatData;
+		else
+			guard[i].sprite.spriteSheet = guardData;
+	}
+	
+	//change holeObj theme
+	holeObj.sprite.spriteSheet = holeData;
+	
+	//change fillHoleObj theme
+	for(var i = 0; i < fillHoleObj.length; i++) {
+		fillHoleObj[i].spriteSheet = holeData;
+	}
+	
+	moveSprite2Top();
+	
+	clearGround();
+	clearInfo();
+	initInfoVariable();
+	buildGroundInfo();
 }
 
-iconBase.prototype.enable = function()
+function rebuildMap() 
 {
-	if(enabled) return;
-	enabled = 1;
-	disableMouseHandler();
-	enableMouseHandler();
-	iconObj.set({alpha:1})
-	stage.enableMouseOver(60);
-	stage.update();
+	var curTile;
+	
+	for(var x = 0; x < NO_OF_TILES_X; x++) {
+		for(var y = 0; y < NO_OF_TILES_Y; y++) {
+			switch(map[x][y].base) {
+			default:		
+			case EMPTY_T: //empty		
+				continue;
+			case BLOCK_T: //Normal Brick		
+				curTile = getThemeBitmap("brick");		
+				if(map[x][y].bitmap.alpha < 1) curTile.set({alpha:0}); //hide brick digging
+				break;	
+			case SOLID_T: //Solid Brick		
+				curTile = getThemeBitmap("solid");		
+				break;	
+			case LADDR_T: //Ladder
+				curTile = getThemeBitmap("ladder");
+				break;	
+			case BAR_T: //Line of rope
+				curTile = getThemeBitmap("rope");
+				break;	
+			case TRAP_T: //False brick
+				curTile = getThemeBitmap("brick");
+				if(map[x][y].bitmap.alpha < 1) curTile.set({alpha:0.5}); //show trap tile
+				break;
+			case HLADR_T: //Ladder appears at end of level
+				curTile = getThemeBitmap("ladder");
+				curTile.set({alpha:0});	//hide the laddr
+				break;
+			case GOLD_T: //Gold
+				curTile = getThemeBitmap("gold");
+				break;	
+			}
+			mainStage.removeChild(map[x][y].bitmap); //remove old
+			curTile.setTransform(x * tileWScale, y * tileHScale, tileScale, tileScale); //x,y, scaleX, scaleY 
+			mainStage.addChild(curTile);  //add new
+			map[x][y].bitmap = curTile;   //replace bitmap 
+		}
+	}
 }
 
-iconBase.prototype.disable = function(hidden)
+function clearGround()
 {
-	disableMouseHandler();
-	if(hidden) {
-		iconObj.set({alpha:0});
-	} else {
-		iconObj.set({alpha:1})
-	}
-	stage.update();
-	enabled = 0;
-	stage.enableMouseOver(0);
+	for(var i = 0; i < groundTile.length; i++) 
+		mainStage.removeChild(groundTile[i]);
 }
 
-
-function themeIconClass( _screenX1, _screenY1, _scale, _themeBitmapApple2, _themeBitmapC64)
+function clearInfo()
 {
-	//_scale = _scale*2/3;
-	var border = 4 * _scale;
-	var themeCanvas, stage;
-	var	themeIcon, themeBG;
-	var saveStateObj;
-	var mouseOverHandler = null, mouseOutHandler = null, mouseClickHandler = null;
+	var i;
 
-	var bitmapX = _themeBitmapApple2.getBounds().width * _scale;
-	var bitmapY = _themeBitmapApple2.getBounds().height * _scale;	
-	var self = this;
-	var enabled = 0;
+	if(playMode == PLAY_CLASSIC || playMode == PLAY_AUTO || playMode == PLAY_DEMO) {
+		for(i = 0; i < scoreTxt.length; i++) mainStage.removeChild(scoreTxt[i]);
+		for(i = 0; i < scoreTile.length; i++) mainStage.removeChild(scoreTile[i]);
 
-	init();
-
-	
-
-
-	
-	function updateThemeImage()
-	{
-		themeIcon.removeAllChildren();
-		themeIcon.addChild(themeBG);
-		
-		if(curTheme == THEME_APPLE2) {
-			themeIcon.addChild(_themeBitmapApple2);
+		if(playMode == PLAY_DEMO) {
+			for(i = 0; i < demoTxt.length; i++) mainStage.removeChild(demoTxt[i]);
 		} else {
-			themeIcon.addChild(_themeBitmapC64);
+			for(i = 0; i < lifeTxt.length; i++) mainStage.removeChild(lifeTxt[i]);
+			for(i = 0; i < lifeTile.length; i++) mainStage.removeChild(lifeTile[i]);
 		}
-		stage.update();
+	} else { //PLAY_MODERN, PLAY_DEMO_ONCE
+		for(i = 0; i < goldTxt.length; i++) mainStage.removeChild(goldTxt[i]);
+		for(i = 0; i < goldTile.length; i++) mainStage.removeChild(goldTile[i]);
+
+		for(i = 0; i < guardTxt.length; i++) mainStage.removeChild(guardTxt[i]);
+		for(i = 0; i < guardTile.length; i++) mainStage.removeChild(guardTile[i]);
+
+		for(i = 0; i < timeTxt.length; i++) mainStage.removeChild(timeTxt[i]);
+		for(i = 0; i < timeTile.length; i++) mainStage.removeChild(timeTile[i]);
 	}
 	
-
-
-	function mouseClick()
-	{
-		if(gameState == GAME_PAUSE || 
-		   (gameState != GAME_START && playMode != PLAY_DEMO && playMode != PLAY_DEMO_ONCE && playMode != PLAY_EDIT))
-			return;
-		
-		curTheme = (curTheme == THEME_APPLE2?THEME_C64:THEME_APPLE2);
-		saveState();
-		
-		soundStop(soundDig); 
-		soundStop(soundFall);
-		
-		themeDataReset();
-		updateThemeImage();
-		mouseOut();
-		if(playMode == PLAY_EDIT) {
-			startEditMode();		
-		} else {
-			startGame(1);
-		}
-	}
-	
-	function saveState()
-	{
-		setThemeMode(curTheme);
-		if(playMode == PLAY_EDIT) {
-			if(editLevelModified()) saveTestState();
-			stopEditTicker();
-		} else {
-			stopPlayTicker();
-			stopAllSpriteObj();
-		}
-	}
+	for(i = 0; i < levelTxt.length; i++) mainStage.removeChild(levelTxt[i]);
+	for(i = 0; i < levelTile.length; i++) mainStage.removeChild(levelTile[i]);	
 }
 
-*/
+//======================================
+// END: Change Theme Screen real time
+//======================================

lodeRunner.info.js

@@ -194,7 +194,7 @@ function infoMenuClass(_stage, _scale)
 				infoObj[i].type = 'TITLE';	
 				infoObj[i].text = new createjs.Text(infoList[i].contain, 
 				                      "bold " + TITLE_TEXT_SIZE + "px Helvetica",TITLE_TEXT_COLOR);
-				infoObj[i].text.shadow = new createjs.Shadow(TITLE_TEXT_SHADOW_COLOR, 0, 0, 2 );
+				infoObj[i].text.shadow = new createjs.Shadow(TITLE_TEXT_SHADOW_COLOR, 1, 1, 1 );
 				infoObj[i].width = infoObj[i].text.getBounds().width;
 				infoObj[i].height = infoObj[i].text.getBounds().height;
 				menuY += (infoObj[i].height * 3/2|0);	
@@ -489,5 +489,4 @@ function infoMenuClass(_stage, _scale)
 		//add setTimeout just don't cause mouse event (click) cascade!
 		if(callBackFun) setTimeout(function() { callBackFun(callBackArgs);}, 10); 
 	}	
-	
 }

lodeRunner.key.js

@@ -44,6 +44,10 @@ function pressCtrlKey(code)
 		copyLevelPassed = 1; //means copy from exists level	
 		showTipsText("COPY MAP", 1500);	
 		break;	
+	case KEYCODE_J:	//CTRL-J : gamepad toggle
+		toggleGamepadMode(1);
+		//if(gamepadIconObj) gamepadIconObj.updateGamepadImage();	
+		break;	
 	case KEYCODE_K: //CTRL-K : repeat actions On/Off
 		toggleRepeatAction();	
 		repeatActionIconObj.updateRepeatActionImage();	
@@ -74,6 +78,16 @@ function pressCtrlKey(code)
 	case KEYCODE_RIGHT: //SHIFT + -> : speed up
 		setSpeed(1);	
 		break;
+	case KEYCODE_H:	//CTRL-H : redHat mode on/off
+		toggleRedhatMode();
+		break;
+	case KEYCODE_1: //CTRL-1
+	case KEYCODE_2: //CTRL-2
+	case KEYCODE_3: //CTRL-3
+	case KEYCODE_4: //CTRL-4
+	case KEYCODE_5: //CTRL-5
+		themeColorChange(code - KEYCODE_1);
+		break;	
 	}
 }
 
@@ -117,7 +131,8 @@ function debugKeyPress(code)
 
 var repeatAction = 0;  //1: keyboard repeat on, 0: keyboard repeat Off
 var repeatActionPressed = 0;
-
+var gamepadMode = 1; //0: disable, 1: enable
+var redhatMode = 1;
 var godMode = 0, godModeKeyPressed = 0;
 
 function initHotKeyVariable()
@@ -130,10 +145,8 @@ function initHotKeyVariable()
 function toggleRepeatAction()
 {
 	if( (repeatAction ^= 1) == 1) {
-		//showTipsText("REPEAT ACTIONS ON", 0, "APPLE-II MODE");
 		showTipsText("REPEAT ACTIONS ON", 2500);
 	} else {
-		//showTipsText("REPEAT ACTIONS OFF", 0, "NES MODE");
 		showTipsText("REPEAT ACTIONS OFF", 2500);
 	}
 	if(gameState != GAME_START) repeatActionPressed=1; //player change the "repeatAction" Mode at running
@@ -141,6 +154,42 @@ function toggleRepeatAction()
 	setRepeatAction();
 }
 
+function toggleGamepadMode(textMsg)
+{
+	if(!gamepadSupport()) {
+		if(textMsg) showTipsText("GAMEPAD NOT SUPPORTED", 2500);
+		gamepadMode = 0;
+	} else {
+		if( (gamepadMode ^= 1) == 1) {
+			gamepadEnable();
+			if(textMsg) showTipsText("GAMEPAD ON", 2500);
+		} else {
+			gamepadDisable();
+			if(textMsg) showTipsText("GAMEPAD OFF", 2500);
+		}
+	}
+	setGamepadMode();
+}
+
+function toggleRedhatMode()
+{
+	if( (redhatMode ^= 1) == 1 ) { //enable
+		for(var i = 0; i < guardCount; i++) {
+			if(guard[i].hasGold > 0)
+				guard[i].sprite.spriteSheet = redhatData;
+			else	
+				guard[i].sprite.spriteSheet = guardData;
+		}
+		showTipsText("REDHAT MODE ON", 1500);
+	} else { //disable
+		for(var i = 0; i < guardCount; i++) {
+				guard[i].sprite.spriteSheet = guardData;
+		}
+		showTipsText("REDHAT MODE OFF", 1500);
+	}
+}
+
+
 function toggleGodMode()
 {
 	godModeKeyPressed = 1; //means player press the god-mod hot-key
@@ -173,26 +222,34 @@ function pressKey(code)
 	switch(code) {
 	case KEYCODE_LEFT:        
 	case KEYCODE_J:	
+	case KEYCODE_A:		
 		keyAction = ACT_LEFT;
 		break;
 	case KEYCODE_RIGHT: 
 	case KEYCODE_L:		
+	case KEYCODE_D:
 		keyAction = ACT_RIGHT;
 		break;
 	case KEYCODE_UP:
 	case KEYCODE_I:
+	case KEYCODE_W:
 		keyAction = ACT_UP;
 		break;
 	case KEYCODE_DOWN: 
 	case KEYCODE_K:
+	case KEYCODE_S:
 		keyAction = ACT_DOWN;
 		break;
 	case KEYCODE_Z:
 	case KEYCODE_U:	
+	case KEYCODE_Q:		
+	case KEYCODE_COMMA: //,
 		keyAction = ACT_DIG_LEFT;
 		break;	
 	case KEYCODE_X:
 	case KEYCODE_O:
+	case KEYCODE_E:		
+	case KEYCODE_PERIOD: //.
 		keyAction = ACT_DIG_RIGHT;
 		break;	
 	case KEYCODE_ESC: //help & pause
@@ -260,17 +317,7 @@ function handleKeyDown(event)
 		}
 		
 	}
- /*
-	//e.cancelBubble is supported by IE - this will kill the bubbling process.
-	event.cancelBubble = true;
-	event.returnValue = false;
 	
-	//event.stopPropagation works only in Firefox.
-	if (event.stopPropagation) {
-		event.stopPropagation();
-		event.preventDefault();
-	}
- */	
 	if(event.keyCode >= 112 && event.keyCode <= 123) return true; //F1 ~ F12
 	return false;
 	

lodeRunner.main.js

@@ -1,5 +1,5 @@
 /** 
- * @license ============================================================================= 
+ * @license ================================================================================== 
  * Lode Runner main program
  *
  * This program is a HTML5 remake of the Lode Runner games (APPLE II & C64 version).
@@ -9,11 +9,13 @@
  *
  * The AI algorithm reference book:
  * http://www.kingstone.com.tw/book/book_page.asp?kmcode=2014710650538
+ * http://www.amazon.co.jp/Lode-Runnerで学ぶ実践C言語-ビー・エヌ・エヌ企画部/dp/4893690116
  * 
- * Source Code: https://github.com/SimonHung/LodeRunner
+ * Source Code: https://github.com/SimonHung/LodeRunner_TotalRecall
+ * Web page: http://LodeRunnerWebGame.com
  *
- * by Simon Hung 2014/06/20, 2015/06/13 (http://simonsays-tw.com)
- * ============================================================================= 
+ * by Simon Hung 06/20/2014, 06/13/2015, 09/28/2016
+ * ==================================================================================
  */
 
 window.name = 'lodeRunnerParent'; //for world high score switch back 5/31/2015
@@ -34,11 +36,11 @@ var canvas;
 var mainStage, scoreStage;
 var loadingTxt;
 
-var gameState, lastGameState ;
+var gameState, lastGameState;
 var tileScale, xMove, yMove;
 
-//var speedMode = [15, 20, 25, 30, 35]; //slow   normal  fast 
 var speedMode = [14, 18, 23, 29, 35]; //slow   normal  fast , slow down all speed 6/2/2016
+
 var speedText = ["VERY SLOW", "SLOW", "NORMAL", "FAST", "VERY FAST"];
 var speed = 2; //normal 
 var demoSpeed = 35;
@@ -50,12 +52,14 @@ var playMode = PLAY_CLASSIC;
 var playData = 1; //classic lode runner
 var curTime = 0; //count from 0 to MAX_TIME_COUNT
 
+var backgroundColor = "#250535"; //background color
+
 var playerName = "";
 var playerUId = "";
 
 var curTheme = THEME_APPLE2; //support 2 themes: apple2 & C64
 
-var dbName="LodeRunner";
+var dbName = "LodeRunner";
 
 function init()
 {
@@ -63,7 +67,6 @@ function init()
 	screenX1 = screenSize.x;
 	screenY1 = screenSize.y;
 	
-	//loadDataJS(); //load demo data file
 	canvasReSize();
 	createStage();
 	setBackground();
@@ -80,29 +83,6 @@ function init()
 	showLoadingPage(); //preload function 
 }
 
-/*
-function loadDataJS()
-{
-	var arg = getUrlArgument();
-	var js = document.createElement('script');
-	
-	js.type = "text/javascript";
-	
-	////js.src = "lodeRunner.wData.jss" + ((arg == null)?"": ("?" + arg));
-	js.src = "lodeRunner.wData.jss" + ("?dbName=" + dbName) + ((arg == null)? "" : ("&" + arg)); //add set dbName
-	//console.log(js.src);
-	
-	js.onload = function() {
-		loadStoreVariable(); //load data from localStorage
-		initMenuVariable();  //init menu variable
-		initDemoModeVariable();
-		debug('demo data load complete');
-	}; 
-	//document.body.appendChild(js);
-	document.getElementsByTagName('head')[0].appendChild(js);
-}
-*/
-
 function loadStoreVariable()
 {
 	playerName = getPlayerName();
@@ -111,17 +91,19 @@ function loadStoreVariable()
 		setUid(playerUid);
 	}
 	curTheme = getThemeMode();
+	getThemeColor();
 	getRepeatAction();
+	if(getGamepadMode()) gamepadEnable();
 }
 
 function canvasReSize() 
 {
 	var iconSizeX;
-	for (var scale = MAX_SCALE*100; scale >= MIN_SCALE*100; scale -= 25) {
+	for (var scale = MAX_SCALE*100; scale >= MIN_SCALE*100; scale -= 5) {
 		tileScale = scale / 100;
 		canvasX = BASE_SCREEN_X * tileScale;
 		canvasY = BASE_SCREEN_Y * tileScale;
-		if (canvasX <= screenX1 && canvasY <= screenY1 || tileScale <= MIN_SCALE) break;
+		//if (canvasX <= screenX1 && canvasY <= screenY1 || tileScale <= MIN_SCALE) break;
 		iconSizeX = BASE_ICON_X * 2 * tileScale;
 		if( (canvasX+iconSizeX) <= screenX1 && canvasY <= screenY1 || tileScale <= MIN_SCALE) break;
 	}
@@ -156,9 +138,6 @@ function canvasReSize()
 	W4 = (tileW/4|0); //10, 7, 5,
 	H4 = (tileH/4|0); //11, 8, 5,
 	
-	//xMove and yMove initial by setSpeedByAiVersion() 
- 	//xMove = 4 * tileScale * 2;
- 	//yMove = 4 * tileScale * 2;		
 }
 
 function createStage() 
@@ -178,7 +157,7 @@ function setBackground()
 	var background = new createjs.Shape();
 	background.graphics.beginFill("#000000").drawRect(0, 0, canvas.width, canvas.height);
 	mainStage.addChild(background);
-	document.body.style.background = "#301050";
+	document.body.style.background = backgroundColor;
 }
 
 function showCoverPage()
@@ -186,6 +165,7 @@ function showCoverPage()
 	menuIconDisable(1);
 	clearIdleDemoTimer();
 	mainStage.removeAllChildren();	
+	mainStage.addChild(titleBackground); //colorful background
 	mainStage.addChild(coverBitmap);
 	mainStage.addChild(signetBitmap);
 	mainStage.addChild(remakeBitmap);
@@ -194,6 +174,13 @@ function showCoverPage()
 }
 
 var idleTimer=null, startIdleTime;
+
+function clearIdleDemoTimer()
+{
+	if(idleTimer) clearInterval(idleTimer);
+	idleTimer = null;
+}
+
 function waitIdleDemo(maxIdleTime)
 {
 	startIdleTime = new Date();
@@ -247,12 +234,6 @@ function disableStageClickEvent()
 	return rc;
 }
 
-function clearIdleDemoTimer()
-{
-	if(idleTimer) clearInterval(idleTimer);
-	idleTimer = null;
-}
-
 function noKeyDown()
 {
 	return false;
@@ -260,7 +241,6 @@ function noKeyDown()
 
 function anyKeyDown()
 {
-	//if(changingLevel) return false;
 	stopDemoAndPlay();
 }
 
@@ -293,8 +273,6 @@ function getLastPlayInfo()
 	if( (playMode != PLAY_CLASSIC && playMode != PLAY_MODERN) || 
 	    (playData < 1 || (playData > maxPlayId && playData != PLAY_DATA_USERDEF) )
 	){
-	    //(playData != PLAY_DATA_1 && playData != PLAY_DATA_2 && playData != PLAY_DATA_3 && playData != PLAY_DATA_USERDEF) )
-	    //{
 		playMode = PLAY_CLASSIC;
 		playData = 1; //classic lode runner
 	}
@@ -317,7 +295,6 @@ function startPlayTicker()
 	stopPlayTicker();
 	//createjs.Ticker.timingMode = createjs.Ticker.RAF;
 	if(playMode == PLAY_AUTO || playMode == PLAY_DEMO || playMode == PLAY_DEMO_ONCE) {
-		//createjs.Ticker.setFPS(speedMode[speedMode.length-1]); //very fast
 		createjs.Ticker.setFPS(demoSpeed); //06/12/2014
 	} else {
 		createjs.Ticker.setFPS(speedMode[speed]);
@@ -408,29 +385,26 @@ function initVariable()
 
 function buildLevelMap(levelMap) 
 {
+	var index = 0;
+	var mapGuardCount = 0; //Number of original guards 
+	
 	//(1) create empty map[x][y] array;
 	map = [];
 	for(var x = 0; x < NO_OF_TILES_X; x++) {
 		map[x] = [];
 		for(var y = 0; y < NO_OF_TILES_Y; y++) {
 			map[x][y] = {}; 
+			if(levelMap.charAt(index++) == '0') mapGuardCount++;
 		}
 	}
 	
-	
 	//(2) draw map
-/*	
-	var index = 0;
+	index = 0;
 	for(var y = 0; y < NO_OF_TILES_Y; y++) {
 		for(var x = 0; x < NO_OF_TILES_X; x++) {
 			var id = levelMap.charAt(index++);
-*/	
-	var index = NO_OF_TILES_Y * NO_OF_TILES_X - 1;
-	for(var y = NO_OF_TILES_Y-1; y >= 0; y--) {
-		for(var x = NO_OF_TILES_X-1; x >= 0; x--) {
-			var id = levelMap.charAt(index--);
-			
 			var curTile;
+
 			switch(id) {
 			default:		
 			case ' ': //empty
@@ -441,73 +415,60 @@ function buildLevelMap(levelMap)
 			case '#': //Normal Brick
 				map[x][y].base = BLOCK_T;
 				map[x][y].act = BLOCK_T;	
-				curTile = map[x][y].bitmap = new createjs.Bitmap(getThemeImage("brick"));
+				curTile = map[x][y].bitmap = getThemeBitmap("brick");
 				break;	
 			case '@': //Solid Brick
 				map[x][y].base = SOLID_T;
 				map[x][y].act  = SOLID_T;
-				curTile = map[x][y].bitmap = new createjs.Bitmap(getThemeImage("solid"));
+				curTile = map[x][y].bitmap = getThemeBitmap("solid");
 				break;	
 			case 'H': //Ladder
 				map[x][y].base =LADDR_T;
 				map[x][y].act  =LADDR_T;
-				curTile = map[x][y].bitmap = new createjs.Bitmap(getThemeImage("ladder"));
+				curTile = map[x][y].bitmap = getThemeBitmap("ladder");
 				break;	
 			case '-': //Line of rope
 				map[x][y].base = BAR_T;
 				map[x][y].act  = BAR_T;
-				curTile = map[x][y].bitmap = new createjs.Bitmap(getThemeImage("rope"));
+				curTile = map[x][y].bitmap = getThemeBitmap("rope");
 				break;	
 			case 'X': //False brick
 				map[x][y].base = TRAP_T; //behavior same as empty
 				map[x][y].act  = TRAP_T; 
-				curTile = map[x][y].bitmap = new createjs.Bitmap(getThemeImage("brick"));
+				curTile = map[x][y].bitmap = getThemeBitmap("brick");
 				break;
 			case 'S': //Ladder appears at end of level
 				map[x][y].base = HLADR_T; //behavior same as empty before end of level
 				map[x][y].act  = EMPTY_T; //behavior same as empty before end of level
-				curTile = map[x][y].bitmap = new createjs.Bitmap(getThemeImage("ladder"));
+				curTile = map[x][y].bitmap = getThemeBitmap("ladder");
 				curTile.set({alpha:0});	//hide the laddr
 				break;
 			case '$': //Gold chest
 				map[x][y].base = GOLD_T; //keep gold on base map
 				map[x][y].act  = EMPTY_T;
-				curTile = map[x][y].bitmap = new createjs.Bitmap(getThemeImage("gold"));
+				curTile = map[x][y].bitmap = getThemeBitmap("gold");
 				goldCount++;	
 				break;	
 			case '0': //Guard
 				map[x][y].base = EMPTY_T;
 				map[x][y].act  = GUARD_T;  
 				map[x][y].bitmap = null;
-				if(guardCount >= maxGuard) {
+				if(--mapGuardCount >= maxGuard) {
 					map[x][y].act = EMPTY_T;
-					continue;  //too many guard , set this tile as empty
+					continue;  //too many guards, set this tile as empty
 				}
-/*				
-				guard[guardCount] = {};	
-				curTile = guard[guardCount].sprite = new createjs.Sprite(guardData, "runLeft");
-				guard[guardCount].pos = { x:x, y:y, xOffset:0, yOffset:0};	
-				guard[guardCount].action = ACT_STOP;
-				guard[guardCount].shape = "runLeft";
-				guard[guardCount].lastLeftRight = "ACT_LEFT";
-				guard[guardCount].hasGold = 0;
 
-*/
-				//for backward compatible guard order must same as old, so add to beginning of array					
 				curTile = new createjs.Sprite(guardData, "runLeft");
-				guard.unshift({ 
+				guard[guardCount] = { 
 					sprite: curTile,
 					pos: { x:x, y:y, xOffset:0, yOffset:0}, 
 					action: ACT_STOP,
 					shape: "runLeft",
 					lastLeftRight: "ACT_LEFT",
 					hasGold: 0
-				});
-
+				};					
 				guardCount++;	
-				//curTile.gotoAndPlay();	
 				curTile.stop();	
-				//curTile.framerate = 60;	
 				break;	
 			case '&': //Player
 				map[x][y].base = EMPTY_T;
@@ -523,15 +484,14 @@ function buildLevelMap(levelMap)
 				runner.action = ACT_UNKNOWN;	
 				runner.shape = "runRight";	
 				runner.lastLeftRight = "ACT_RIGHT";
-				//curTile.gotoAndPlay();	
 				curTile.stop();	
-				//curTile.framerate = 60;	
 				break;	
 			}
 			curTile.setTransform(x * tileWScale, y * tileHScale, tileScale, tileScale); //x,y, scaleX, scaleY 
 			mainStage.addChild(curTile); 
 		}
 	}
+	assert(mapGuardCount == 0, "Error: mapCuardCount design error !" );
 	moveSprite2Top();
 }
 
@@ -559,7 +519,7 @@ function moveSprite2Top()
 function buildGroundInfo()
 {
 	drawGround();
-	drawInfo(levelData);
+	drawInfo();
 }
 
 var groundTile;
@@ -567,7 +527,7 @@ function drawGround()
 {
 	groundTile = [];
 	for(var x = 0; x < NO_OF_TILES_X; x++) {
-		groundTile[x] = new createjs.Bitmap(getThemeImage("ground"));
+		groundTile[x] = getThemeBitmap("ground");
 		groundTile[x].setTransform(x * tileWScale, NO_OF_TILES_Y * tileHScale, tileScale, tileScale);
 		mainStage.addChild(groundTile[x]); 
 	}
@@ -671,9 +631,6 @@ function drawLevelTxt()
 {
 	var xOffset = 20;
 	
-	//if(playMode == PLAY_CLASSIC || playMode == PLAY_AUTO) xOffset = 20;
-	//else xOffset = 19;
-	
 	levelTxt = drawText(xOffset*tileWScale, infoY, "LEVEL", mainStage);
 }
 
@@ -708,9 +665,6 @@ function drawScore(addScore)
 	for(var i = 0; i < scoreTile.length; i++) 
 		mainStage.removeChild(scoreTile[i]);
 	
-	//if(playMode == PLAY_CLASSIC || playMode == PLAY_AUTO) digitNo = 7;
-	//else digitNo = 6
-	
 	scoreTile = drawText(5*tileWScale, infoY, ("000000"+curScore).slice(-7), mainStage);
 }
 
@@ -870,8 +824,6 @@ function playGame(deltaS)
 		playTickTimer = 0;
 	}
 	
- 	//runner.xMove = 4 * tileScale * 2;
- 	//runner.yMove = 4 * tileScale * 2;
 	if(playMode == PLAY_AUTO || playMode == PLAY_DEMO || playMode == PLAY_DEMO_ONCE) playDemo();
 	if(recordMode) processRecordKey();
 	if(!isDigging()) moveRunner();
@@ -1056,7 +1008,7 @@ function stopAllSpriteObj()
 
 function gameOverAnimation()
 {
-	var gameOverImage = new createjs.Bitmap(getThemeImage("over"));
+	var gameOverImage = getThemeBitmap("over");
 	var bound = gameOverImage.getBounds();
 	var x = (NO_OF_TILES_X*tileWScale)/2|0;
 	var y = (NO_OF_TILES_Y*tileHScale)/2|0;
@@ -1159,11 +1111,7 @@ function closingScreen(r)
 		
 		if(playMode == PLAY_AUTO) getAutoDemoLevel(0);
 		if(playMode == PLAY_DEMO || playMode == PLAY_DEMO_ONCE) getNextDemoLevel();
-/*		
-		if(playMode == PLAY_MODERN || playMode == PLAY_EDIT) {
-			curScore = 0; curGetGold = 0; curGuardDeadNo = 0;
-		}
-*/		
+
 		if(playMode == PLAY_TEST) {
 			levelMap = getTestLevelMap();
 		} else {
@@ -1186,6 +1134,9 @@ function menuIconEnable()
 		soundIconObj.enable();
 		soundIconObj.updateSoundImage();
 		repeatActionIconObj.enable();
+		themeColorObj.enable();
+	} else {
+		if(!editInNarrowScreen) themeColorObj.enable();
 	}
 	infoIconObj.enable();
 	helpIconObj.enable();
@@ -1204,6 +1155,7 @@ function menuIconDisable(hidden)
 	helpIconObj.disable(hidden);
 	repeatActionIconObj.disable(hidden);
 	themeIconObj.disable(hidden);
+	themeColorObj.disable(hidden);
 }
 
 var showStartTipsMsg = 1;
@@ -1249,26 +1201,13 @@ function showDataMsg()
 function showHelpMenu()
 {
 	if(firstPlay) { 
-		helpObj.showHelp(0, initForPlay, null); 
+		helpObj.showHelp(0, initForPlay, tileScale, null); 
 		setFirstPlayInfo();
 	} else {	
 		initForPlay();
 	}	
 }
 
-/* Don't show main menu  
-var first = 1
-function showMainMenu()
-{
-	if(firstPlay && first) {
-		mainMenu(null);
-	} else {
-		showHelpMenu();
-	}
-	first = 0;
-}
-*/ 
-
 function initForPlay()
 {
 	menuIconEnable();
@@ -1304,14 +1243,8 @@ function beginPlay()
 		initPlayDemo();
 		if(playMode == PLAY_DEMO || playMode == PLAY_DEMO_ONCE) initForPlay();
 	} else { 
-/*	Don't display GAME VERSION SELECTION , 6/7/2015		
-		if(playerName == "") {
-			inputPlayerName(mainStage, showMainMenu);
-		} else {
-			showMainMenu();
-		}
-*/
-		if(playerName == "") {
+
+		if(playerName == "" || playerName.length <= 1) {
 			inputPlayerName(mainStage, showHelpMenu);
 		} else {
 			showHelpMenu();
@@ -1406,15 +1339,11 @@ function mainTick(event)
 	
 	switch(gameState) {
 	case GAME_START:
-		//if(demoDataLoading) { showGameLoading(); break }	
-	
-		//if(playMode == PLAY_AUTO) initPlayDemo();
-		//if(recordMode) initRecordVariable();
 		countAutoDemoTimer();	
 		if(keyAction != ACT_STOP && keyAction != ACT_UNKNOWN) {
 			disableAutoDemoTimer();	
+			gamepadClearId();	
 			gameState = GAME_RUNNING;
-			//if(playMode != PLAY_DEMO && playMode != PLAY_DEMO_ONCE) themeIconObj.disable(1);
 			if(playMode == PLAY_MODERN) demoIconObj.disable(1);
 			playTickTimer = 0; //modern mode time counter
 			if(goldCount <= 0) showHideLaddr();
@@ -1424,7 +1353,6 @@ function mainTick(event)
 		playGame(deltaS);
 		break;
 	case GAME_RUNNER_DEAD:
-		//mainStage.update();
 		//console.log("Time=" + curTime + ", Tick= " + playTickTimer);
 		//if(recordMode) recordModeToggle(GAME_RUNNER_DEAD); //for debug only (if enable it must disable below statement)
 		if(recordMode == RECORD_KEY) recordModeDump(GAME_RUNNER_DEAD);	
@@ -1443,7 +1371,6 @@ function mainTick(event)
 				if(playMode == PLAY_CLASSIC) clearClassicInfo();
 				gameState = GAME_OVER_ANIMATION;
 			} else {
-				//stopAllSpriteObj();
 				setTimeout(function() {gameState = GAME_NEW_LEVEL; }, 500);
 				gameState = GAME_WAITING;	
 				if(playMode == PLAY_CLASSIC) setClassicInfo(0);
@@ -1477,19 +1404,14 @@ function mainTick(event)
 		}
 		break;	
 	case GAME_OVER_ANIMATION:
-		//if(playMode == PLAY_CLASSIC) clearClassicInfo();
 		break;	
 	case GAME_OVER:
-		////getClassicInfo();
 		scoreInfo = null;	
 		if(playMode == PLAY_CLASSIC && !sometimePlayInGodMode) {	
-			//try to set hi-score record
-			//scoreInfo = {s:curScore, l:(curLevel>maxLevel)?curLevel:maxLevel};
 			scoreInfo = {s:curScore, l: passedLevel+1 };
 		}	
 			
 		showScoreTable(playData, scoreInfo , function() { showCoverPage();});	
-		//setTimeout(function(){ showCoverPage();}, 2000);
 		gameState = GAME_WAITING;	
 		return;
 	case GAME_FINISH: 

lodeRunner.menu.js

@@ -20,8 +20,9 @@ function helpMenuClass(_stage, _bitmap, _editBitmap, _scale)
 	var HELP_BORDER_SIZE = 24;
 	
 	var saveStateObj;
-	var stage, helpBitmap = [], bitmapId, scale;
-	var helpBorder, helpBackground; //versionText;
+	var playScale, curScale;
+	var stage, helpBitmap = [], bitmapId;
+	var helpBorder, helpBackground, versionText;
 	var startX, startY, menuX, menuY;
 	var closeBoxSize;
 	var callBackFun, callBackArgs;
@@ -31,14 +32,15 @@ function helpMenuClass(_stage, _bitmap, _editBitmap, _scale)
 	helpBitmap[0] = _bitmap;
 	helpBitmap[1] = _editBitmap;
 	bitmapId = 0;
-	scale = _scale;
+	playScale = _scale;
 
-	this.showHelp = function(id, callback, args)
+	this.showHelp = function(id, callback, scale, args)
 	{
+		curScale = scale;
 		if(typeof args == "undefined") args = null;
 		callBackFun = callback;
 		callBackArgs = args;
-		closeBoxSize = 12*scale+2;
+		closeBoxSize = 12*curScale+2;
 		closeIcon = null;
 		bitmapId = id;
 		
@@ -65,10 +67,10 @@ function helpMenuClass(_stage, _bitmap, _editBitmap, _scale)
 
 	function drawHelpMenu()
 	{
-		var borderSize = HELP_BORDER_SIZE * scale;
+		var borderSize = HELP_BORDER_SIZE * curScale;
 		var halfBorder = borderSize/2;
-		var bitmapW = helpBitmap[bitmapId].getBounds().width * scale;
-		var bitmapH = helpBitmap[bitmapId].getBounds().height * scale;
+		var bitmapW = helpBitmap[bitmapId].getBounds().width * curScale;
+		var bitmapH = helpBitmap[bitmapId].getBounds().height * curScale;
 	
 		menuX = bitmapW + borderSize;
 		menuY = bitmapH + borderSize;
@@ -80,7 +82,9 @@ function helpMenuClass(_stage, _bitmap, _editBitmap, _scale)
 	
 		helpBorder = new createjs.Shape();
 		helpBackground = new createjs.Shape();
-		versionText = new createjs.Text("Ver " + VERSION + "." + AI_VERSION, (16*scale) + "px Helvetica", "#FFF");
+		versionText = new createjs.Text(
+			"Ver " + VERSION + "." + AI_VERSION + "." + playScale
+			, (16*curScale) + "px Helvetica", "#FFF");
 	
 		var helpG = helpBorder.graphics;
 	
@@ -95,7 +99,7 @@ function helpMenuClass(_stage, _bitmap, _editBitmap, _scale)
 			 .drawRoundRect(startX + halfBorder, startY + halfBorder, bitmapW, bitmapH, halfBorder/2).endFill();
 	
 	
-		helpBitmap[bitmapId].setTransform(startX + halfBorder, startY + halfBorder, scale, scale);
+		helpBitmap[bitmapId].setTransform(startX + halfBorder, startY + halfBorder, curScale, curScale);
 		//helpBitmap.set({alpha:0.8});
 	
 		versionText.x = startX + (menuX - versionText.getBounds().width-borderSize); 
@@ -477,13 +481,16 @@ function selectDialog(_titleName, _checkBitmap, _levelData, _activeLevel, _scree
 	{
 		dialogStage.removeAllChildren();
 		dialogStage.enableMouseOver(0);
+		createjs.Ticker.removeEventListener(dialogStage);
 		document.body.removeChild(canvas1);
 	}		
 	
 	function createDialogStage()
 	{
 		dialogStage = new createjs.Stage(canvas1);
-		dialogStage.enableMouseOver(120);
+		dialogStage.enableMouseOver(60);
+		createjs.Ticker.setFPS(60);
+		createjs.Ticker.addEventListener("tick", dialogStage);
 	}
 	
 	function setBackground()
@@ -526,10 +533,10 @@ function selectDialog(_titleName, _checkBitmap, _levelData, _activeLevel, _scree
 		var vBorder2 = new createjs.Shape();
 		
 		vBorder1.graphics.beginFill(BORDER1_COLOR)
-			      .drawRect(BORDER1+BORDER2, 0, SLIDE_AREA_X, TOP_BORDER1+TOP_BORDER2).endFill();
+			      .drawRect(BORDER1+BORDER2-1, 0, SLIDE_AREA_X+2, TOP_BORDER1+TOP_BORDER2).endFill();
 		
 		vBorder2.graphics.beginFill(BORDER1_COLOR)
-			      .drawRect(BORDER1+BORDER2, CANVAS_SIZE_Y-BORDER1, SLIDE_AREA_X, BORDER1).endFill();
+			      .drawRect(BORDER1+BORDER2-1, CANVAS_SIZE_Y-BORDER1, SLIDE_AREA_X+2, BORDER1).endFill();
 		
 		border1.addChild(vBorder1, vBorder2);
 		border1.on("mouseover", function() { dialogStage.cursor ="default" });
@@ -547,19 +554,19 @@ function selectDialog(_titleName, _checkBitmap, _levelData, _activeLevel, _scree
 		
 		vBorder1.graphics.beginFill(BORDER2_COLOR)
 			.drawRect(BORDER1, TOP_BORDER1+TOP_BORDER2, 
-			CANVAS_SIZE_X-2*BORDER1, BORDER2).endFill();
+			CANVAS_SIZE_X-2*BORDER1, BORDER2+1).endFill();
  	
 		vBorder2.graphics.beginFill(BORDER2_COLOR)
-			.drawRect(BORDER1+BORDER2, CANVAS_SIZE_Y-BORDER1-BORDER2-1, 
-			CANVAS_SIZE_X-2*(BORDER1+BORDER2),BORDER2+1).endFill();
+			.drawRect(BORDER1, CANVAS_SIZE_Y-BORDER1-BORDER2-1, 
+			CANVAS_SIZE_X-2*(BORDER1)-BORDER2,BORDER2+1).endFill();
  	
 		hBorder1.graphics.beginFill(BORDER2_COLOR)
 			.drawRect(BORDER1, TOP_BORDER1+TOP_BORDER2+BORDER2, 
-			BORDER2, CANVAS_SIZE_Y-BORDER1-BORDER2-TOP_BORDER1-TOP_BORDER2).endFill();
+			BORDER2+2, CANVAS_SIZE_Y-BORDER1-BORDER2-TOP_BORDER1-TOP_BORDER2).endFill();
  	
 		hBorder2.graphics.beginFill(BORDER2_COLOR)
-			.drawRect(CANVAS_SIZE_X-BORDER1-BORDER2, TOP_BORDER1+TOP_BORDER2+BORDER2, 
-			BORDER2, CANVAS_SIZE_Y-BORDER1-BORDER2-TOP_BORDER1-TOP_BORDER2).endFill();
+			.drawRect(CANVAS_SIZE_X-BORDER1-BORDER2-1, TOP_BORDER1+TOP_BORDER2+BORDER2, 
+			BORDER2+1, CANVAS_SIZE_Y-BORDER1-BORDER2-TOP_BORDER1-TOP_BORDER2).endFill();
  	
 		border2.addChild(vBorder1, vBorder2, hBorder1, hBorder2);
 		dialogStage.addChild(border2);
@@ -709,36 +716,8 @@ function selectDialog(_titleName, _checkBitmap, _levelData, _activeLevel, _scree
 			levelLoop:
 			for(var y = 0; y < selectItemY; y++) {
 				for(var x = 0; x < selectItemX; x++) {
-					//var id;
-				
 					if(++id >= pageItems) break levelLoop;
 					createSelectLevel(x, y);
-/*
-					textColor = SELECT_TEXT_COLOR;
-					if(_activeLevel == (level = startLevel+id)) {
-						activeItemY = y;
-						if(activeItemY + SLIDE_ITEM_Y > selectItemY) {
-							activeItemY = selectItemY - SLIDE_ITEM_Y;
-						}
-						textColor = SELECT_TEXT_ACTIVE_COLOR;
-					}
-					
-					selectText[id] = new createjs.Text(("00"+level).slice(-3), SELECT_TEXT_SIZE + "px Arial",
-						textColor);
-					
-					selectText[id].x = (SLIDE_GAP_X*2+SELECT_SIZE_X) * x + SLIDE_GAP_X;
-					selectText[id].y = (SLIDE_GAP_Y*2+SELECT_SIZE_Y) * y + SLIDE_GAP_Y - SELECT_TEXT_SIZE*4/3;
-					slider.addChild(selectText[id]);
-					
-					selectRect[id] = buildSelectMap(level);
-					selectRect[id].x = (SLIDE_GAP_X*2+SELECT_SIZE_X) * x + SLIDE_GAP_X;
-					selectRect[id].y = (SLIDE_GAP_Y*2+SELECT_SIZE_Y) * y + SLIDE_GAP_Y;
-					slider.addChild(selectRect[id]);
-					selectRect[id].on('click', selectClick);
-					selectRect[id].on('mouseover', selectMouseOver);
-					selectRect[id].on('mouseout', selectMouseOut);
-					selectRect[id].myLevel = level;
-*/					
 				}
 			}
 			background.on("mouseover", function() {
@@ -749,7 +728,6 @@ function selectDialog(_titleName, _checkBitmap, _levelData, _activeLevel, _scree
 			);
 			
 			slider.on("mousedown", function(evt) {
-				//dialogStage.cursor =  "url('cursor/closedhand.cur'), auto";
 				diffY = evt.currentTarget.y - evt.stageY;
 			});
 
@@ -946,13 +924,9 @@ function selectDialog(_titleName, _checkBitmap, _levelData, _activeLevel, _scree
 		
 		function level2Bitmap(levelMap)
 		{
-			var	canvas2 = document.createElement('canvas');
-			var stage = new createjs.Stage(canvas2);	
 			var container = new createjs.Container();	
 			var guardCount = 0, runner = 0;
-	
-			canvas2.width  = SELECT_SIZE_X;
-			canvas2.height = SELECT_SIZE_Y;
+			var bitmap;
 	
 			//--------------------------------------------
 			// Parser map from right-bottom to left-top
@@ -969,24 +943,24 @@ function selectDialog(_titleName, _checkBitmap, _levelData, _activeLevel, _scree
 					case ' ': //empty
 						continue;
 					case '#': //Normal Brick
-						curTile = new createjs.Bitmap(getThemeImage("brick"));
+						curTile = getThemeBitmap("brick");
 						break;	
 					case '@': //Solid Brick
-						curTile = new createjs.Bitmap(getThemeImage("solid"));
+						curTile = getThemeBitmap("solid");
 						break;	
 					case 'H': //Ladder
-						curTile = new createjs.Bitmap(getThemeImage("ladder"));
+						curTile = getThemeBitmap("ladder");
 						break;	
 					case '-': //Line of rope
-						curTile = new createjs.Bitmap(getThemeImage("rope"));
+						curTile = getThemeBitmap("rope");
 						break;	
 					case 'X': //False brick
-						curTile = new createjs.Bitmap(getThemeImage("brick"));
+						curTile = getThemeBitmap("brick");
 						break;
 					case 'S': //Ladder appears at end of level
 						continue;
 					case '$': //Gold chest
-						curTile = new createjs.Bitmap(getThemeImage("gold"));
+						curTile = getThemeBitmap("gold");
 						break;	
 					case '0': //Guard
 						if(++guardCount > MAX_NEW_GUARD) { 
@@ -1007,8 +981,10 @@ function selectDialog(_titleName, _checkBitmap, _levelData, _activeLevel, _scree
 					container.addChild(curTile); 
 				}
 			}	
-			container.cache(0, 0, canvas2.width, canvas2.height);
-			return (new createjs.Bitmap( container.getCacheDataURL()));
+			container.cache(0, 0, SELECT_SIZE_X, SELECT_SIZE_Y);
+			bitmap = new createjs.Bitmap( container.getCacheDataURL());
+			container.removeAllChildren();
+			return bitmap;
 		}
 		
 		//for demo mode
@@ -1350,7 +1326,6 @@ function menuDialog(_titleName, _itemList, _stage, _scale, _closeIconEnable, _cl
 	var menuX, menuY;
 	var startX, startY;
 	
-	
 	var coverBackgroundObj, background1Obj, background2Obj, menuButtonObj; 
 	var closeIconObj = null;
 	var saveKeyStateObj;
@@ -1469,6 +1444,7 @@ function menuDialog(_titleName, _itemList, _stage, _scale, _closeIconEnable, _cl
 		 _itemList[0].activeItem = activeItemBackup; //recover menu active item
 		restoreKeyHandler(saveKeyStateObj);
 		removeAllObj();
+		_stage.enableMouseOver(0);
 		if(_closeCallBack) _closeCallBack(_args);
 	}
 	
@@ -1681,7 +1657,6 @@ function playData2GameVersionMenuId()
 	error(arguments.callee.name, "design error, value =" + playData );
 	gameVersionMenuList[0].activeItem = 0;
 	return 0;
-
 }
 	
 //=========================================
@@ -1728,8 +1703,6 @@ function gameMenu(callbackFun)
 		return;
 	case (gameVersionMenuList[0].activeItem < playVersionInfo.length):
 		titleName = playVersionInfo[gameVersionMenuList[0].activeItem].name;
-		//if(!noDemoData[playVersionInfo[gameVersionMenuList[0].activeItem].id-1])	
-		//	addMenuItem(gameMenuList,  demoItemObj, 3);
 		if(playerDemoData.length > 0) addMenuItem(gameMenuList,  demoItemObj, 3);
 		break
 	default:
@@ -1858,7 +1831,7 @@ function helpMenu(callbackFun)
 	if(playMode == PLAY_DEMO || playMode == PLAY_DEMO_ONCE) {
 		infoObj.showInfo(demoHelp, callbackFun, null);	
 	} else {
-		helpObj.showHelp(id, callbackFun, null);
+		helpObj.showHelp(id, callbackFun, tileScale, null);
 	}
 }
 
@@ -2056,9 +2029,7 @@ function levelPassDialog(_level, _getGold, _guardDead, _time, _hiScore,
 		hiScoreTextObj.y = yOffset;
 		_stage.addChild(hiScoreNameObj, hiScoreTextObj);
 		
-		
 		yOffset += (ITEM_TEXT_SIZE + buttonY); //xOffset for menu button
-		
 	}
  	
 	function updateHiScore()
@@ -2098,10 +2069,11 @@ function levelPassDialog(_level, _getGold, _guardDead, _time, _hiScore,
 				setTimeout(function() { goldScoreCounting(0); }, countTime );
 			}
 		}
-		_stage.update();
+
 		if(endCount) {
 			setTimeout(function() { guardScoreCounting(1); }, countTime*4);
 		}
+		_stage.update();
 	}
 	
  	function guardScoreCounting(firstTime)
@@ -2133,10 +2105,11 @@ function levelPassDialog(_level, _getGold, _guardDead, _time, _hiScore,
 				setTimeout(function() { guardScoreCounting(0); }, countTime );
 			}
 		}
-		_stage.update();
+
 		if(endCount) {
 			setTimeout(function() { timeScoreCounting(1); }, countTime*4 );
 		}
+		_stage.update();
 	}
 	
  	function timeScoreCounting(firstTime)
@@ -2168,6 +2141,7 @@ function levelPassDialog(_level, _getGold, _guardDead, _time, _hiScore,
 				setTimeout(function() { timeScoreCounting(0); }, countTime );
 			}
 		}
+		
 		if(endCount) {
 			soundPlay("scoreEnding");
 			setTimeout(function() { createButton(); }, 100 );
@@ -2265,7 +2239,6 @@ function levelPassDialog(_level, _getGold, _guardDead, _time, _hiScore,
 	
 }
 
-////////////////////////////////////////////////////////////
 function yesNoDialog(_txtMsg, _yesBitmap, _noBitmap, _stage, _scale, _callBack)
 {
 	var TEXT_MSG_SIZE = 48 * _scale;

lodeRunner.misc.js

@@ -121,8 +121,6 @@ function soundPlay(name)
 
 function soundStop(name)
 {
-	//if(soundDisable()) return;
-	
 	if(typeof name == "string") {
 		return createjs.Sound.stop(name);
 	} else {
@@ -137,7 +135,7 @@ function soundPause(name)
 	if(typeof name == "string") {
 		return createjs.Sound.pause(name);
 	} else {
-		name.pause();
+		name.paused=true; //SoundJS 0.6.2 API Changed, 8/28/2016 
 	}
 }
 
@@ -148,7 +146,7 @@ function soundResume(name)
 	if(typeof name == "string") {
 		return createjs.Sound.resume(name);
 	} else {
-		name.resume();
+		name.paused=false; //SoundJS 0.6.2 API Changed, 8/28/2016
 	}
 }
 

lodeRunner.preload.js

@@ -16,7 +16,7 @@ var SIGNET_UNDER_Y = 30;
 //*********************
 // preload cover page
 //*********************
-var coverBitmap, remakeBitmap, signetBitmap;
+var coverBitmap, titleBackground, remakeBitmap, signetBitmap;
 var helpObj, helpBitmap, editHelpBitmap;
 var mainMenuIconBitmap, mainMenuIconObj;
 var selectIconBitmap, selectIconObj;
@@ -25,17 +25,18 @@ var soundOnIconBitmap, soundOffIconBitmap, soundIconObj;
 var helpIconBitmap, helpIconObj;
 var infoObj, infoIconBitmap, infoIconObj;
 var repeatActionOnIconBitmap, repeatActionOffIconBitmap, repeatActionIconObj;
-var apple2IconBitmap, C64IconBitmap, themeIconObj;
+var apple2IconBitmap, C64IconBitmap, themeIconObj, themeColorObj;
 var checkBitmap;
 var returnBitmap, select1Bitmap, nextBitmap;
 var yesBitmap, noBitmap;
 var coverPageLoad;
+var noCache = "?" + VERSION+ ".1051230";
 
 function showLoadingPage() 
 {
 	var coverPageImages = [
-		{ src: "image/cover.png",  id: "cover" },
-		{ src: themeImagePath + THEME_APPLE2 + "/runner.png",  id: "runner" }
+		{ src: "image/cover.png"+noCache,  id: "cover" },
+		{ src: themeImagePath + THEME_APPLE2 + "/runner.png"+noCache,  id: "runner" }
 	];
 		
 	coverPageLoad = new createjs.LoadQueue(true);
@@ -70,9 +71,20 @@ function showLoadingPage()
 	{
 		coverBitmap = new createjs.Bitmap(image);
 		coverBitmap.setTransform(0, 0, tileScale, tileScale); //x,y, scaleX, scaleY 
+		
+		addTitleBackground(coverBitmap.getBounds().width*tileScale|0,
+		                   coverBitmap.getBounds().height*tileScale|0);
+		
 		mainStage.addChild(coverBitmap);	
 		mainStage.update();	
 	}
+	
+	function addTitleBackground(width, height)
+	{
+		titleBackground = new createjs.Shape();
+		titleBackground.graphics.beginFill("white").drawRect(0, 0, width, height);
+		mainStage.addChild(titleBackground);
+	}
 }
 
 function createRunnerSpriteSheet(runnerImage)
@@ -88,22 +100,22 @@ function createRunnerSpriteSheet(runnerImage)
 			runUpDn : [6,7, "runUpDn",  RUNNER_SPEED],
 
 			barRight: {
-				frames: [ 9, 10, 10, 11, 11 ],
+				frames: [ 18, 19, 19, 20, 20 ],
 				next:  "barRight",
 				speed: RUNNER_SPEED
 			},
 
 			barLeft: {
-				frames: [ 12, 13, 13, 14, 14 ],
+				frames: [ 21, 22, 22, 23, 23 ],
 				next:  "barLeft",
 				speed: RUNNER_SPEED
 			},
 					 
-			digRight: 15,
-			digLeft : 16,
+			digRight: 24,
+			digLeft : 25,
 
 			fallRight : 8,
-			fallLeft: 17
+			fallLeft: 26
 		} 
 	});
 }
@@ -114,7 +126,8 @@ function createRunnerSpriteSheet(runnerImage)
 var preload; //preload resource object
 var firstPlay = 0;
 
-var runnerData, guardData;
+var runnerData;
+var guardData = {}, redhatData = {};
 var holeData, holeObj = {};
 var textData;
 var countryFlagData;
@@ -132,114 +145,116 @@ function preloadResource()
 	var percentTxt = new createjs.Text("0", (COVER_PROGRESS_BAR_H* tileScale) + "px Arial", "#FF0000");
 
 	var resource = [
-		{ src: "image/remake.png",  id: "remake" },
-		{ src: "image/signet.png",  id: "signet" },
+		{ src: "image/remake.png"+noCache,  id: "remake" },
+		{ src: "image/signet.png"+noCache,  id: "signet" },
 
-		{ src: themeImagePath + THEME_APPLE2 + "/empty.png",   id: "empty" + THEME_APPLE2 },
-		{ src: themeImagePath + THEME_APPLE2 + "/brick.png",   id: "brick" + THEME_APPLE2  },
-		{ src: themeImagePath + THEME_APPLE2 + "/block.png",   id: "solid" + THEME_APPLE2  },
-		{ src: themeImagePath + THEME_APPLE2 + "/ladder.png",  id: "ladder" + THEME_APPLE2  },
-		{ src: themeImagePath + THEME_APPLE2 + "/rope.png",    id: "rope" + THEME_APPLE2  },
-		{ src: themeImagePath + THEME_APPLE2 + "/trap.png",    id: "trapBrick" + THEME_APPLE2  },
-		{ src: themeImagePath + THEME_APPLE2 + "/hladder.png", id: "hladder" + THEME_APPLE2  },
-		{ src: themeImagePath + THEME_APPLE2 + "/gold.png",    id: "gold" + THEME_APPLE2  },
-		{ src: themeImagePath + THEME_APPLE2 + "/guard1.png",  id: "guard1" + THEME_APPLE2  },
-		{ src: themeImagePath + THEME_APPLE2 + "/runner1.png", id: "runner1" + THEME_APPLE2  },
+		{ src: themeImagePath + THEME_APPLE2 + "/empty.png"+noCache,   id: "empty" + THEME_APPLE2 },
+		{ src: themeImagePath + THEME_APPLE2 + "/brick.png"+noCache,   id: "brick" + THEME_APPLE2  },
+		{ src: themeImagePath + THEME_APPLE2 + "/block.png"+noCache,   id: "solid" + THEME_APPLE2  },
+		{ src: themeImagePath + THEME_APPLE2 + "/ladder.png"+noCache,  id: "ladder" + THEME_APPLE2  },
+		{ src: themeImagePath + THEME_APPLE2 + "/rope.png"+noCache,    id: "rope" + THEME_APPLE2  },
+		{ src: themeImagePath + THEME_APPLE2 + "/trap.png"+noCache,    id: "trapBrick" + THEME_APPLE2  },
+		{ src: themeImagePath + THEME_APPLE2 + "/hladder.png"+noCache, id: "hladder" + THEME_APPLE2  },
+		{ src: themeImagePath + THEME_APPLE2 + "/gold.png"+noCache,    id: "gold" + THEME_APPLE2  },
+		{ src: themeImagePath + THEME_APPLE2 + "/guard1.png"+noCache,  id: "guard1" + THEME_APPLE2  },
+		{ src: themeImagePath + THEME_APPLE2 + "/runner1.png"+noCache, id: "runner1" + THEME_APPLE2  },
 
-		{ src: themeImagePath + THEME_APPLE2 + "/runner.png",  id: "runner"  + THEME_APPLE2 },
-		{ src: themeImagePath + THEME_APPLE2 + "/guard.png",   id: "guard"  + THEME_APPLE2 },
-		{ src: themeImagePath + THEME_APPLE2 + "/hole.png",    id: "hole"  + THEME_APPLE2 },
-		{ src: themeImagePath + THEME_APPLE2 + "/ground.png",  id: "ground"  + THEME_APPLE2 },
-		{ src: themeImagePath + THEME_APPLE2 + "/over.png",    id: "over"  + THEME_APPLE2 },
-		{ src: themeImagePath + THEME_APPLE2 + "/text.png",    id: "text"  + THEME_APPLE2 },
+		{ src: themeImagePath + THEME_APPLE2 + "/runner.png"+noCache,  id: "runner"  + THEME_APPLE2 },
+		{ src: themeImagePath + THEME_APPLE2 + "/guard.png"+noCache,   id: "guard"  + THEME_APPLE2 },
+		{ src: themeImagePath + THEME_APPLE2 + "/redhat.png"+noCache,  id: "redhat"  + THEME_APPLE2 },
+		{ src: themeImagePath + THEME_APPLE2 + "/hole.png"+noCache,    id: "hole"  + THEME_APPLE2 },
+		{ src: themeImagePath + THEME_APPLE2 + "/ground.png"+noCache,  id: "ground"  + THEME_APPLE2 },
+		{ src: themeImagePath + THEME_APPLE2 + "/over.png"+noCache,    id: "over"  + THEME_APPLE2 },
+		{ src: themeImagePath + THEME_APPLE2 + "/text.png"+noCache,    id: "text"  + THEME_APPLE2 },
 
 		
-		{ src: themeImagePath + THEME_C64 + "/empty.png",   id: "empty" + THEME_C64 },
-		{ src: themeImagePath + THEME_C64 + "/brick.png",   id: "brick" + THEME_C64  },
-		{ src: themeImagePath + THEME_C64 + "/block.png",   id: "solid" + THEME_C64  },
-		{ src: themeImagePath + THEME_C64 + "/ladder.png",  id: "ladder" + THEME_C64  },
-		{ src: themeImagePath + THEME_C64 + "/rope.png",    id: "rope" + THEME_C64  },
-		{ src: themeImagePath + THEME_C64 + "/trap.png",    id: "trapBrick" + THEME_C64  },
-		{ src: themeImagePath + THEME_C64 + "/hladder.png", id: "hladder" + THEME_C64  },
-		{ src: themeImagePath + THEME_C64 + "/gold.png",    id: "gold" + THEME_C64  },
-		{ src: themeImagePath + THEME_C64 + "/guard1.png",  id: "guard1" + THEME_C64  },
-		{ src: themeImagePath + THEME_C64 + "/runner1.png", id: "runner1" + THEME_C64  },
+		{ src: themeImagePath + THEME_C64 + "/empty.png"+noCache,   id: "empty" + THEME_C64 },
+		{ src: themeImagePath + THEME_C64 + "/brick.png"+noCache,   id: "brick" + THEME_C64  },
+		{ src: themeImagePath + THEME_C64 + "/block.png"+noCache,   id: "solid" + THEME_C64  },
+		{ src: themeImagePath + THEME_C64 + "/ladder.png"+noCache,  id: "ladder" + THEME_C64  },
+		{ src: themeImagePath + THEME_C64 + "/rope.png"+noCache,    id: "rope" + THEME_C64  },
+		{ src: themeImagePath + THEME_C64 + "/trap.png"+noCache,    id: "trapBrick" + THEME_C64  },
+		{ src: themeImagePath + THEME_C64 + "/hladder.png"+noCache, id: "hladder" + THEME_C64  },
+		{ src: themeImagePath + THEME_C64 + "/gold.png"+noCache,    id: "gold" + THEME_C64  },
+		{ src: themeImagePath + THEME_C64 + "/guard1.png"+noCache,  id: "guard1" + THEME_C64  },
+		{ src: themeImagePath + THEME_C64 + "/runner1.png"+noCache, id: "runner1" + THEME_C64  },
 
-		{ src: themeImagePath + THEME_C64 + "/runner.png",  id: "runner"  + THEME_C64 },
-		{ src: themeImagePath + THEME_C64 + "/guard.png",   id: "guard"  + THEME_C64 },
-		{ src: themeImagePath + THEME_C64 + "/hole.png",    id: "hole"  + THEME_C64 },
-		{ src: themeImagePath + THEME_C64 + "/ground.png",  id: "ground"  + THEME_C64 },
-		{ src: themeImagePath + THEME_C64 + "/over.png",    id: "over"  + THEME_C64 },
-		{ src: themeImagePath + THEME_C64 + "/text.png",    id: "text"  + THEME_C64 },
+		{ src: themeImagePath + THEME_C64 + "/runner.png"+noCache,  id: "runner"  + THEME_C64 },
+		{ src: themeImagePath + THEME_C64 + "/guard.png"+noCache,   id: "guard"  + THEME_C64 },
+		{ src: themeImagePath + THEME_C64 + "/redhat.png"+noCache,  id: "redhat"  + THEME_C64 },
+		{ src: themeImagePath + THEME_C64 + "/hole.png"+noCache,    id: "hole"  + THEME_C64 },
+		{ src: themeImagePath + THEME_C64 + "/ground.png"+noCache,  id: "ground"  + THEME_C64 },
+		{ src: themeImagePath + THEME_C64 + "/over.png"+noCache,    id: "over"  + THEME_C64 },
+		{ src: themeImagePath + THEME_C64 + "/text.png"+noCache,    id: "text"  + THEME_C64 },
 		
-		{ src: "image/eraser.png",  id: "eraser" },
+		{ src: "image/eraser.png"+noCache,  id: "eraser" },
 	
-		{ src: "image/help.png",    id: "help" },
-		{ src: "image/editHelp.png",id: "editHelp" },
-		//{ src: "image/demoHelp.png",id: "demoHelp" }, //replace by infoMenu, 5/14/2015
+		{ src: "image/help.png"+noCache,    id: "help" },
+		{ src: "image/editHelp.png"+noCache,id: "editHelp" },
 		
-		{ src: "image/menu.png",    id: "menu" },
-		{ src: "image/select.png",  id: "select" },
-		{ src: "image/check.png",   id: "check" }, //check icon for select menu
+		{ src: "image/menu.png"+noCache,    id: "menu" },
+		{ src: "image/select.png"+noCache,  id: "select" },
+		{ src: "image/check.png"+noCache,   id: "check" }, //check icon for select menu
 		
-		{ src: "image/return.png",  id: "return" },
-		{ src: "image/select1.png", id: "select1" },
-		{ src: "image/next.png",    id: "next" },
+		{ src: "image/return.png"+noCache,  id: "return" },
+		{ src: "image/select1.png"+noCache, id: "select1" },
+		{ src: "image/next.png"+noCache,    id: "next" },
 		
-		{ src: "image/yes.png",     id: "yes" },
-		{ src: "image/no.png",      id: "no" },
+		{ src: "image/yes.png"+noCache,     id: "yes" },
+		{ src: "image/no.png"+noCache,      id: "no" },
 
-		{ src: "image/demo.png",id: "demo" },
+		{ src: "image/demo.png"+noCache,id: "demo" },
 		
-		{ src: "image/soundOn.png",  id: "soundOn" },
-		{ src: "image/soundOff.png", id: "soundOff" },
+		{ src: "image/soundOn.png"+noCache,  id: "soundOn" },
+		{ src: "image/soundOff.png"+noCache, id: "soundOff" },
 		
-		{ src: "image/infoIcon.png", id: "infoIcon" },
-		{ src: "image/helpIcon.png", id: "helpIcon" },
+		{ src: "image/infoIcon.png"+noCache, id: "infoIcon" },
+		{ src: "image/helpIcon.png"+noCache, id: "helpIcon" },
 
-		{ src: "image/repeatOn.png",  id: "repeatOn" },
-		{ src: "image/repeatOff.png", id: "repeatOff" },
+		{ src: "image/repeatOn.png"+noCache,  id: "repeatOn" },
+		{ src: "image/repeatOff.png"+noCache, id: "repeatOff" },
 		
-		{ src: "image/apple2.png",     id: "apple2" },
-		{ src: "image/commodore64.png",id: "C64" },
+		{ src: "image/apple2.png"+noCache,     id: "apple2" },
+		{ src: "image/commodore64.png"+noCache,id: "C64" },
 		
-		{ src: "image/flags32.png",     id: "flag" },
+		{ src: "image/flags32.png"+noCache,     id: "flag" },
 	
-		{ src: themeSoundPath + THEME_APPLE2 + "/born.ogg",    id:"reborn" + THEME_APPLE2},
-		{ src: themeSoundPath + THEME_APPLE2 + "/dead.ogg",    id:"dead" + THEME_APPLE2},
-		{ src: themeSoundPath + THEME_APPLE2 + "/dig.ogg",     id:"dig" + THEME_APPLE2},
-		{ src: themeSoundPath + THEME_APPLE2 + "/getGold.ogg", id:"getGold" + THEME_APPLE2},
-		{ src: themeSoundPath + THEME_APPLE2 + "/fall.ogg",    id:"fall" + THEME_APPLE2},
-		{ src: themeSoundPath + THEME_APPLE2 + "/down.ogg",    id:"down" + THEME_APPLE2},
-		{ src: themeSoundPath + THEME_APPLE2 + "/pass.ogg",    id:"pass" + THEME_APPLE2},
-		{ src: themeSoundPath + THEME_APPLE2 + "/trap.ogg",    id:"trap" + THEME_APPLE2},
+		{ src: themeSoundPath + THEME_APPLE2 + "/born.ogg"+noCache,    id:"reborn" + THEME_APPLE2},
+		{ src: themeSoundPath + THEME_APPLE2 + "/dead.ogg"+noCache,    id:"dead" + THEME_APPLE2},
+		{ src: themeSoundPath + THEME_APPLE2 + "/dig.ogg"+noCache,     id:"dig" + THEME_APPLE2},
+		{ src: themeSoundPath + THEME_APPLE2 + "/getGold.ogg"+noCache, id:"getGold" + THEME_APPLE2},
+		{ src: themeSoundPath + THEME_APPLE2 + "/fall.ogg"+noCache,    id:"fall" + THEME_APPLE2},
+		{ src: themeSoundPath + THEME_APPLE2 + "/down.ogg"+noCache,    id:"down" + THEME_APPLE2},
+		{ src: themeSoundPath + THEME_APPLE2 + "/pass.ogg"+noCache,    id:"pass" + THEME_APPLE2},
+		{ src: themeSoundPath + THEME_APPLE2 + "/trap.ogg"+noCache,    id:"trap" + THEME_APPLE2},
 
 		
-		{ src: themeSoundPath + THEME_C64 + "/born.ogg",    id:"reborn" + THEME_C64},
-		{ src: themeSoundPath + THEME_C64 + "/dead.ogg",    id:"dead" + THEME_C64},
-		{ src: themeSoundPath + THEME_C64 + "/dig.ogg",     id:"dig" + THEME_C64},
-		{ src: themeSoundPath + THEME_C64 + "/getGold.ogg", id:"getGold" + THEME_C64},
-		{ src: themeSoundPath + THEME_C64 + "/fall.ogg",    id:"fall" + THEME_C64},
-		{ src: themeSoundPath + THEME_C64 + "/down.ogg",    id:"down" + THEME_C64},
-		{ src: themeSoundPath + THEME_C64 + "/pass.ogg",    id:"pass" + THEME_C64},
-		{ src: themeSoundPath + THEME_C64 + "/trap.ogg",    id:"trap" + THEME_C64},
-		{ src: themeSoundPath + THEME_C64 + "/goldFinish1.ogg",    id:"goldFinish1"},
-		{ src: themeSoundPath + THEME_C64 + "/goldFinish2.ogg",    id:"goldFinish2"},
-		{ src: themeSoundPath + THEME_C64 + "/goldFinish3.ogg",    id:"goldFinish3"},
-		{ src: themeSoundPath + THEME_C64 + "/goldFinish4.ogg",    id:"goldFinish4"},
-		{ src: themeSoundPath + THEME_C64 + "/goldFinish5.ogg",    id:"goldFinish5"},
-		{ src: themeSoundPath + THEME_C64 + "/goldFinish6.ogg",    id:"goldFinish6"},
+		{ src: themeSoundPath + THEME_C64 + "/born.ogg"+noCache,    id:"reborn" + THEME_C64},
+		{ src: themeSoundPath + THEME_C64 + "/dead.ogg"+noCache,    id:"dead" + THEME_C64},
+		{ src: themeSoundPath + THEME_C64 + "/dig.ogg"+noCache,     id:"dig" + THEME_C64},
+		{ src: themeSoundPath + THEME_C64 + "/getGold.ogg"+noCache, id:"getGold" + THEME_C64},
+		{ src: themeSoundPath + THEME_C64 + "/fall.ogg"+noCache,    id:"fall" + THEME_C64},
+		{ src: themeSoundPath + THEME_C64 + "/down.ogg"+noCache,    id:"down" + THEME_C64},
+		{ src: themeSoundPath + THEME_C64 + "/pass.ogg"+noCache,    id:"pass" + THEME_C64},
+		{ src: themeSoundPath + THEME_C64 + "/trap.ogg"+noCache,    id:"trap" + THEME_C64},
 
-		{ src: "sound/goldFinish.ogg",  id:"goldFinish"},
-		{ src: "sound/ending.ogg",      id:"ending"},
-		{ src: "sound/scoreBell.ogg",   id:"scoreBell"},
-		{ src: "sound/scoreCount.ogg",  id:"scoreCount"},
-		{ src: "sound/scoreEnding.ogg", id:"scoreEnding"},
+		{ src: themeSoundPath + THEME_C64 + "/goldFinish1.ogg"+noCache,    id:"goldFinish1"},
+		{ src: themeSoundPath + THEME_C64 + "/goldFinish2.ogg"+noCache,    id:"goldFinish2"},
+		{ src: themeSoundPath + THEME_C64 + "/goldFinish3.ogg"+noCache,    id:"goldFinish3"},
+		{ src: themeSoundPath + THEME_C64 + "/goldFinish4.ogg"+noCache,    id:"goldFinish4"},
+		{ src: themeSoundPath + THEME_C64 + "/goldFinish5.ogg"+noCache,    id:"goldFinish5"},
+		{ src: themeSoundPath + THEME_C64 + "/goldFinish6.ogg"+noCache,    id:"goldFinish6"},
 		
-		{ src: "sound/beep.ogg", id:"beep"},
+		{ src: "sound/goldFinish.ogg"+noCache,  id:"goldFinish"},
+		{ src: "sound/ending.ogg"+noCache,      id:"ending"},
+		{ src: "sound/scoreBell.ogg"+noCache,   id:"scoreBell"},
+		{ src: "sound/scoreCount.ogg"+noCache,  id:"scoreCount"},
+		{ src: "sound/scoreEnding.ogg"+noCache, id:"scoreEnding"},
 		
-		{ src: "cursor/openhand.cur", id:"openHand"}, //preload cursor
-		{ src: "cursor/closedhand.cur", id:"closeHand"}
+		{ src: "sound/beep.ogg"+noCache, id:"beep"},
+		
+		{ src: "cursor/openhand.cur"+noCache, id:"openHand"}, //preload cursor
+		{ src: "cursor/closedhand.cur"+noCache, id:"closeHand"}
 		
 	];	
 	
@@ -293,26 +308,16 @@ function preloadResource()
 	{
 		percentTxt.text = "100%";
 		mainStage.update();
-////		createPreloadSpriteSheet();
+
 		createSoundInstance();
+		createBaseBitmapInstance(); //9/1/2016
 		setTimeout(clearLoadingInfo, 500);
 	}
 	
-/*	
-	function createSoundInstance()
-	{
-		soundFall = createjs.Sound.createInstance("fall"); 
-		soundDig = createjs.Sound.createInstance("dig");
-		soundPass = createjs.Sound.createInstance("pass");
-		
-		soundEnding = createjs.Sound.createInstance("ending");
-		
-	}
-*/
-	
 	function clearLoadingInfo()
 	{
 		mainStage.removeChild(runnerSprite, progress, progressBorder, percentTxt);
+		colorTitleBackground();
 		showSignetBitmap();
 		mainStage.addChild(signetBitmap);
 		showRemakeBitmap();
@@ -320,6 +325,22 @@ function preloadResource()
 		mainStage.update();
 	}
 	
+	//change title color to rainbow gradient color
+	function colorTitleBackground()
+	{
+		var width = coverBitmap.getBounds().width*tileScale|0;
+	 	var height = coverBitmap.getBounds().height*tileScale|0;
+		
+		//rainbow gradient color
+    	titleBackground.graphics
+		.clear().beginLinearGradientFill(
+			//https://simple.wikipedia.org/wiki/Rainbow
+			["#FF0000", "#FF7F00", "#FFFF00", "#00FF00", "#0000FF", "#4B0082", "#8B00FF"], 
+			[0, .14, .28, .42, .56, .70, .84, .98], 
+			0, height/5,width*6/5,height*2/5)
+		.drawRect(0, 0, width, height);
+	}
+	
 	function showSignetBitmap()
 	{
 		var x, y;
@@ -335,7 +356,7 @@ function preloadResource()
 	function showRemakeBitmap()
 	{
 		var x = 372 * tileScale;
-		var y = 128 * tileScale;
+		var y = 130 * tileScale;
 		remakeBitmap = new createjs.Bitmap(preload.getResult("remake"));
 		remakeBitmap.setTransform(x, y, tileScale, tileScale); //x,y, scaleX, scaleY 
 		remakeBitmap.rotation = -5;
@@ -382,6 +403,7 @@ function preloadResource()
 		C64IconBitmap = new createjs.Bitmap(preload.getResult("C64"));
 		themeIconObj = new themeIconClass(screenX1, screenY1, tileScale, apple2IconBitmap, C64IconBitmap);
 
+		themeColorObj = new colorSelectorClass(screenX1, screenY1, tileWScale);
 		checkBitmap = new  createjs.Bitmap(preload.getResult("check"));
 		
 		returnBitmap = new createjs.Bitmap(preload.getResult("return"));
@@ -451,86 +473,31 @@ function setSpeedByAiVersion()
 		maxGuard = MAX_NEW_GUARD;           //change max guard 
 	}
 	
-	themeDataReset(); //4/16/2015
+	themeDataReset(1); //4/16/2015
+	createHoleObj();  //6/27/2016
 }
 
-function themeDataReset()
+function themeDataReset(resetAll)
 {
-	createSoundInstance(); 
-	createSpriteSheet();   //base one theme & Ai Version
-}
-
-function getThemeImage(name) 
-{
-	return preload.getResult(name + curTheme);
-}
-
-function getThemeTileColor()
-{
-	if(curTheme == THEME_APPLE2) return "#0DA1FF"; //APPLE II TILE COLOR
-	else return "#933A4C"; //C64 TILE COLOR
+	if(resetAll) createSoundInstance(); //Base on current theme
+	createSpriteSheet();   //Base on theme & Ai Version
 }
 
 function createSpriteSheet()
 {
 	//createRunnerSpriteSheet(coverPageLoad.getResult("runner"));
-	createRunnerSpriteSheet(getThemeImage("runner"));
+	createRunnerSpriteSheet(getThemeBitmap("runner").image);
 	createPreloadSpriteSheet();
 	createFlagSpriteSheet();
 }
 
 function createPreloadSpriteSheet() 
 {
-	guardData = new createjs.SpriteSheet({
-		images: [getThemeImage("guard")],
-		
-		frames: {regX:0, height: BASE_TILE_Y,  regY: 0, width: BASE_TILE_X},
-		
-		animations: { 
-			runRight: [0,2,  "runRight", GUARD_SPEED], 
-			runLeft : [3,5,  "runLeft",  GUARD_SPEED],
-			runUpDn : [6,7,  "runUpDn",  GUARD_SPEED],
-					 
-			barRight: {
-				frames: [ 11, 12, 12, 13, 13 ],
-				next:  "barRight",
-				speed: GUARD_SPEED
-			},
-				 
-			barLeft: {
-				frames: [ 14, 15, 15, 16, 16 ],
-				next:  "barLeft",
-				speed: GUARD_SPEED
-			},
-
-			reborn: {
-				frames: [ 17, 17, 18 ],
-				speed: GUARD_SPEED
-			},
-
-			fallRight : 8,
-			fallLeft: 19,
-
-			shakeRight: {
-				frames: [ 8, 8, 8, 8, 8, 8, 8,
-				          8, 8, 8, 8, 8, 8,
-				          9, 10, 9, 10, 8 ],
-				next: null,
-				speed: GUARD_SPEED
-			},
-			
-			shakeLeft: {
-				frames: [ 19, 19, 19, 19, 19, 19, 19,
-				          19, 19, 19, 19, 19, 19, 
-				          20, 21, 20, 21, 19],
-				next: null,
-				speed: GUARD_SPEED
-			}
-		}
-	});
+	guardData = createGuardObj("guard");
+	redhatData = createGuardObj("redhat");
 		
 	holeData = new createjs.SpriteSheet( {
-		images: [getThemeImage("hole")],
+		images: [getThemeBitmap("hole").image],
 		
 		frames: [
 			//dig hole Left
@@ -554,9 +521,9 @@ function createPreloadSpriteSheet()
 			[BASE_TILE_X*7,BASE_TILE_Y*2,BASE_TILE_X,BASE_TILE_Y*2], //15
 			
 			//fill hole
-			[BASE_TILE_X*8,0,            BASE_TILE_X,BASE_TILE_Y], //16
+			[BASE_TILE_X*7,BASE_TILE_Y*2,BASE_TILE_X,BASE_TILE_Y], //16
 			[BASE_TILE_X*8,BASE_TILE_Y,  BASE_TILE_X,BASE_TILE_Y], //17
-			[BASE_TILE_X*8,BASE_TILE_Y*2,BASE_TILE_X,BASE_TILE_Y], //18
+			[BASE_TILE_X*8,0,            BASE_TILE_X,BASE_TILE_Y], //18
 			[BASE_TILE_X*8,BASE_TILE_Y*3,BASE_TILE_X,BASE_TILE_Y]  //19
 		],	
 		
@@ -576,18 +543,8 @@ function createPreloadSpriteSheet()
 		}
 	});
 	
-	holeObj.sprite = new createjs.Sprite(holeData, "digHoleLeft");
-	
-	if(curAiVersion < 3) {
-		holeObj.digLimit = 6; //for check guard is close to runner when digging
-	} else {
-		holeObj.digLimit = 8; //for check guard is close to runner when digging
-	}
-	
-	holeObj.action = ACT_STOP; //no digging 
-
 	textData = new createjs.SpriteSheet({
-		images: [getThemeImage("text")],
+		images: [getThemeBitmap("text").image],
 		
 		frames: {regX:0, height: BASE_TILE_Y,  regY: 0, width: BASE_TILE_X},
 		
@@ -602,7 +559,7 @@ function createPreloadSpriteSheet()
 			"@":40,  //gold
 			"#":41,  //trap
 			"FLASH": { //42 & 43 
-				frames: [42, 42, 42, 43, 43, 43],
+				frames: [42, 42, 43, 43],
 				next: "FLASH",
 				speed: FLASH_SPEED
 			},
@@ -613,6 +570,73 @@ function createPreloadSpriteSheet()
 	});
 }
 
+function createGuardObj(imageName)
+{
+	var guard = new createjs.SpriteSheet(
+	{
+		images: [getThemeBitmap(imageName).image],
+		
+		frames: {regX:0, height: BASE_TILE_Y,  regY: 0, width: BASE_TILE_X},
+		
+		animations: { 
+			runRight: [0,2,  "runRight", GUARD_SPEED], 
+			runLeft : [3,5,  "runLeft",  GUARD_SPEED],
+			runUpDn : [6,7,  "runUpDn",  GUARD_SPEED],
+					 
+			barRight: {
+				frames: [ 22, 23, 23, 24, 24 ],
+				next:  "barRight",
+				speed: GUARD_SPEED
+			},
+				 
+			barLeft: {
+				frames: [ 25, 26, 26, 27, 27 ],
+				next:  "barLeft",
+				speed: GUARD_SPEED
+			},
+
+			reborn: {
+				frames: [ 28, 28, 29 ], //if change frame idx, don't forgot change "rebornFrame"
+				speed: GUARD_SPEED
+			},
+
+			fallRight : 8,
+			fallLeft: 30,
+
+			shakeRight: {
+				frames: [ 8, 8, 8, 8, 8, 8, 8,
+				          8, 8, 8, 8, 8, 8,
+				          9, 10, 9, 10, 8 ],
+				next: null,
+				speed: GUARD_SPEED
+			},
+
+			shakeLeft: {
+				frames: [ 30, 30, 30, 30, 30, 30, 30,
+				          30, 30, 30, 30, 30, 30, 
+				          31, 32, 31, 32, 30],
+				next: null,
+				speed: GUARD_SPEED
+			}
+		}
+	});
+	
+	return guard;
+}
+	
+function createHoleObj()
+{
+	holeObj.sprite = new createjs.Sprite(holeData, "digHoleLeft");
+	
+	if(curAiVersion < 3) {
+		holeObj.digLimit = 6; //for check guard is close to runner when digging
+	} else {
+		holeObj.digLimit = 8; //for check guard is close to runner when digging
+	}
+	
+	holeObj.action = ACT_STOP; //no digging 
+}
+
 //=======================================
 // country flag for demo info 5/14/2015
 //=======================================

lodeRunner.runner.js

@@ -172,8 +172,14 @@ function runnerMoveStep(action, stayCurrPos )
 		var holdOnBar = 0;
 		if(curToken == BAR_T) {
 			if( yOffset < 0) holdOnBar = 1;
-			else if(action == ACT_DOWN && y < maxTileY && map[x][y+1].act != LADDR_T) {
-				action = ACT_FALL; //shape fixed: 2014/03/27
+			else {
+				//when runner with bar and press down will into falling state 
+				// except "laddr" or "guard" at below, 11/25/2016
+				if(action == ACT_DOWN && y < maxTileY && 
+					map[x][y+1].act != LADDR_T && map[x][y+1].act != GUARD_T) 
+				{
+					action = ACT_FALL;
+				}
 			}
 		}
 		
@@ -341,7 +347,7 @@ function addGold(x, y)
 	var tile;
 	
 	map[x][y].base = GOLD_T;
-	tile = map[x][y].bitmap = new createjs.Bitmap(getThemeImage("gold"));
+	tile = map[x][y].bitmap = getThemeBitmap("gold");
 	tile.setTransform(x * tileWScale, y * tileHScale,tileScale, tileScale); //x,y, scaleX, scaleY 
 	mainStage.addChild(tile); 
 	
@@ -656,6 +662,7 @@ function fillComplete(evt, data)
 		if(guard[id].hasGold > 0) { //guard has gold and not fall into the hole
 			decGold(); 
 			guard[id].hasGold = 0;
+			guardRemoveRedhat(guard[id]); //9/4/2016	
 		}
 		guardReborn(x,y);
 		if(playMode == PLAY_CLASSIC || playMode == PLAY_AUTO || playMode == PLAY_DEMO) {	

lodeRunner.storage.js

@@ -234,9 +234,9 @@ function getFirstPlayInfo()
 {
 	var firstValue;
 	
-	firstValue =  parseInt(getStorage(STORAGE_FIRST_PLAY));
+	firstValue =  parseFloat(getStorage(STORAGE_FIRST_PLAY));
 	
-	if( isNaN(firstValue) || firstValue < parseInt(VERSION) ) {
+	if( isNaN(firstValue) || firstValue < parseFloat(VERSION) ) {
 		firstPlay = 1; 
 	}
 }
@@ -279,9 +279,6 @@ function addEditLevel(levelMap)
 {
 	if(editLevels >= MAX_EDIT_LEVEL) return false;
 	setEditLevel(++editLevels, levelMap);
-	//setStorage(STORAGE_USER_LEVEL+("00"+(editLevelInfo[editLevels])).slice(-3), levelMap); 	
-	//editLevelData[editLevels] = levelMap;
-	//++editLevels;
 	setEditLevelInfo();
 	
 	return true;
@@ -476,6 +473,48 @@ function setRepeatAction()
 	setStorage(STORAGE_REPEAT_ACTION, repeatAction); 	
 }
 
+//========================
+// Gamepad Enable/Disable
+//========================
+function getGamepadMode()
+{
+	if((gamepadMode = getStorage(STORAGE_GAMEPAD_MODE)) == null)	{
+		gamepadMode = 1; //set default enable
+	} else {
+		gamepadMode = parseInt(gamepadMode)?1:0;
+	}
+	return gamepadMode;
+}
+
+function setGamepadMode()
+{
+	setStorage(STORAGE_GAMEPAD_MODE, gamepadMode); 	
+}
+
+//====================
+// Theme color state
+//====================
+function getThemeColor()
+{
+	var colorId, themeName;
+	
+	for(var i = 0; i < themeNameList.length; i++) {
+		themeName = themeNameList[i];
+		if((colorId = getStorage(STORAGE_THEME_COLOR + themeName)) == null)	{
+			colorId = 0;
+		} else {
+			colorId = parseInt(colorId);
+			if(colorId < 0 || colorId >= maxThemeColor) colorId = 0;
+		}	
+		curColorId[themeName] = colorId;
+	}
+}
+
+function setThemeColor()
+{
+	setStorage(STORAGE_THEME_COLOR + curTheme, curColorId[curTheme]);
+}
+
 //===================
 // Theme state
 //===================
@@ -486,7 +525,6 @@ function getThemeMode()
 		themeName = THEME_APPLE2;
 	}
 	return themeName;
-	
 }
 
 function setThemeMode(themeName)