簡單的JavaScript的HTML圖像遊戲

我有一個簡單的遊戲，圖像隨機移動，當用戶點擊它的分數增加。簡單的JavaScript的HTML圖像遊戲

第一圖像顯示遊戲開始之前，點擊它時調用在JavaScript的play（）函數，它會隱藏圖像，並顯示將被用於遊戲的圖像。

這就是我的代碼被卡住，它不調用函數播放（）。我是JavaScript和HTML新手。任何幫助將是偉大的！

這裏是我的代碼

<html> 
    <head> 
     <title>Image click Game!</title> 
     <script> 
     global var score = 0; 
     global var left=400; 
     global var top = 100; 

     function play() { 

      var game = document.getElementById('game'); 
      var firstDiv = document.getElementById('firstDiv'); 
      var height = window.innerHeight; 
      var width = window.innerWidth; 

      firstDiv.style = 'display : none'; 
      game.style='display : block'; 

      setInterval("move()", 1000); 
     } 

     function move() { 
      var randomNumberX = Math.floor(Math.random()*11)-5; 
      var randomNumberY = Math.floor(Math.random()*11)-5; 

      left = left + randomNumberX; 
      top = top+randomNumberY; 

      var im = document.getElementById('image'); 
      im.style.left = left; 
      im.style.top = top; 
     } 

     </script> 
    </head> 
<body> 

    <div id ="firstDiv" style="display : block"> 
     <img src="pics/playgame.gif" width="108" height="106" onClick = "play()"/></a> 
    </div> 

     <div id="game" style="display : none"> 
      <p>"Score: " + score</p> 
      <img id="image" src="pics/gameImage.gif" onClick = "score++" style="position:absolute; left: 400; top: 100;"/></a> 
     </div> 

    </body> 
</html>

來源

2013-07-01 tzharg

首先，安裝Firebug的，看看在JavaScript中所示的任何錯誤了。這是如何ü調試代碼 – Andrew

沒有你嘗試只是代碼變種遊戲=的document.getElementById（「遊戲」）前放置一個警告; ？你是否得到這個警報？也如安德魯所說，請檢查瀏覽器的控制檯，看看是否有任何錯誤 – Varada

謝謝。我有那部分工作。 – tzharg

有事情你的代碼錯誤了一把：

1）您<img>標籤和一個流浪結束，不需要</a>標籤。

2）在你的<img>代碼，則應改爲onClick = "play();"

3）我不相信的JavaScript支持這種方式，global關鍵字。

4）要更改CSS樣式，試試這個：

firstDiv.style.display = 'none'; 
game.style.display = 'block';

5）以這種方式無法顯示的JavaScript變量：<p>"Score: " + score</p> ...何況也沒有聲明的變量「分數」開始與！

保持在它的工作，你只能得到與實踐更好。

來源

2013-07-01 05:13:47 JLewkovich

謝謝JL。做出了改變。雖然有一個問題。 – tzharg

如何在html中訪問javascript變量以顯示分數？ – tzharg

酪氨酸這

<script> 

var score = 0; 
var left=400; 
var top = 100; 

function play() { 
    var game = document.getElementById('game'); 
    var firstDiv = document.getElementById('firstDiv'); 
    var height = window.innerHeight; 
    var width = window.innerWidth; 
    firstDiv.style.display='none'; 
    game.style.display='block'; 
    setInterval("move()", 1000);

}

function move() { 
    var randomNumberX=Math.floor(Math.random()*11)-5; 
    var randomNumberY=Math.floor(Math.random()*11)-5; 
    left= left+randomNumberX; 
    top = top+randomNumberY; 
    var im= document.getElementById('image'); 
    im.style.left=left; 
    im.style.top=top;

}

來源

2013-07-01 04:52:13

簡單的JavaScript的HTML圖像遊戲

回答

相關問題