DrSlump75
Messages postés2Date d'inscriptionlundi 16 janvier 2012StatutMembreDernière intervention16 janvier 2012
-
Modifié par DrSlump75 le 16/01/2012 à 11:26
Bonjour,
depuis quelques jours j'essaie de coder un bejeweled en javascript et j'ai finalement réussi :
<html>
<style>
#GemmeRose
{
position : absolute;
width: 50px;
height: 50px;
margin-auto;
background-image: url('450v2.png');
z-index: 10;
}
#GemmeBleu
{
position : absolute;
width: 50px;
height: 50px;
margin-auto;
background-image: url('350v2.png');
z-index: 10;
}
#GemmeVerte
{
position : absolute;
width: 50px;
height: 50px;
margin-auto;
background-image: url('150v2.png');
z-index: 10;
}
#GemmeViolette
{
position : absolute;
width: 50px;
height: 50px;
margin-auto;
background-image: url('250v2.png');
z-index: 10;
}
#GemmeOrange
{
position : absolute;
width: 50px;
height: 50px;
background-image: url('550v2.png');
z-index: 10;
}
#GemmeJaune
{
position : absolute;
width: 50px;
height: 50px;
background-image: url('650v2.png');
z-index: 10;
}
#playground
{
position: relative;
width: 500px;
margin-auto;
z-index: 5;
}
#toto
{
top: 489px;
left: -280px;
position : relative;
z-index: 15;
}
#compt
{
position : relative;
z-index: 15;
font-family: 'Quantico', cursive;
color: #f45461;
font-size: 50px;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Quantico' rel='stylesheet' type='text/css'>
<body onclick="clik();" onload="decompte();" style="background-color:#e8e8e8; background-image:url('background.png');
background-repeat:no-repeat; background-position:center top;" >
<div id='playground' style='margin : auto; margin-top : 70px;'></div>
<div id='toto'><span id="compt"></span></div>
<script language="javascript" type="text/javascript">
var compte = 100;
var compte2 = 0;
var a = 0;
var pclick = false;
function clik()
{
pclick = true;
}
function decompte()
{
document.getElementById("compt").innerHTML = compte
if(compte == 0 || compte < 0) {
compte = 0;
alert("Tu as tenu " + compte2 + " secondes, c'est nul.");
clearInterval(timer);
}
compte-=1;
}
function decompte2()
{
compte2+=1;
}
var timer2 = setInterval('decompte2()',1000);
var timer = setInterval('decompte()',250);
var premiereGemme;
var PremiereGemmeClique = false;
var deuxiemeGemme;
var DeuxiemeGemmeClique = false;
var SauvegardeGemme;
var id = 0;
while (id < 64)
{
var div = document.createElement('div');
div.style.width = '60px';
div.style.height = '60px';
div.style.border = '1px solid #fff';
div.style.cssFloat = 'left';
div.id = id;
var p = document.getElementById('playground');
p.appendChild(div);
var Gemme = document.createElement('div');
generationGemme(id, Gemme);
div.addEventListener('click', EchangeGemme, true);
id++;
}
function generationGemme(idCase, Gemme)
{
var caseGemme = document.getElementById(idCase);
var generation = 0;
Gemme.style.marginTop = '4px';
Gemme.style.marginLeft = '5px';
generation = Math.random();
generation = generation * 5;
generation = Math.round(generation);
if (generation == 0)
{
Gemme.id = "GemmeBleu";
caseGemme.appendChild(Gemme);
}
if (generation == 1)
{
Gemme.id = "GemmeRose";
caseGemme.appendChild(Gemme);
}
if (generation == 2)
{
Gemme.id = "GemmeVerte";
caseGemme.appendChild(Gemme);
}
if (generation == 3)
{
Gemme.id = "GemmeViolette";
caseGemme.appendChild(Gemme);
}
if (generation == 4)
{
Gemme.id = "GemmeOrange";
caseGemme.appendChild(Gemme);
}
if (generation == 5)
{
Gemme.id = "GemmeJaune";
caseGemme.appendChild(Gemme);
}
}
setInterval(DescenteGemme, 150);
GemmeDestruction();
function EchangeGemme(event)
{
var Gemme = event.currentTarget.childNodes[0].id;
if (PremiereGemmeClique == false && Gemme != 'GemmeNone')
{
PremiereGemme = event.currentTarget;
PremiereGemmeClique = true;
}
else if (Gemme != 'GemmeNone')
{
DeuxiemeGemme = event.currentTarget;
if (((parseInt(PremiereGemme.id) + 1) == parseInt(DeuxiemeGemme.id)) || ((parseInt(PremiereGemme.id) - 1) ==
parseInt(DeuxiemeGemme.id)) || ((parseInt(PremiereGemme.id) - 8)
== parseInt(DeuxiemeGemme.id)) || ((parseInt(PremiereGemme.id) + 8) == parseInt(DeuxiemeGemme.id)))
{
SauvegardeGemme = PremiereGemme.childNodes[0].id
PremiereGemme.childNodes[0].id = DeuxiemeGemme.childNodes[0].id
DeuxiemeGemme.childNodes[0].id = SauvegardeGemme
PremiereGemmeClique = false;
}
else
{
alert("L'échange ne peut être effectué.");
PremiereGemmeClique = false;
}
}
else
{
}
GemmeDestruction();
}
function GemmeDestruction()
{
var line = 1;
var GemmeID = 0;
var GemmeIDBonus = 0;
var nbGemmeIDBonus = 0;
// Scanner horizontale
while (GemmeID < 64)
{
if (GemmeID == (8 * line))
{
line++;
}
if ((GemmeID == 0) || (GemmeID + 1 >= 64) || (GemmeID == (8 * line) - 1) || (GemmeID == (((8 * line) - 1) - (8 - 1))))
{
GemmeID++;
}
else
{
if ((document.childNodes[0].childNodes[1].childNodes[1].childNodes[GemmeID].childNodes[0].id ==
document.childNodes[0].childNodes[1].childNodes[1].childNodes[GemmeID - 1].childNodes[0].id) &&
(document.childNodes[0].childNodes[1].childNodes[1].childNodes[GemmeID].childNodes[0].id ==
document.childNodes[0].childNodes[1].childNodes[1].childNodes[GemmeID + 1].childNodes[0].id))
{
GemmeIDBonus = GemmeID + 1
while ((GemmeIDBonus != 0) && (GemmeIDBonus + 1 < 64) && (GemmeIDBonus != (8 * line) - 1) &&
(GemmeIDBonus != (((8 * line) - 1) - (8 - 1))) &&
(document.childNodes[0].childNodes[1].childNodes[1].childNodes[GemmeIDBonus].childNodes[0].id ==
document.childNodes[0].childNodes[1].childNodes[1].childNodes[GemmeIDBonus + 1].childNodes[0].id))
{
nbGemmeIDBonus++;
GemmeIDBonus++;
}
while (nbGemmeIDBonus > 0)
{
DetruireGemme(GemmeID + 1 + nbGemmeIDBonus);
nbGemmeIDBonus--;
}
DetruireGemme(GemmeID - 1);
DetruireGemme(GemmeID);
DetruireGemme(GemmeID + 1);
}
GemmeID++;
}
}
GemmeID = 0;
// Scanner verticale
while (GemmeID < 64)
{
if (((GemmeID >= 0) && (GemmeID <= 8 - 1)) || ((GemmeID >= (64 - 8)) && (GemmeID <= 64)))
{
GemmeID++;
}
else
{
if ((document.childNodes[0].childNodes[1].childNodes[1].childNodes[GemmeID].childNodes[0].id ==
document.childNodes[0].childNodes[1].childNodes[1].childNodes[GemmeID - 8].childNodes[0].id) &&
(document.childNodes[0].childNodes[1].childNodes[1].childNodes[GemmeID].childNodes[0].id ==
document.childNodes[0].childNodes[1].childNodes[1].childNodes[GemmeID + 8].childNodes[0].id))
{
DetruireGemme(GemmeID - 8);
DetruireGemme(GemmeID);
DetruireGemme(GemmeID + 8);
}
GemmeID++;
}
}
}
function DetruireGemme(GemmeDetruite)
{
document.childNodes[0].childNodes[1].childNodes[1].childNodes[GemmeDetruite].childNodes[0].id = 'GemmeNone';
if (pclick == true)
{
compte += 1;
}
}
function DescenteGemme(event)
{
var caseGemmeID = 63;
var Descente = false;
while (caseGemmeID >= 0)
{
if ((caseGemmeID >= 0) && (caseGemmeID < 8))
{
if (document.childNodes[0].childNodes[1].childNodes[1].childNodes[caseGemmeID].childNodes[0].id == 'GemmeNone')
{
generationGemme(caseGemmeID, document.childNodes[0].childNodes[1].childNodes[1].childNodes[caseGemmeID].childNodes[0]);
caseGemmeID--;
Descente = true;
}
else
{
caseGemmeID--;
}
}
else
{
if (document.childNodes[0].childNodes[1].childNodes[1].childNodes[caseGemmeID].childNodes[0].id == 'GemmeNone')
{
document.childNodes[0].childNodes[1].childNodes[1].childNodes[caseGemmeID].childNodes[0].id =
document.childNodes[0].childNodes[1].childNodes[1].childNodes[caseGemmeID - 8].childNodes[0].id;
document.childNodes[0].childNodes[1].childNodes[1].childNodes[caseGemmeID - 8].childNodes[0].id = 'GemmeNone';
caseGemmeID--;
Descente = true;
}
else
{
caseGemmeID--;
}
}
}
if (Descente == false)
{
GemmeDestruction();
}
}
</script>
</body>
</html>
Le bejeweled est fonctionnel tel quel, sauf que dès que j'ajoute un simple Head il ne fonctionne plus et me donne le message d'erreur :
"Cannot read property 'childNodes' of undefined"
Une idée d'ou proviendrait ce problème ? :/
Merci !