简单的 javascript html 图像游戏答案

【问题标题】：Simple javascript html image game简单的 javascript html 图像游戏
【发布时间】：2013-06-28 03:53:57
【问题描述】：

我有一个简单的游戏，其中图像随机移动，当用户点击它时分数会增加。

第一张图片在游戏开始前显示，点击后会调用 javascript 中的 play() 函数，该函数会隐藏该图片并显示将用于游戏的图片。

这就是我的代码卡住的地方，它没有调用函数 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>

【问题讨论】：

首先，安装firebug，看看它是否在javascript中显示任何错误。这就是你调试代码的方式
您是否尝试在代码之前放置警报 var game = document.getElementById('game'); ?你收到那个警报了吗？也如安德鲁所说，请检查浏览器的控制台，看看是否有任何错误
谢谢。我得到了那个部分的工作。
我使用 Chrome 作为我的浏览器，所以你认为 Chrome 开发者工具是否足以验证代码..
警报有什么好处？

标签： javascript html

【解决方案1】：

提这个

<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;

}

【讨论】：

【解决方案2】：

您的代码有一些问题：

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>...更不用说没有声明的变量'score'开头！

继续努力，只有通过练习才能变得更好。

【讨论】：

谢谢 JL。进行了更改。不过有一个问题。
如何访问html中的javascript变量来显示分数？