Kein Klick während funktionsablauf möglich...

[Te Hao]

Hallo zusammen :)

Ich habe ein Problem, bei dem mir bisher sämtliche Suchfunktionen/Forenthreads nicht weiterhelfen konnten :/

Ich möchte auf meiner Website ein kleines Spiel implementieren, und zwar in der Form, dass sobald der Besucher über ein verstecktes (zufällig positioniertes) Div-Feld fährt, ein zweites Div sichtbar wird. Dann soll der User zwei Sekunden Zeit haben, dieses Div anzucklicken. Das ganze klappt soweit ganz gut, nur habe ich das Problem, dass das zweite div erst nach ablauf der Zeit sichtbar wird, und sich während dieser zeit auch nichts anklicken lässt. Ich habe schon ein paar JavaScript varianten probiert, komme aber immer zum selben Ergebnis (bin allerdings auch noch relativer JS Neuling ;))

Über Hilfe würde Ich mich Freuen

MfG T3 H40

Hier noch die relevanten Codeauszüge:

Einmal die Funktionen:

function activateGame(){  
        document.getElementById('killcreep').style.backgroundImage="url(./images/creepergame.png)";  
        alert("ssssSSSSSS");  
  
        window.setInterval("endGame()",2000);  
}  
  
function endGame(){  
        alert("Boooomm!!!");  
}

Und der Quelltext der Div's:

<div id="creep" style="position:absolute;top:<?php $top=rand(1,100); echo $top; ?>%;left:<?php $left=rand(1,100); echo $left; ?>%;"onmouseover="javascript:activateGame()"></div>  
  
<div id="killcreep" style="position:absolute;top:<?php $top=rand(1,100); echo $top; ?>%;left:<?php $left=rand(1,100); echo $left; ?>%;" onklick="javascript:getScore()">

[Der Martin]

Hallo,

Ich möchte auf meiner Website ein kleines Spiel implementieren, und zwar in der Form, dass sobald der Besucher über ein verstecktes (zufällig positioniertes) Div-Feld fährt, ein zweites Div sichtbar wird.

aus deinem geposteten Code geht leider *gar nicht* hervor, wo irgendwas sichtbar gemacht wird.

function activateGame(){

document.getElementById('killcreep').style.backgroundImage="url(./images/creepergame.png)";
        alert("ssssSSSSSS");

window.setInterval("endGame()",2000);
}

  
Damit wird dem Element mit der ID "killcreep" ein Hintergrundbild zugeordnet, dann platscht eine alert-Box auf den Bildschirm, und wenn der Anwender die geschlossen hat, "bestellst" du einen periodischen Aufruf von endGame() alle 2 Sekunden. Ich denke, setTimeout() wäre hier die bessere Wahl, denn du willst die Funktion ja nur einmal nach Ablauf der Zeit aufrufen, nicht periodisch immer wieder.  
  

> Und der Quelltext der Div's:  
  
... in dem du besser nur den Code gepostet hättest, den der Cient auch bekommt, und nicht noch den serverseitigen PHP-Code. Der macht's nämlich nur unübersichtlich.  
  

> `<div id="creep" style="position:absolute;top:<?php $top=rand(1,100); echo $top; ?>%;left:<?php $left=rand(1,100); echo $left; ?>%;"onmouseover="javascript:activateGame()"></div>`{:.language-html}  
  
Das Label javascript: im Eventhandler kannst du ersatzlos streichen; und im PHP-Code ist es vermutlich auch nicht nötig, die zufällig ermittelten top- und left-Werte zu speichern.  
  

> `<div id="killcreep" style="position:absolute;top:<?php $top=rand(1,100); echo $top; ?>%;left:<?php $left=rand(1,100); echo $left; ?>%;" onklick="javascript:getScore()">`{:.language-html}  
  
Dito. Und der Eventhandler heißt onclick, nicht onklick.  
  

> nur habe ich das Problem, dass das zweite div erst nach ablauf der Zeit sichtbar wird, und sich während dieser zeit auch nichts anklicken lässt.  
  
Das ist aus dem geposteten Code nicht ersichtlich.  
  
So long,  
 Martin  

-- 
Most experts agree: Any feature of a program that you can't turn off if you want to, is a bug.  
Except with Microsoft, where it is just the other way round.  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[Te Hao]

Hey, danke für die Antwort :)

Also: DAs ganze funktioniert so, dass beide Divs keinen Hintergrund besitzen - und dadurch unsichtbar sind.
durch
 ~~~javascript function activateGame(){
        document.getElementById('killcreep').style.backgroundImage="url(./images/creepergame.png)";
 }

  
wird dann dem Div ein Hintergrundbild zugewiesen und sichtbar gemacht.  
  

>  Ich denke, setTimeout() wäre hier die bessere Wahl, denn du willst die Funktion ja nur einmal nach Ablauf der Zeit aufrufen, nicht periodisch immer wieder.  
  
Ja, da wirst du wohl recht haben, das ändere ich :D  
  
`<div id="creep" style="position:absolute;top:80%;left:12%;"onmouseover="activateGame()"></div>`{:.language-html}  
  
Hier also nochmal der "angezeigte" Div, ohne Evendhandler. Danke für den Hinweis auf onclick, ich hätte mich später sonst sicher wieder totgesucht.  
  

> > nur habe ich das Problem, dass das zweite div erst nach ablauf der Zeit sichtbar wird, und sich während dieser zeit auch nichts anklicken lässt.  
>   
> Das ist aus dem geposteten Code nicht ersichtlich.  
>   
  
Ja, das ist ja auch gerade mein Problem :D vielleicht etwas genauer: Das Hintergrundbild wird erst nach ablauf der Zeit sichtbar, und davor lässt sich auf der Seite weder Scrollen noch irgendetwas anklicken. Ähnlich, als hätte sich der Browser aufgehängt  
  
Grüße Te Hao

[Der Martin]

Hallo,

Hey, danke für die Antwort :)

dafür sind wir doch hier. ;-)

Also: DAs ganze funktioniert so, dass beide Divs keinen Hintergrund besitzen - und dadurch unsichtbar sind.

Und wenn ich es richtig sehe, gibt es noch einen weiteren Punkt, der sie auch unsichtbar werden lässt:

<div id="creep" style="position:absolute;top:80%;left:12%;"onmouseover="activateGame()"></div>

Das Element hat keinen Inhalt und keine explizite Größe.
Es ist damit nur so hoch, wie sein Inhalt erfordert - nämlich 0.
Es ist außerdem durch die absolute Positionierung aus dem normalen Elementfluss herausgelöst und nimmt damit nicht mehr die ganze verfügbare Breite ein, sondern nur noch soviel, wie sein Inhalt erfordert - nämlich 0.

Das ist aus dem geposteten Code nicht ersichtlich.
Ja, das ist ja auch gerade mein Problem :D vielleicht etwas genauer: Das Hintergrundbild wird erst nach ablauf der Zeit sichtbar

Bekommt das div-Element nach Ablauf der Zeit etwa noch eine Größe zugewiesen?

Ciao,
 Martin

[Te Hao]

Hallo,

Das Element hat keinen Inhalt und keine explizite Größe.
Es ist damit nur so hoch, wie sein Inhalt erfordert - nämlich 0.
Es ist außerdem durch die absolute Positionierung aus dem normalen Elementfluss herausgelöst und nimmt damit nicht mehr die ganze verfügbare Breite ein, sondern nur noch soviel, wie sein Inhalt erfordert - nämlich 0.

Oh :D Entschuldige, daran habe ich selbst gedacht, ich hätte nur vielleicht den css-code mitposten sollen:

#main #creep {  
width:50px;  
height:50px;  
}

Durch das position:absolute; möchte ich verhindern dass mir der div durch seine zufällige Position den Rest der Seite verschiebt.
selbiges natürlich auch beim anderen Div: (Maße kommen von der Grafik)

#main #killcreep {  
width:113px;  
height:293px;  
}

Bekommt das div-Element nach Ablauf der Zeit etwa noch eine Größe zugewiesen?

-> Oben beantwortet ;D

Falls es dir hilft, das ganze Unikum findest du hier: http://tehao.kilu.de/minecraft.php

Ciao Te Hao

[Te Hao]

Hey :D

Oh dieses ewige Rätzeln über Computer... jetzt funktioniert es, ohne dass ich etwas verändert habe O.o

Danke für deine Hilfe nochmal, jetzt mach ich wieder alleine weiter :D

Grüße Te Hao

[ChrisB]

Hi,

Danke für den Hinweis auf onclick, ich hätte mich später sonst sicher wieder totgesucht.

Wer sein HTML nicht validiert, verdient das auch.

http://validator.w3.org/check?uri=http://tehao.kilu.de/minecraft.php
Beseitige zunächst die Fehler.

MfG ChrisB

[Te Hao]

Hi,

http://validator.w3.org/check?uri=http://tehao.kilu.de/minecraft.php
Beseitige zunächst die Fehler.

Zu dumm dass mindestens die Hälfte der Fehler Teil des automatisch hinzugefügten Werbekrams des Webspaceanbieters sind ;D
Okay... der Rest geht auf meine Kappe

Grüße Te Hao

[MudGuard]

Hi,

Zu dumm dass mindestens die Hälfte der Fehler Teil des automatisch hinzugefügten Werbekrams des Webspaceanbieters sind ;D
Okay... der Rest geht auf meine Kappe

Nein, nicht nur der Rest, sondern alle Fehler. Denn Du kannst einen anderen Anbieter wählen.

cu,
Andreas