hi,

ich wollte das spiel bubblebreaker bzw jawbreaker (http://www.bigfrog.net/jawbreaker/) mit hilfe von svg und javascript programmieren. leider muss ich die grafischen aspekte in svg machen.

meine svg datei sieht so aus:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<!-- New document created with EditiX at Fri Nov 27 16:20:30 CET 2009 -->

<svg width="100%" height="100%">
<svg width="100%" height="100%" viewBox="0 0 75 80" >

<text x="10" y="7"
font-family="Comic Sans MS"
fill="black" font-size="4"> XML-Projekt ReMovem
</text>

<!-- Rechteck gross-->
<rect x="2" y="15" rx="3" ry="3" width="60" height="50"
stroke="#BA55D3" fill="#BA55D3" stroke-width="0.3">
</rect>


<!-- Rechteck klein -->
<rect x="6" y="20" width="32" height="39"
stroke="#C0C0C0" fill="#BA55D3" stroke-width="0.3">
</rect>

<!-- Rechteck fuer das Ergebnis-->
<g id="ergbenis">
<rect x="40" y="32" rx="3" ry="3" width="20" height="15"
stroke="#C0C0C0" fill="#BA55D3" stroke-width="0.3">
</rect>


<text x="42" y="37"
font-family="Comic Sans MS" font-size="3.4" fill="">Ergebnis:
</text>

</g>

<g id="newgame">
<rect x="40" y="20" rx="3" ry="3" width="18" height="6"
stroke="#C0C0C0" fill="#BA55D3" stroke-width="0.3">
</rect>


<text x="42" y="24"
font-family="Comic Sans MS" font-size="2.8" fill="">New Game
</text>

</g>


<!-- Kreis in blau -->
<g id="kreisblau"> <!-- ID für das Kreis in schwarz, da es mehrmals verwendet wird und so nicht immer wieder neu definiert werden muss-->
<circle cx="8" cy="57" r="1.5"
stroke-width="0.5" stroke="#000080" fill="#000080"/>
</g>

<!-- Kreis in rot -->
<g id="kreisrot"> <!-- ID für das Kreis in schwarz, da es mehrmals verwendet wird und so nicht immer wieder neu definiert werden muss-->
<circle cx="22.1" cy="57" r="1.5"
stroke-width="0.5" stroke="#FF0000" fill="#FF0000"/>
</g>

<!-- Kreis in orange -->
<g id="kreisorange"> <!-- ID für das Kreis in schwarz, da es mehrmals verwendet wird und so nicht immer wieder neu definiert werden muss-->
<circle cx="18.6" cy="57" r="1.5"
stroke-width="0.5" stroke="#FF8C00" fill="#FF8C00"/>
</g>

<!-- Kreis in gruen -->
<g id="kreisgruen"> <!-- ID für das Kreis in schwarz, da es mehrmals verwendet wird und so nicht immer wieder neu definiert werden muss-->
<circle cx="15.1" cy="57" r="1.5"
stroke-width="0.5" stroke="#006400" fill="#006400"/>
</g>


<!-- Die einzelnen Kreise im Spiel-->


<!-- Die einzelnen Kreise in der ersten Reihe-->
<use xlink:href="#kreisblau" transform="translate(3.5)"></use>

<use xlink:href="#kreisrot" transform="translate(3.5)"></use>
<use xlink:href="#kreisorange" transform="translate(10.5)"></use>
<use xlink:href="#kreisorange" transform="translate(14)"></use>
<use xlink:href="#kreisorange" transform="translate(17.5)"></use>

<script type="text/javascript">
<![CDATA[

]]>
</script>

</svg>
</svg>

leider weiss ich nicht, wie ich die ids in javascript einbinden soll und ob ich das spiel fenster auch in javascript definieren muss oder in svg

ich weiß das ich ein array benötige, damit der mir die kugel/kreise für ein neubeginn zufällig aus gibt. weiß jetzt aber nicht wie ich das in javascript umsetzten soll

wie die berrechnung, das runterfallen und das nach rechts bzw links schieben geht weiß ich ungefähr, sowie das berechnen der punkte

vielleicht kann mir ja jemand schnell helfen, da ich den prototypen bis freitag fertig haben muss.

bei google findet man leider auch nichts dazu. zwar ein javascript für den bubblebreaker, aber nicht in verbindung mit svg.

vielen dank schonmal im vorraus