這篇文章將為大家詳細講解有關javascript如何實現點擊星星小游戲，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
具體內容如下
<head>
<meta charset="UTF-8">
<title>Document</title>
<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">
<!--
var dingshiqi; //定時器
var count=0; //記錄星星的個數
var n=0; //記錄游戲時間的變量。
var sj; //時間定時器（解決一直按開始游戲bug）
function StarGame(){ //開始游戲
window.clearInterval(sj); //清除時間定時器
window.clearInterval(dingshiqi);//清楚定時器
dingshiqi=window.setInterval("star()",400);
sj=window.setInterval("shijian()",1000);
}
//創建星星
function star(){
var obj=document.createElement("img");
//給星星添加src屬性
obj.src="image.png"
//隨機星星大小
var w=Math.floor(Math.random()*80+20);
obj.width=w;
obj.height=w;
//隨機位置
var x=Math.floor(Math.random()*1166+100);
var y=Math.floor(Math.random()*500+100);
obj.style.position="absolute";
obj.style.top=y+"px";
obj.style.left=x+"px";
//放到body中
document.body.appendChild(obj);
//添加onclick點擊事件（綁定的onclick 不需要加";"）
obj.οnclick=removeStar;
//控制大于20個星星游戲結束
count++;
var sp=document.getElementById("d3");
sp.style.width=count*5+"px";
if(count>20){
alert("大于20個星星游戲結束");
window.clearInterval(dingshiqi);
location.reload(); //重新加載
}
//放到body中
document.body.appendChild(obj);
}
//點擊刪除星星
function removeStar(){
this.parentNode.removeChild(this);
count--; //點擊星星刪除，都要count-1.
var sp=document.getElementById("d3");
sp.style.width=count*5+"px";
}
//點擊暫停游戲。
function zanting(){
alert("暫停游戲");
}
//記錄游戲時間的函數
function shijian(){
n++;
var obj=document.getElementById("d1");
obj.innerHTML="游戲進行了"+n+"秒"
}
//-->
</script>
</head>
<body>
<input type="button" value="開始游戲" οnclick="StarGame()">
<input type="button" value="暫停游戲" οnclick="zanting()">
<span id="d1">游戲進行了0秒</span>
<span id="d2"><span id="d3"></span></span>
</body>
</html>關于“javascript如何實現點擊星星小游戲”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
