介绍
这篇文章给大家分享的是有关JS如何实现点星星消除小游戏的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
具体内容如下
<强>步骤及游戏功能分析:强>
1。网页上的随机出现小星星;
2。点击小星星,小星星消失;
,,,,绑定一个onclick事件:
,,,,对象。事件=事件处理函数;
,,,,注意:要想删除某个节点,必须找到它的父节点
,,,,注意:在绑定事件中这可以直接使用
3。添加功能开始游戏
4。添加功能暂停游戏
5。游戏进度条功能
& lt; style 类型=拔谋?css"比; ,# d2 { ,宽度:100 px; ,高度:20 px; ,边界:1 px solid 红色; ,显示:inline-block; ,} ,# d3 { ,显示:inline-block; ,背景:黄色; ,高度:20 px; ,} & lt;/style> & lt; script 类型=拔谋?javascript"比; ,//window.onload =,初始化; , ,var countstar =, 0;//控制星星个数变量 ,var timerStar;//生成星星定时器 var timerGameTime ,var t =, 0;//记录时间变量 ,//开始游戏的函数 ,function startGame () { ,window.clearInterval (timerStar); ,window.clearInterval (timerGameTime);=,,timerStar  setinterval(“星()“,500);=,,timerGameTime  setinterval(“时间()“,1000),,//记录游戏时间 ,} , ,//创建星星的函数 ,function 明星(){ ,var obj =, document.createElement (“img");=,obj.src “图像/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 =, . getelementbyid (“d3");=,,sp.style.width  countstar * 10 +“px"; , ,if (countstar 祝辞,10),{ 警报才能(“游戏结束“); window.clearInterval才能(timerStar); location.reload才能(); ,}=,,obj.onclick  removeStar; ,} , ,//点击删除星星的函数 ,function removeStar () { ,this.parentNode.removeChild(这个); ,countstar -; ,var sp =, . getelementbyid (“d3");=,,sp.style.width  countstar * 10 +“px"; ,} , ,//点击暂停游戏的函数 ,function pauseGame () { ,警报(“游戏已暂停,点击确定继续游戏!”); ,} , ,//记录游戏时间的函数 ,function 时间(){ t + + ,var obj =, . getelementbyid (“d1"); ,obj.innerHTML=坝蜗方辛恕? t +“秒”; ,} & lt;/script> , & lt; body> & lt;才能input 类型=癰utton",价值=https://www.yisu.com/zixun/笨加蜗贰宝蟦click=" startGame () " name=" "> 游戏进行了0秒 <跨度id=" d3 "> 身体>
<强>游戏效果:强>
感谢各位的阅读!关于“JS如何实现点星星消除小游戏”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!