JS實現點星星消除小遊戲
阿新 • • 發佈：2020-03-26
本文例項為大家分享了JS實現點星星消除遊戲的具體程式碼，供大家參考，具體內容如下
步驟及遊戲功能分析：
1.網頁上的隨機出現小星星；
2.點選小星星，小星星消失；
繫結一個onclick事件：
物件.事件 = 事件處理函式；
注意：要想刪除某個節點，必須找到它的父節點
注意：在繫結事件中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); //記錄遊戲時間
}
//建立星星的函式
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("遊戲已暫停，點選確定繼續遊戲。");
}
//記錄遊戲時間的函式
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>遊戲效果：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。