主页 / 网络编程 /

JS实现点星星消除小游戏

网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要为大家详细介绍了JS实现点星星消除小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JS实现点星星消除游戏的具体代码，供大家参考，具体内容如下

步骤及游戏功能分析

1.网页上的随机出现小星星；

2.点击小星星，小星星消失；

    绑定一个onclick事件
    对象.事件 = 事件处理函数；
    注意要想删除某个节点，必须找到它的父节点
    注意在绑定事件中this可以直接使用

3.添加功能开始游戏

4.添加功能暂停游戏

5.游戏进度条功能

<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">
 //window.onload = init;
 
 var countstar = 0;//控制星星个数变量
 var timerStar;//生成星星定时器
 var timerGameTime
 var t = 0;//记录时间变量
 //开始游戏的函数
 function startGame(){
 window.clearInterval(timerStar);
 window.clearInterval(timerGameTime);
 timerStar = window.setInterval("star()",500);
 timerGameTime = window.setInterval("time()",1000); //记录游戏时间
 }
 
 //创建星星的函数
 function star(){
 var obj = document.createElement("img");
 obj.src = "images/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. = Math.floor(Math.random()500+30)+"px";
 document.body.appendChild(obj);
 countstar++;
 var sp = document.getElementById("d3");
 sp.style.width = countstar10+"px";
 
 if (countstar > 10) {
  alert("游戏结束");
  window.clearInterval(timerStar);
  location.reload();
 }
 obj.onclick = removeStar;
 }
 
 //点击删除星星的函数
 function removeStar(){
 this.parentNode.removeChild(this);
 countstar --;
 var sp = document.getElementById("d3");
 sp.style.width = countstar10+"px";
 }
 
 //点击暂停游戏的函数
 function pauseGame(){
 alert("游戏已暂停，点击确定继续游戏。");
 }
 
 //记录游戏时间的函数
 function time(){
 t++
 var obj = document.getElementById("d1");
 obj.innerHTML= "游戏进行了"+t+"秒";
 }
</script>
 
<body>
  <input type="button" value="开始游戏" οnclick="startGame()" name="">
  <input type="button" value="暂停游戏" οnclick="pauseGame()" name="">
  <span id="d1">游戏进行了0秒</span>
  <span id="d2"><span id="d3"></span></span>
</body>

游戏效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：Webpack中SplitChunksPlugin 配置参数详解 下一篇：js实现小星星游戏

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by