From 5c0b4e18dd401fdc1ad27dc87cdce9814f121546 Mon Sep 17 00:00:00 2001 From: Patrick Davison Date: Thu, 2 Feb 2012 22:53:39 -0800 Subject: Support for dual-layer animation & achievements. These changes specific to mapspecs.js alone. Changed: the speeds slightly for slow, normal, fast, ultra. Add: support for challenges/tutorials in the request with do.php to check and add achievements. Add: Dual layer animation creates transparency which strenthens the users view that the start & end tiles are pathable. Add: Support for notifications. Add: Support for JSON mapdata w/o use of a div. Add: Support for changing wall-color and emblems. Fix: Where starting location square was not animated. Add: Support for checking and recieving achievements. --- js/mapspecs.js | 180 +++++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 116 insertions(+), 64 deletions(-) (limited to 'js/mapspecs.js') diff --git a/js/mapspecs.js b/js/mapspecs.js index 5361d9d..ff86a28 100644 --- a/js/mapspecs.js +++ b/js/mapspecs.js @@ -20,6 +20,7 @@ else if (document.attachEvent) { // IE 8- } var isChallenge = false; +var challengeID = false; var solution = new Array(); var blocks = new Array(); @@ -27,6 +28,7 @@ var count = new Array(); var mapdata = new Array(); var mapjson = new Array(); var htmlscores = ''; +var htmlnotification = ''; var jsonmapdata = new Object; @@ -53,6 +55,24 @@ function loadSol(sol) { } } +function showNotification(html) { + var div = document.createElement('div'); + var pref = '
'; + var suff = '
'; + div.innerHTML = pref+html+suff; + document.body.appendChild(div.firstChild); +} + +function changeWallColor(newColor) { + playerWallColor = newColor; + loadSol(null); +} +function changeWallEmblem(newEmblem) { + playerWallEmblem = newEmblem; + loadSol(null); +} + function grid_click(obj) { //Prepare data @@ -67,14 +87,23 @@ function grid_click(obj) { } //Is this placing a wall, or removing one? + var tmp = obj.id; + childdiv = document.getElementById('child_'+tmp); if (obj.cv) { //Removing a wall obj.cv = false; - //obj.style.backgroundColor = '#ffffff'; - obj.setAttribute("class", "grid_td"); - //IE 7 + //Reset childdiv to it's default. + childdiv.removeAttribute("class"); + childdiv.setAttribute("class", "grid_inner"); + //childdiv.style.backgroundColor = 'transparent'; + + //return the td obj back to it's default. obj.style.backgroundColor = ''; + obj.style.backgroundImage = ''; + obj.removeAttribute("class"); + obj.setAttribute("class", "grid_td"); + blocks[mapid]++; //Remove wall solution[mapid] = solution[mapid].replace('.'+y+','+x+'.', '.'); @@ -82,14 +111,22 @@ function grid_click(obj) { //Placing a wall if (blocks[mapid] < 1) { updateDsp(mapid, 'dspWalls', "OUT!"); - //document.getElementById(mapid+',dspWalls').innerHTML = "OUT!"; return; } obj.cv = true; - //obj.style.backgroundColor = '#ff0000'; - obj.setAttribute("class", "grid_td_walls"); - //IE 7: - obj.style.backgroundColor = '#666666'; + + childdiv.removeAttribute("class"); + childdiv.setAttribute("class", "grid_td_walls"); + if (typeof playerWallColor === 'undefined' || playerWallColor == '') + obj.style.backgroundColor = '#666666'; + else + obj.style.backgroundColor = playerWallColor; + + if (typeof playerWallEmblem === 'undefined') + ''; + else + obj.style.backgroundImage="url(images/marks/"+playerWallEmblem+")"; + //Add Wall solution[mapid] += y+','+x+'.'; blocks[mapid]--; @@ -146,7 +183,7 @@ function doSend(mapid) { //document.getElementById('dispdo').innerHTML = "http://mazetd.4xg.net/do.php?r=getpath"+reqstr - ajax.requestFile = "do.php?r=getpath"+reqstr; //prepare strdata + ajax.requestFile = "do.php?challengeID="+challengeID+"&isChallenge="+isChallenge+"&r=getpath"+reqstr; //prepare strdata ajax.onCompletion = request_path_done; // specify function to be executed on response ajax.runAJAX(); @@ -188,9 +225,19 @@ function clearwalls(mapid) { eid = mapid+','+tmp[0]+','+tmp[1]; if (document.getElementById(eid) != undefined) { obj = document.getElementById(eid); - obj.setAttribute("class", "grid_td"); - obj.style.backgroundColor = ''; obj.cv = false; + + childdiv = document.getElementById('child_'+obj.id); + + //Reset childdiv to it's default. + childdiv.removeAttribute("class"); + childdiv.setAttribute("class", "grid_inner"); + + //return the td obj back to it's default. + obj.style.backgroundColor = ''; + obj.style.backgroundImage = ''; + obj.removeAttribute("class"); + obj.setAttribute("class", "grid_td"); } } solution[mapid] = undefined; @@ -218,37 +265,24 @@ function request_path_done() { mapjson[JO.mapid] = JO; - // if (typeof(JSON) == undefined) { - // var JO = eval(ajax.response); - // } else { - // var JO = JSON.parse(ajax.response); - // } - if (JO.scores) { + if (JO.scores) updateDsp(JO.mapid, 'dspScore', JO.scores); - } - - for(var i in JO.error) { + + for(var i in JO.error) console.error('\n JO error ' + JO.error[i]); - } - - //document.getElementById('disp').innerHTML = JO.map; - + if (JO.blocked) { alert("The path is blocked!"); return; } - //document.write(JO.map); - //document.getElementById('disppath').innerHTML = JO.path; - //document.getElementById('disptotalmoves').innerHTML = JO.moves; + var disptext = "Record: "+JO.best+" by "+JO.bestby; - updateDsp(JO.mapid, 'dspID', disptext); - //document.getElementById(JO.mapid+',dspID').innerHTML = JO.best; animatePath(JO.path, JO.mapid, JO.start); //Get score update. - ajax.requestFile = "do.php?r=getscores&mapid="+JO.mapid; //prepare strdata + ajax.requestFile = "do.php?checkachieve=true&r=getscores&mapid="+JO.mapid; //prepare strdata ajax.onCompletion = request_scores_done; // Specify function to be executed on response. ajax.runAJAX();// Do it! } @@ -273,6 +307,15 @@ function animatePathDone(mapid) { updateDsp(mapid, 'dspScore', htmlscores); htmlscores = ''; } + if (htmlnotification) { + //setTimeout("showNotification('"+htmlnotification+"');", 300); + showNotification(htmlnotification); + if (checkSound(mapid)) { + soundManager.setVolume('achieve', 50); + setTimeout("soundManager.play('achieve');", 350); + } + htmlnotification = ''; + } if (isChallenge == true) { challengeGo(mapid); } @@ -289,6 +332,7 @@ function request_scores_done() { var JO = JSON.parse(ajax.response); } htmlscores = JO.scores; + htmlnotification = JO.notificationtext; } @@ -318,7 +362,15 @@ function doanimate(x, y, p, c, mapid) { } if (snake[mapid] == undefined) { snake[mapid] = new Array(); - snake[mapid]['color'] = '#4444bb'; + snake[mapid]['color'] = '#ccc'; + } + if (count[mapid] == 0) { + if (t == 'a') { + snake[mapid]['color'] = '#F777FF'; + } + if (t == 'f') { + snake[mapid]['color'] = '#ccc'; + } } //Display movecount @@ -351,12 +403,18 @@ function doanimate(x, y, p, c, mapid) { //Animate. switch(c) { + case 'f': + case 'a': + if (count[mapid] !== 0) + break; + count[mapid]--; case '1': //1 - Up case '2': //2 - Right case '3': //3 - Down case '4': //4 - Left - count[mapid]++; + count[mapid]++; + //Starting; switch(count[mapid]) { case mapjson[mapid].best: flashelement(mapid+',dspCount', 4, "#FF0000"); @@ -377,30 +435,26 @@ function doanimate(x, y, p, c, mapid) { flashelement(mapid+',dspCount', 4); break; } - //if (checkSound(mapid)) { - //soundManager.play('bling'); - //soundManager.play('sc'); - //soundManager.setVolume('click', 50); - //soundManager.play('click'); - //soundManager.play('charm'); - //soundManager.play('ufoblip'); - //} - handle.setAttribute('class', 'grid_td_path'+c); - handle.className = 'grid_td_path'+c; - handle.style.backgroundColor = snake[mapid]['color']; - - string = "if (document.getElementById('"+eid+"').className == 'grid_td_path"+c+"') "; - string += "document.getElementById('"+eid+"').className = '"+origclass+"';"; - setTimeout(string, 855); - //And incase that didn't work... - //setTimeout("document.getElementById('"+eid+"').className = '"+origclass+"'", 7500); - //setTimeout("document.getElementById('"+eid+"').setAttribute('class', '"+origclass+"')", 855); - if (handle.pressed == true) { - setTimeout("document.getElementById('"+eid+"').style.backgroundColor = '#dddddd';", 865); - } else { - setTimeout("document.getElementById('"+eid+"').style.backgroundColor = '';", 865); + childdiv = document.getElementById('child_'+handle.id); + if (childdiv.className != 'grid_td_walls') { + childdiv.setAttribute('class', 'grid_td_path'+c); + + handle.style.backgroundColor = snake[mapid]['color']; + var origColor = handle.style.backgroundColor; + + string = "if (document.getElementById('"+'child_'+eid+"').className == 'grid_td_path"+c+"')"; + string += "document.getElementById('"+'child_'+eid+"').removeAttribute('class');"; + setTimeout(string, 855); + + //Maintain disabled appearnce of checkpoints + if (handle.pressed == true) { + setTimeout("document.getElementById('"+eid+"').style.backgroundColor = '#dddddd';", 865); + } else { + setTimeout("document.getElementById('"+eid+"').style.backgroundColor = '';", 865); + } } + break; //Teleports @@ -412,12 +466,11 @@ function doanimate(x, y, p, c, mapid) { case 'k': case 'q': //Teleport out; - case 'b': + case 'b': //Checkpoints case 'c': case 'd': case 'e': - //break case 'r': //handle.setAttribute('class', 'grid_td_pressed'); //handle.classOrigName = 'grid_td_pressed'; @@ -426,7 +479,6 @@ function doanimate(x, y, p, c, mapid) { handle.style.backgroundColor = '#dddddd'; setTimeout("document.getElementById('"+eid+"').style.backgroundColor = '#dddddd';", 865); handle.pressed = true; - break; } @@ -485,7 +537,7 @@ function doanimate(x, y, p, c, mapid) { //This is the end, lets reset stuff to defaults. count[mapid] = 0; - snake[mapid]['color'] = '#4444bb'; + snake[mapid]['color'] = '#ffffff'; //Bring the color back to our checkpoints/teleports. for(var i in snakeeffected) { //eval(snakeeffected[i]); @@ -500,25 +552,25 @@ function doanimate(x, y, p, c, mapid) { //The next tile exists, how fast should we get there? - rs = 85; + rs = 84; //How fast should we be going? selectbox = document.getElementById(mapid+',speed'); selected = selectbox.options[selectbox.selectedIndex].value; switch (selected) { case '1': - rs =310; + rs =120; break; case '2': - rs =85; + rs =84; break; case '3': - rs =45; + rs =44; break; case '4': - rs =23; + rs =22; break; } @@ -558,7 +610,7 @@ function doanimate(x, y, p, c, mapid) { //Finish target case 'f': rs = rs + 500; - snake[mapid]['color'] = '#4444bb'; + snake[mapid]['color'] = '#ccc'; break; //Hey, we've ran into a teleport. -- cgit v1.2.3