JS實(shí)現(xiàn)點(diǎn)星星消除小游戲

更新時(shí)間：2020年03月24日 08:33:03 作者：zhanghe-V

這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)點(diǎn)星星消除小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JS實(shí)現(xiàn)點(diǎn)星星消除游戲的具體代碼，供大家參考，具體內(nèi)容如下

步驟及游戲功能分析：

1.網(wǎng)頁(yè)上的隨機(jī)出現(xiàn)小星星；

2.點(diǎn)擊小星星，小星星消失；

    綁定一個(gè)onclick事件：
    對(duì)象.事件 = 事件處理函數(shù)；
    注意：要想刪除某個(gè)節(jié)點(diǎn)，必須找到它的父節(jié)點(diǎn)
    注意：在綁定事件中this可以直接使用

3.添加功能開(kāi)始游戲

4.添加功能暫停游戲

5.游戲進(jìn)度條功能

<style type="text/css">
 #d2{
 width: 100px;
 height: 20px;
 border: 1px solid red;
 display: inline-block;
 }
 #d3{
 display: inline-block;
 background: yellow;
 height: 20px;
 }
</style>
<script type="text/javascript">
 //window.onload = init;
 
 var countstar = 0;//控制星星個(gè)數(shù)變量
 var timerStar;//生成星星定時(shí)器
 var timerGameTime
 var t = 0;//記錄時(shí)間變量
 //開(kāi)始游戲的函數(shù)
 function startGame(){
 window.clearInterval(timerStar);
 window.clearInterval(timerGameTime);
 timerStar = window.setInterval("star()",500);
 timerGameTime = window.setInterval("time()",1000); //記錄游戲時(shí)間
 }
 
 //創(chuàng)建星星的函數(shù)
 function star(){
 var obj = document.createElement("img");
 obj.src = "images/star.png";
 obj.width = Math.floor(Math.random()*60+20);
 obj.style.position = "absolute";
 obj.style.left = Math.floor(Math.random()*1700+100)+"px";
 obj.style.top = Math.floor(Math.random()*500+30)+"px";
 document.body.appendChild(obj);
 countstar++;
 var sp = document.getElementById("d3");
 sp.style.width = countstar*10+"px";
 
 if (countstar > 10) {
  alert("游戲結(jié)束");
  window.clearInterval(timerStar);
  location.reload();
 }
 obj.onclick = removeStar;
 }
 
 //點(diǎn)擊刪除星星的函數(shù)
 function removeStar(){
 this.parentNode.removeChild(this);
 countstar --;
 var sp = document.getElementById("d3");
 sp.style.width = countstar*10+"px";
 }
 
 //點(diǎn)擊暫停游戲的函數(shù)
 function pauseGame(){
 alert("游戲已暫停，點(diǎn)擊確定繼續(xù)游戲。");
 }
 
 //記錄游戲時(shí)間的函數(shù)
 function time(){
 t++
 var obj = document.getElementById("d1");
 obj.innerHTML= "游戲進(jìn)行了"+t+"秒";
 }
</script>
 
<body>
  <input type="button" value="開(kāi)始游戲" οnclick="startGame()" name="">
  <input type="button" value="暫停游戲" οnclick="pauseGame()" name="">
  <span id="d1">游戲進(jìn)行了0秒</span>
  <span id="d2"><span id="d3"></span></span>
</body>

游戲效果：