介绍 & 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如何实现点星星消除小游戏的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
具体内容如下
<强>步骤及游戏功能分析:
1。网页上的随机出现小星星;
2。点击小星星,小星星消失;
,,,,绑定一个onclick事件:
,,,,对象。事件=事件处理函数;
,,,,注意:要想删除某个节点,必须找到它的父节点
,,,,注意:在绑定事件中这可以直接使用
3。添加功能开始游戏
4。添加功能暂停游戏
5。游戏进度条功能
<强>游戏效果:
感谢各位的阅读!关于“JS如何实现点星星消除小游戏”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
