Question

我有一个简单的游戏，当用户点击图像时，图像随机移动并且得分会增加。

第一张图片在游戏开始前显示，点击时会调用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>

Answer 1

您的代码存在一些问题：

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> ...更不用说开始时没有声明的变量'得分'了！

继续努力，你只会通过练习变得更好。

Answer 2

Tyr this

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

}

简单的javascript html图像游戏

2 个答案: