js實現(xiàn)小星星游戲
更新時間：2020年03月23日 17:12:18 作者：0菜雞小白0
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)小星星游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)小星星游戲的具體代碼，供大家參考，具體內(nèi)容如下
功能簡介
如圖：實現(xiàn)一個點擊游戲
準(zhǔn)備
準(zhǔn)備一個星星的圖片（這里我重命名為xxx.png）
開搞
新建一個html文件，并將其與準(zhǔn)備好的圖片放在同一目錄下（東西多了不建議這樣搞，但這個就倆）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小星星游戲</title>
</head>
<style>
body{
background-color: black;
}
meter{
width:100%;
}
#title{
width:100%;
position: relative;
text-align: center;
color: #ffffff;
}
#score{
position: absolute;
top:0;
left:90%;
width:10%;
color: #ffffff;
}
#jindu{
padding:0 33%;
}
span{
display: block;
text-align: center;
}
span > button{
width:20%;
}
</style>
<body>
<div><h1 id="title">小星星游戲</h1></div>
<div><h1 id="score">得分:</h1></div>
<div id="jindu">
<span>
<meter id="meter" min="0" max="100"></meter>
</span>
<span>
<button onclick="start()">開始</button>
<button onclick="restart()">重玩</button>
</span>
</div>
<script>
var c = 0;
function start(){
//console.log("調(diào)用");
//周期的調(diào)用函數(shù)，0.2s
t1 = window.setInterval(show,200)
}
var meter = document.getElementById("meter");
meter.value=0;
var j =0;
function show(){
meter.value+=5;
// console.log(meter.value)
if(j<=meter.value){
j=meter.value;
}else{
window.clearInterval(t1)
}
if(j==100){
j=101;
alert("游戲結(jié)束,共消除了"+c+"個小星星");
window.clearInterval(t1)
}
var img = document.createElement('img');
img.src='xxx.png';
img.style.position="absolute";
//math.floor向下取整
var w = Math.floor(Math.random()*(100-20+1)+20);
var l = Math.floor(Math.random()*(1500-20+1)+20);
var t = Math.floor(Math.random()*(600-150+1)+150);
img.width = w;
img.style.top = t+"px";
img.style.left = l+"px";
document.body.appendChild(img);
img.onclick =rem;
}
function rem() {
//通過父元素刪除子節(jié)點
this.parentNode.removeChild(this);
var score= document.getElementById("score")
if(meter.value!=100){
meter.value-=8;
j-=8;
c++;
score.innerText="得分:"+c;
}
}
function restart(){
//重新載入當(dāng)前文檔
location.reload();
}
</script>
</body>
</html>
結(jié)束
可以將css部分和js部分寫成單獨(dú)的文件,但是需要引入
<link href = "css文件路徑" rel = "stylesheet"> <script src="js文件路徑" type="text/javascript"></script>
更多關(guān)于Js游戲的精彩文章，請查看專題： 《JavaScript經(jīng)典游戲 玩不?！?/a>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript 得到文件后綴名的思路及實現(xiàn)
在上傳文件時，常常要對文件的類型即對文件的后綴名進(jìn)行判斷，用javascript可以很容易的做到這一點。用Javascript解析一個帶絕對路徑的文件名并得到后綴名的方法有很多種，這里列出一種，以供參考。2013-07-07
基于JavaScript實現(xiàn)HarmonyOS備忘錄服務(wù)卡片
這篇文章主要介紹了基于JavaScript實現(xiàn)HarmonyOS備忘錄服務(wù)卡片，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-05-05
JavaScript動態(tài)添加style節(jié)點的方法
這篇文章主要介紹了JavaScript動態(tài)添加style節(jié)點的方法,涉及javascript節(jié)點操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06
JavaScript+CSS實現(xiàn)模態(tài)框效果
這篇文章主要為大家詳細(xì)介紹了JavaScript+CSS實現(xiàn)模態(tài)框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
淺談layui分頁控件field參數(shù)接收對象的問題
今天小編就為大家分享一篇淺談layui分頁控件field參數(shù)接收對象的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
再讀《JavaScript權(quán)威指南》（犀牛書）9.7確定對象類型 之摘錄2012-03-03
這篇文章主要為大家詳細(xì)介紹了js帶點自動圖片輪播幻燈片特效，圖片輪播效果特別適合做產(chǎn)品展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-09-09
Javascript操縱Cookie實現(xiàn)購物車程序
Javascript操縱Cookie實現(xiàn)購物車程序...2006-11-11
光標(biāo)定位等TextRange的操作的范例代碼...2006-07-07
使用<web-view>標(biāo)簽?zāi)茉谛〕绦蛑写蜷_外部網(wǎng)頁,但是要打開的網(wǎng)頁的域名必須跟小程序的業(yè)務(wù)域名(業(yè)務(wù)域名可以在小程序的后臺管理界面添加)一致,否則在真機(jī)上是打不開的,下面這篇文章主要給大家介紹了關(guān)于微信小程序嵌入H5頁面(web-view)的相關(guān)資料,需要的朋友可以參考下2022-09-09