如何用JavaScript制作简单的点击游戏?

时间:2018-06-23 18:35:49

标签: javascript html css

我正在尝试编写我的第一个JavaScript游戏,这将是您单击的一个障碍,每次单击它都会获得1分,直到用完为止。到目前为止,这是我所拥有的...但是当onclick发生时,点数不会增加。

var click=0; 

function hi(){
    click+=1; 
}
document.write(click); 
<!DOCTYPE html>
<html>
    <head>
	    <title>Page Title</title>
	</head>
	<body>	
        <button onclick="hi()" id="demo"> </button>
	</body>
</html>

3 个答案:

答案 0 :(得分:1)

这可能有助于引导您迈向最终目标。这是一个在单击按钮时递增变量并将其显示在页面和警报中的示例。还有一个重置按钮。您应该能够使用此示例,使用相同的变量操作原理来添加所需的任何其他功能。

var click=0; 
var c = document.getElementById("click");
function hi(){
    click+=1;
    alert("click = " + click);
    c.innerHTML = click;
}
function reset(){
    click=0;
    alert("click = " + click);
    c.innerHTML = click;
}
<button onclick="hi()" id="demo">add</button>
<button onclick="reset()">reset</button>
<p id="click">0</p>

答案 1 :(得分:0)

<!DOCTYPE html>
    <html>
    <head>
	    <title>Page Title</title>
     <script>
      var click=0; 
var outOfTime = false;
function hi(){
if(!outOfTime){
click+=1; 
document.getElementById("score").innerHTML = click;
}
}
var time = 60; //time in seconds
var timer = setInterval(function(){
 time--;
 document.getElementById("timer").innerHTML = time + "s";
 if(time==0){
   clearInterval(timer);
   document.getElementById("timer").innerHTML = "Time's up!";
   outOfTime = true;
 }
}, 1000);
      </script>
	</head>
	<body>	Time remaining:
      <span id = "timer"> 60s</span><br/>
     Score:
       <span id="score">0</span><br/>
        <button onclick="hi()" id="demo"> </button>
	</body>
    </html>

答案 2 :(得分:0)

更改点击值时不会显示点击。

var click=0; 
function hi(){
   click+=1;         
   alert(click) // document.write(click); 
}

这会很好