☰

» »

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:
<!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
^.^

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?

no1pheeew ::

Dodal sem sledeče stvari:

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] ...
}

? ;)

no1pheeew ::

ups pa res je, hvala :) mogoče kakšen napotek za drugi problemček? :$

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 :)
^.^

no1pheeew ::

Potem sem switch odstranil glede na to, kar je predlagal @carota :) in drugi problemček sem rešil z jquery - keyup,...

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

Jquery

Oddelek: Izdelava spletišč		151794 (1518) mk818764
»

Javascript - izračun razlike v datumih

Oddelek: Programiranje		81902 (1757) kogledom
»

Definiranje spremenjivke - javascript

Oddelek: Programiranje		51208 (1131) a-ptuj
»

Internet strani kot slideshow

Oddelek: Izdelava spletišč		212105 (1856) sverde21
»

[question]neki glede menija

Oddelek: Izdelava spletišč		151597 (1476) tec

Več podobnih tem