Forum » Programiranje » Potrebujem javascript pomoč
Potrebujem javascript pomoč
no1pheeew ::
Pozdravljeni,
Sem začetnik programiranja in delam neko skriptico v javascript podobno zadevi tukaj.
Do sedaj mi je uspelo narediti samo inpute, dropdown za podatke in v kolikor so vpisana imena igralceva, da se ta izpišejo na sliki.
Predvsem imam problem z načrtovanjem same zadeve. Kako naj naredim v kolikor igralec izbere drugačno taktiko, da se spremenijo koordinate igralcev(uporabljam ctx za risanje)? Kako naj naredim, da se ime na sliki spremeni v kolikor vnesem nekaj novega(onChange event?)?
Še moja skormna koda:
Za vse odgovore in ostale napotke se že v naprej zahvaljujem ;)
Sem začetnik programiranja in delam neko skriptico v javascript podobno zadevi tukaj.
Do sedaj mi je uspelo narediti samo inpute, dropdown za podatke in v kolikor so vpisana imena igralceva, da se ta izpišejo na sliki.
Predvsem imam problem z načrtovanjem same zadeve. Kako naj naredim v kolikor igralec izbere drugačno taktiko, da se spremenijo koordinate igralcev(uporabljam ctx za risanje)? Kako naj naredim, da se ime na sliki spremeni v kolikor vnesem nekaj novega(onChange event?)?
Še moja skormna koda:
<!DOCTYPE html> <html> <head> <script type="application/javascript"> function init() { var canvas = document.getElementById("canvas"); var player1 = document.getElementById("player1").value; var player2 = document.getElementById("player2").value; var player3 = document.getElementById("player3").value; var player4 = document.getElementById("player4").value; var player5 = document.getElementById("player5").value; var player6 = document.getElementById("player6").value; var player7 = document.getElementById("player7").value; var player8 = document.getElementById("player8").value; var player9 = document.getElementById("player9").value; var player10 = document.getElementById("player10").value; var player11 = document.getElementById("player11").value; if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.font = "10px verdana"; ctx.fillStyle = "blue"; ctx.textAlign="center"; var slika = new Image(); slika.src = "igrisce.jpg"; slika.onload = function() { ctx.drawImage(slika, 0, 0); ctx.fillText(player11, 134, 90); ctx.fillText(player10, 134, 130); ctx.fillText(player9, 44, 190); ctx.fillText(player8, 104, 190); ctx.fillText(player7, 164, 190); ctx.fillText(player6, 224, 190); ctx.fillText(player5, 224, 255); ctx.fillText(player4, 164, 255); ctx.fillText(player3, 104, 255); ctx.fillText(player2, 44, 255); ctx.fillText(player1, 134, 305); } } } </script> </head> <body onload="init();"> <canvas id="canvas" width="900" height="500" ></canvas><br> <form name="myform" method="post" action=""> Name: <input type='text' name='name' /><br /><br /> Tactic: <select id="mydropdown" onChange="updatesquad(this.options[this.selectedIndex].value)"> <option value="squad532" >5-3-2</option> <option value="squad433" >4-3-3</option> <option value="squad442" >4-4-2</option> <option selected value="squad4411" >4-4-1-1</option> <option value="squad4231" >4-2-3-1</option> <option value="squad4312" >4-3-1-2</option> <option value="squad4132" >4-1-3-2</option> <option value="squad4321" >4-3-2-1</option> <option value="squad352" >3-5-2</option> <option value="squad343" >3-4-3</option> </select> <br /><br /> Player1: <input type='text' id='player1' /><br /> Player2: <input type='text' id='player2' /><br /> Player3: <input type='text' id='player3' /><br /> Player4: <input type='text' id='player4' /><br /> Player5: <input type='text' id='player5' /><br /> Player6: <input type='text' id='player6' /><br /> Player7: <input type='text' id='player7' /><br /> Player8: <input type='text' id='player8' /><br /> Player9: <input type='text' id='player9' /><br /> Player10: <input type='text' id='player10' /><br /> Player11: <input type='text' id='player11' /><br /> <input type='button' onclick='init()' value='Send'/> </form> </body> </html>
Za vse odgovore in ostale napotke se že v naprej zahvaljujem ;)
- spremenilo: no1pheeew ()
t3hn0 ::
Glede na to da playerje dodas s pomocjo koordinat, si lahko za vsako postavitev izpises koordinate v nek array in potem ob klicu nalozis primerno polje arraya in ustrezno prestavis slike.
torej na grobo bi izgledalo tako
array => {
0 => {koor1, koor2, koor3, koor4, ...}, // prva postavitev, npr: prvi dve koordinati sta za player1
1 => {koor1, koor2, koor3, koor4, ...}, // druga postavitev
...
}
Na tej strani je uporabljen se jQuery (Javascript API), od katerega je uporabljena funkcija keyup - s tem preverjas neko polje ob spremembi
torej na grobo bi izgledalo tako
array => {
0 => {koor1, koor2, koor3, koor4, ...}, // prva postavitev, npr: prvi dve koordinati sta za player1
1 => {koor1, koor2, koor3, koor4, ...}, // druga postavitev
...
}
Na tej strani je uporabljen se jQuery (Javascript API), od katerega je uporabljena funkcija keyup - s tem preverjas neko polje ob spremembi
^.^
no1pheeew ::
Prvo se opravičujem zaradi naslova teme, ki ni glih po predpisih in si zaslužim minus :) Nato se zahvaljujem za uporaben odgovor. Glede taktike se bom lotil kar arrayev in podal za vsako pozicijo svoje koordinate.
Je morda kakšen boljši način za izdelavo te aplikacije v javascriptu/php?
Je morda kakšen boljši način za izdelavo te aplikacije v javascriptu/php?
no1pheeew ::
Dodal sem sledeče stvari:
Zanima me kako bi lahko "live" spreminjal imena igralcev glede na zastavljeno taktiko tako kot ima to omenjena skripta zgoraj narejeno z keyupom? Je morda še kakšen način? :)
var tactic = new Array(); var players = new Array(player1,player2,player3,player4,player5,player6,player7,player8,player9,player10,player11); tactic['squad442'] = new Array(new Array(114, 90), new Array(114, 130), new Array(44, 190), new Array(104, 190), new Array(164, 190), new Array(224, 190), new Array(224, 255), new Array(164, 255), new Array(104, 255), new Array(44, 255), new Array(134, 305)); // in switch za postavlanje taktike switch (myValue) { case "squad4411": for (i=0; i<tactic['squad4411'].length; i++){ ctx.fillText(players[i], tactic['squad4411'][i][0], tactic['squad4411'][i][1]); } break; case "squad532": for (i=0; i<tactic['squad532'].length; i++){ ctx.fillText(players[i], tactic['squad532'][i][0], tactic['squad532'][i][1]); } break; case "squad433": for (i=0; i<tactic['squad433'].length; i++){ ctx.fillText(players[i], tactic['squad433'][i][0], tactic['squad433'][i][1]); } break; case "squad4231": for (i=0; i<tactic['squad4231'].length; i++){ ctx.fillText(players[i], tactic['squad4231'][i][0], tactic['squad4231'][i][1]); } break; case "squad4411": for (i=0; i<tactic['squad4312'].length; i++){ ctx.fillText(players[i], tactic['squad4312'][i][0], tactic['squad4312'][i][1]); } break; case "squad4132": for (i=0; i<tactic['squad4132'].length; i++){ ctx.fillText(players[i], tactic['squad4132'][i][0], tactic['squad4132'][i][1]); } break; case "squad4321": for (i=0; i<tactic['squad4321'].length; i++){ ctx.fillText(players[i], tactic['squad4321'][i][0], tactic['squad4321'][i][1]); } break; case "squad352": for (i=0; i<tactic['squad352'].length; i++){ ctx.fillText(players[i], tactic['squad352'][i][0], tactic['squad352'][i][1]); } break; case "squad343": for (i=0; i<tactic['squad343'].length; i++){ ctx.fillText(players[i], tactic['squad343'][i][0], tactic['squad343'][i][1]); } case "squad4312": for (i=0; i<tactic['squad4312'].length; i++){ ctx.fillText(players[i], tactic['squad4312'][i][0], tactic['squad4312'][i][1]); } default: for (i=0; i<tactic['squad442'].length; i++){ ctx.fillText(players[i], tactic['squad442'][i][0], tactic['squad442'][i][1]); } }
Zanima me kako bi lahko "live" spreminjal imena igralcev glede na zastavljeno taktiko tako kot ima to omenjena skripta zgoraj narejeno z keyupom? Je morda še kakšen način? :)
carota ::
// in switch za postavlanje taktike switch (myValue) { case "squad4411": for (i=0; i<tactic['squad4411'].length; i++){ ctx.fillText(players[i], tactic['squad4411'][i][0], tactic['squad4411'][i][1]); } break; ...
Mimogrede, ne bi bilo lažje tako:
for (i = 0; i < tactic[myValue].length; i++) { ... tactic[myValue][i][0] ... }
?
carota ::
Ja, so še drugi načini, odvisno pa je od tega kaj hočeš doseči. Lahko bi naredil z drugimi eventi npr. "onblur" ali pa ob kliku na gumb ali po določenem času ... It's up to you.
t3hn0 ::
pri zadnjih dveh casih ti manjka "break;"
case "squad343":
case "squad4312":
...pogosta napaka
case "squad343":
case "squad4312":
...pogosta napaka
^.^
no1pheeew ::
Potem sem switch odstranil glede na to, kar je predlagal @carota :) in drugi problemček sem rešil z jquery - keyup,...
Vredno ogleda ...
Tema | Ogledi | Zadnje sporočilo | |
---|---|---|---|
Tema | Ogledi | Zadnje sporočilo | |
» | JqueryOddelek: Izdelava spletišč | 1814 (1538) | mk818764 |
» | Javascript - izračun razlike v datumihOddelek: Programiranje | 1928 (1783) | kogledom |
» | Definiranje spremenjivke - javascriptOddelek: Programiranje | 1221 (1144) | a-ptuj |
» | Internet strani kot slideshowOddelek: Izdelava spletišč | 2115 (1866) | sverde21 |
» | [question]neki glede menijaOddelek: Izdelava spletišč | 1631 (1510) | tec |