/* --------------------------------------------------- Variabler for mouseDown(), mouseUp(), trackMouse() og traceComplete() */ /* var xList = new Array(); //DETTE ARRAYET SKAL FYLLES MED X-KOORDINATENE FRA KOORDINATFILENE var yList = new Array(); //DETTE ARRAYET SKAL FYLLES MED Y-KOORDINATENE FRA KOORDINATFILENE */ var xPos; var yPos; var i = 0; var iBreak = 0; var isMouseDown = false; var points = 0; var pointCountdown = 100; var pointsTotal = 0; var canvas = document.getElementById("content"); var ctx = canvas.getContext("2d"); ctx.font="12px Tahoma"; ctx.fillStyle="#FF0000"; ctx.shadowBlur=10; ctx.shadowOffsetX=10; ctx.shadowOffsetY=10; complete = false; /* --------------------------------------------------- Variabler for loadImage() */ var arrST = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "Æ", "Ø", "Å", "Ferdig"); var arrSM = new Array("a1", "b1", "c1", "d1", "e1", "f1", "g1", "h1", "i1", "j1", "k1", "l1", "m1", "n1", "o1", "p1", "q1", "r1", "s1", "t1", "u1", "v1", "w1", "x1", "y1", "z1", "æ1", "ø1", "å1", "Ferdig"); var counterST = 0; var counterSM = 0; var counter = 0; var sel; /* --------------------------------------------------- MIDLERTIDIGE ARRAYS KUN FOR DEMOVERSJONEN Holder koordinatene til A, B, C for enkel fylling av xList og yList */ var arrayAX = new Array("64","85","106","123","144","163","185","202","225","244","265","285","310","332","348","-","164","203","243","F"); var arrayAY = new Array("427","382","337","294","248","201","153","121","171","211","255","305","347","399","435","-","283","283","283","F"); var arrayBX = new Array("118","118","118","118","118","118","118","118","118","118","118","-","117","161","215","250","270","272","251","220", "171","143","193","237","271","283","280","262","230","187","146","118","F"); var arrayBY = new Array("77","111","141","175","208","246","282","313","345","377","408","-","77","75","78","97","133","171","203","230","238","237","239","250","277","313","343","378","400","407","408","408","F"); var arrayCX = new Array("327","285","237","185","139","101","79","73","85","114","157","217","288","342","F"); var arrayCY = new Array("98","82","76","83","104","144","191","244","301","345","381","404","407","389","F"); //TESTVARIABLER var xList = arrayAX; var yList = arrayAY; //DE TO FØLGENDE FUNKSJONER KALLES AV onmousedown OG onmouseup I HTML'EN ( ) function mouseDown(){ isMouseDown = true; } function mouseUp(){ isMouseDown = false; if(!complete){ i = iBreak; points = 0; ctx.clearRect(0,0,400,500); ctx.fillText(pointsTotal,130,11); } } function trackMouse(){ if(isMouseDown){ complete = false; xPos = event.pageX; yPos = event.pageY; if(pointCountdown>0){ pointCountdown--; }else{ isMouseDown = false; i = iBreak; } /* //Kode for å tegne streker med musepeker //VIRKER IKKE :( ctx.strokeStyle = "black"; ctx.lineWidth = 3; ctx.lineCap = "round"; ctx.beginPath(); ctx.moveTo(xPos,yPos); ctx.lineTo(xPos+1,yPos+1); ctx.stroke(); */ //Sjekk at både xPos og yPos er i nærheten av neste koordinat i rekkken //"I nærheten" betyr her at det gis en margin på pluss/minus 20 piksler (strekene i bokstavene er ca 50 piksler brede; pluss/minus 20 piksler fra midt i tar deg nesten ut til kanten) if(xPos<=(xList[i]+5) && xPos>=(xList[i]-5)){ //xPos er i nærheten, da tester vi yPos - begge må være nært for å passere! if(yPos<=(yList[i]+5) && yPos>=(yList[i]-5)){ //HVIS DU NÅR INN HIT HAR MUSEPEKEREN PASSERT ET CHECKPOINT i++; points += pointCountdown; //Gi poeng pointCountdown = 100; //Nullstill pointCountdown ctx.clearRect(0,0,400,500); ctx.fillText(pointsTotal + points,130,11); //Vi må også sjekke om neste koordinat er et brytningspunkt (at bruker må løfte fingeren av skjermen/musen for å begynne på en ny strek) //Disse indikeres i koordinatfilene og dermed også i xList og yList som en dash (bindestrek; "-") if(xList[i] == "-" && yList[i] == "-"){ isMouseDown = false; //Ved å sette isMouseDown til false sørger vi for at trackMouse() ikke gjør noe inntil museknappen slippes og trykkes ned på nytt i++; //Vi går videre i koordinatene og er klare for ny strek iBreak = i; //Lagre hvor break'en er... complete = true; //Første strek er complete, vi setter den til false ved neste klikk... }else if(xList[i] == "F" && yList[i] == "F"){ traceComplete(); //Hvis bokstaven "F" dukker opp i koordinatarray'et har vi passert siste punkt og trace'en er ferdig. Da kjøres traceComplete() } //DU BØR OGSÅ GI VISUELL TILBAKEMELDING PÅ FREMGANG, DETTE GJØR FUNKSJONEN traceProgress() //traceProgress(); } } } } function traceComplete(){ pointsTotal += points; complete = true; ctx.clearRect(0,0,400,500); i = 0; iBreak = 0; pointCountdown = 100; document.getElementById('content').style.background = "url('./images/finish.png')"; if(xList == arrayAX){ xList = arrayBX; yList = arrayBY; }else if(xList == arrayBX){ xList = arrayCX; yList = arrayCY; } setTimeout(function() {loadImage(sel);},5000); } function loadImage(){ sel = arguments[0]; menu = arguments[1]; if(!complete && pointsTotal > 0 && menu == "m"){ pointsTotal = 0; } complete = false; ctx.clearRect(0,0,400,500); ctx.fillText(pointsTotal,130,11); if (sel=="cap"){ if(counterST < arrST.length){ var imag = './images/' +arrST[counterST]+'.png'; document.getElementById('content').style.background = 'url('+imag+')'; /* //Her skal funksjon for å hente tilsvarende koordinater være loadCoordinates(arrST[counterST]); */ }else if(counterST == arrST.length){ counterST = 0; } counterST++; counterSM = 0; counter = 0; }else if (sel=="small"){ if(counterSM < arrSM.length){ var imag = 'images/' +arrSM[counterSM]+'.png'; document.getElementById('content').style.background = 'url('+imag+')'; /* //Her skal funksjon for å hente tilsvarende koordinater være loadCoordinates(arrSM[counterSM]); */ }else if(counterSM == arrSM.length){ counterST = 0; } counterSM++; counterST = 0; counter = 0; }else if (sel=="num"){ if(counter < 10){ var imag = 'images/' +counter+'.png'; document.getElementById('content').style.background = 'url('+imag+')'; /* //Her skal funksjon for å hente tilsvarende koordinater være loadCoordinates(arrST[counter]); */ }else if(counter == 10 && sel == "num"){ counter = 0; var imag = 'images/' +counter+'.png'; document.getElementById('content').style.background = 'url('+imag+')'; } counter++; counterSM = 0; counterST = 0; }else{ alert("Invalid command! How did you do that? Naughty, naughty..."); } }