nicht angemeldet
Felder anwählen und abwählen
Hallo zusammen!
Um meine Kenntnisse in den Bereichen Javascript und insbesondere PHP zu erweitern, habe ich mir vorgenommen ein kleines Browser-Strategiespiel zu programmieren. Das ganze soll zunächst etwas wie eine komplexe Variante Schach werden. Meine grundlegende Überlegung ist, alle Spielrelevanten Variablen über php zu speichern und alles andere aus Ressourcengründen per Javascript auf dem User-Rechner auszuführen.
Besonders weit bin ich ehrlich gesagt noch nicht gekommen. Das erste Problem ist die Anwahl von Spielfeldern. Bei einem Klick auf ein Feld (hier durch img-Tags dargestellt) soll sich der Rahmen rot färben. Mein Code sieht bisher so aus:
<body>
<script type="text/javascript">
function RahmenZeigen (line, col) {
document.images["F2I2"].style.border = "1px solid red";
// F2I2
}
</script>
<div class = "feld">Feld</div>
<?php
$feld = 'test.png';
for ($line = 1; $line <=15; $line++)
{
for ($col=1; $col<=10; $col++)
{
echo '
<script type="text/javascript">
var line = ' . $line . ';
var col = ' . $col . ';</script>
';
echo
'<img src ="' . $feld . '"
class = "feld"
name = "F' . $line . 'I' . $col . '"
onmouseover="RahmenZeigen(line, col)">
</img>';
}
$col = 1;
echo '<br />';
}
?>
<p><script type = "text/javascript">document.write (line,col);</script></p>
</body>
In der letzten Zeile sollen zudem die Spielfeldkoordinaten über denen sich der Mauszeiger befindet dynamisch ausgegeben werden.
Ich hoffe ihr könnt mir weiterhelfen!
Beste Grüße,
Johannes
-
Hallo Johannes,
das liest sich alles noch recht unausgegoren. Zum einen schreibst Du etwas von "Klick", färbst den Rahmen eines Bildes dann aber durch onmouseover ein.
function draw(){ // erstellen benötigter Elemente var t=document.createElement('table'); var tb=document.createElement('tbody'); var td=document.createElement('td'); // grundlegenden Style fürs Feld festlegen td.style.border='solid 1px transparent'; td.style.width ='20px'; td.style.height='20px'; // Spielfelder gibt es 8*8; also 8 Zeilen for(var i=0;i<8;i++){ var tr=document.createElement('tr'); // zu jeweils 8 Feldern for(var j=0;j<8;j++){ // Gut und Böse festlegen if((i+j) % 2) td.style.background='#000'; else td.style.background='#fff'; var ttd=td.cloneNode(true); // unterhalb kann das dann auch mit onclick realisiert werden ttd.onmouseover=function(){this.style.border='solid 1px red';} ttd.onmouseout =function(){this.style.border='solid 1px transparent';} tr.appendChild(ttd); } tb.appendChild(tr); } t.appendChild(tb) // Einhängen des Tables (kann auch per <body onlode="draw()"> geschehen document.getElementsByTagName('body')[0].appendChild(t) }Soweit meine Überlegungen zum Grundlegendem. Womit hast Du Probleme?
Gruß aus Berlin!
eddi--
Der Verweis auf die Grundlagen Deines Handelns, ist das Joch zur Freiheit.
Aber so gilt: Allen Leuten Recht getan, ist keine Kunst, weil's jeder kann.