JS如何实现点星星消除小游戏

  介绍

这篇文章给大家分享的是有关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如何实现点星星消除小游戏

感谢各位的阅读!关于“JS如何实现点星星消除小游戏”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

JS如何实现点星星消除小游戏