hulp nodig bij maken javscript schaakspel - Softwareontwikkeling

donderdag 10 september 2009 18:24

Acties:

0 Henk 'm!

Topicstarter

Voor school probeer ik een schaakspel te schrijven in javascript, echter loop ik nu vast.
Ik heb het zover gekregen dat je de stukken kun verplaatsen maar bij het proberen het zo te maken dat je ook alleen maar geldige zetten kunt doen loop ik vast.

Hiervoor probeer ik namelijk eerst te checken wat voor stuk het is, dus ben ik begonnen met het checken of het een toren (met behulp van een if() ) is, hiervoor vergelijk ik de innerHTML van de cel (het schaakspel is één grote tabel met de schaakstukken als plaatjes) met de code die nodig is voor het tonen van de toren, maar vreemd genoeg veranderd de code van nadat één keer is verplaatst:

<img src="schaak stenen/zwartetoren.gif" />

naar:

<IMG src"file:///C:/Users?Huub?documents?informatica?schaak%20stenen/zwartetoren.gif">

dus hij lijkt zelf de relative link in een absolute te veranderen (ik kwam hier achter door hem de innerHTML te laten alerten zoals je in de code kunt zien)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script language="javascript">
var posities = new Array()
var rijen = 0
var cellen = 0
var arrayteller = 0
var klikteller = 0
var rij = 0
var kolom = 0

function positiesopslaan(cel) {
for(r=0;r<8;r++) {
for(k=0;k<8;k++){
posities[arrayteller]=window.document.getElementById("speelveld").rows[r].cells[k].innerHTML
arrayteller++
}
}
}

function bewegen(cel){
if(klikteller==0){
inhoud = cel.innerHTML
if(inhoud != " "){
klikteller++
rij = cel.parentNode.rowIndex
kolom = cel.cellIndex
nummervandecel = cel.parentNode.rowIndex * 8 + cel.cellIndex
posities[nummervandecel] = window.document.getElementById("speelveld").rows[rij].cells[kolom].innerHTML
window.document.getElementById("informatie").innerHTML="Waar moet het stuk heen?"
}
}
else if(klikteller==1 && rij!=cel.parentNode.rowIndex || kolom!=cel.cellIndex){
oudecel = window.document.getElementById("speelveld").rows[rij].cells[kolom]
alert(oudecel.innerHTML)
if(oudecel.innerHTML == '<IMG src="schaak stenen/zwartetoren.gif">'){
klikteller--
window.document.getElementById("speelveld").rows[rij].cells[kolom].innerHTML = " "
cel.innerHTML=posities[nummervandecel]
window.document.getElementById("informatie").innerHTML="Welk stuk wilt u verplaatsen?"
}
}
else {
klikteller = 0
window.document.getElementById("informatie").innerHTML="Welk stuk wilt u verplaatsen?"
}
}

</script>

<style>
td {
width:90px;
height:90px;
}
</style>

</head>

<body onload="positiesopslaan()">
<table id="speelveld" border="1">
<tr>
<td onclick="bewegen(this)"><img src="schaak stenen/zwartetoren.gif" /></td>
<td onclick="bewegen(this)" bgcolor="#666666"><img src="schaak stenen/zwartepaard.gif" /></td>
<td onclick="bewegen(this)"><img src="schaak stenen/zwarteloper.gif" /></td>
<td onclick="bewegen(this)" bgcolor="#666666"><img src="schaak stenen/zwartekoningin.gif" /></td>
<td onclick="bewegen(this)"><img src="schaak stenen/zwartekoning.gif" /></td>
<td onclick="bewegen(this)" bgcolor="#666666"><img src="schaak stenen/zwarteloper.gif" /></td>
<td onclick="bewegen(this)"><img src="schaak stenen/zwartepaard.gif" /></td>
<td onclick="bewegen(this)" bgcolor="#666666"><img src="schaak stenen/zwartetoren.gif" /></td>
</tr>
<tr>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
</tr>
<tr>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
</tr>
<tr>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
</tr>
<tr>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
</tr>
<tr>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
</tr>
<tr>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
</tr>
<tr>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
<td onclick="bewegen(this)" bgcolor="#666666"> </td>
<td onclick="bewegen(this)"> </td>
</tr>
</table>

<p id="informatie">Welk stuk wilt u verplaatsen?</p>

</body>
</html>

De code zou dus als volgt moeten werken:

Eerst word door onload function positiesopslaan(cel) uitgevoerd die ervoor zorgt dat de inhoud van alle cellen in de array posities word opgeslagen

Als je dan op een cel klikt word eerst gekeken of hij vol is (dus geen spatie bevat maar een afbeelding),
zo ja dan slaat hij het schaakstuk en de positie en de inhoud op
zo nee dan gebeurd er niets

als je vervolgens op een andere cel klikt dan leegt hij de cel waar je eerst op klikte (de innerhtml word een spatie) en zet hij de img code van de vorige cel in de nieuwe

verder "deselecteerd" hij je schaakstuk als je er nogmaals op klikt

dit alles werkt dus maar zodra ik probeer te checken of het een toren is die je probeert te bewegen lukt de tweede check dus niet door de veranderende code....

donderdag 10 september 2009 19:29

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Sorry; we doen hier niet aan scriptrequests noch Kan iemand even...?-topics. Daarnaast vinden we het fijn als je code tags gebruikt als je code post en het beperkt tot de relevante delen.

En (Waar hoort mijn topic?) je topic hoort in WEB, niet in PRG.

Maar dat hoor je inmiddels allemaal al te weten...

[ Voor 18% gewijzigd door RobIII op 10-09-2009 19:33 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

Dit topic is gesloten.