欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

JS如何實現點星星消除小游戲

這篇文章給大家分享的是有關JS如何實現點星星消除小游戲的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司專注于玄武網站建設服務及定制，我們擁有豐富的企業(yè)做網站經驗。 熱誠為您提供玄武營銷型網站建設，玄武網站制作、玄武網頁設計、玄武網站官網定制、微信平臺小程序開發(fā)服務，打造玄武網絡公司原創(chuàng)品牌,更為您提供玄武網站排名全網營銷落地服務。

具體內容如下

步驟及游戲功能分析：

1.網頁上的隨機出現小星星；

2.點擊小星星，小星星消失；

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

3.添加功能開始游戲

4.添加功能暫停游戲

5.游戲進度條功能

<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;//控制星星個數變量
 var timerStar;//生成星星定時器
 var timerGameTime
 var t = 0;//記錄時間變量
 //開始游戲的函數
 function startGame(){
 window.clearInterval(timerStar);
 window.clearInterval(timerGameTime);
 timerStar = window.setInterval("star()",500);
 timerGameTime = window.setInterval("time()",1000); //記錄游戲時間
 }
 
 //創(chuàng)建星星的函數
 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("游戲結束");
  window.clearInterval(timerStar);
  location.reload();
 }
 obj.onclick = removeStar;
 }
 
 //點擊刪除星星的函數
 function removeStar(){
 this.parentNode.removeChild(this);
 countstar --;
 var sp = document.getElementById("d3");
 sp.style.width = countstar*10+"px";
 }
 
 //點擊暫停游戲的函數
 function pauseGame(){
 alert("游戲已暫停，點擊確定繼續(xù)游戲。");
 }
 
 //記錄游戲時間的函數
 function time(){
 t++
 var obj = document.getElementById("d1");
 obj.innerHTML= "游戲進行了"+t+"秒";
 }
</script>
 
<body>
  <input type="button" value="開始游戲" οnclick="startGame()" name="">
  <input type="button" value="暫停游戲" οnclick="pauseGame()" name="">
  <span id="d1">游戲進行了0秒</span>
  <span id="d2"><span id="d3"></span></span>
</body>

游戲效果：

JS如何實現點星星消除小游戲

感謝各位的閱讀！關于“JS如何實現點星星消除小游戲”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

當前題目：JS如何實現點星星消除小游戲
文章源于：http://www.chinadenli.net/article12/gghggc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、App開發(fā)、網站設計、電子商務、網站改版、虛擬主機

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

外貿網站制作