JS实现点星星消除小游戏


Posted in Javascript onMarch 24, 2020

本文实例为大家分享了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.top = Math.floor(Math.random()*500+30)+"px";
 document.body.appendChild(obj);
 countstar++;
 var sp = document.getElementById("d3");
 sp.style.width = countstar*10+"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 = countstar*10+"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>

游戏效果:

JS实现点星星消除小游戏

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
JavaScript的eval JSON object问题
Nov 15 Javascript
为jQuery增加join方法的实现代码
Nov 28 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
Sep 16 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
vue中v-model动态生成的实例详解
Oct 27 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
js实现小星星游戏
Mar 23 #Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 #Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 #Javascript
小程序使用分包的示例代码
Mar 23 #Javascript
用JS实现选项卡
Mar 23 #Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 #Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 #Javascript
You might like
php实现无限级分类
2014/12/24 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
Thinkphp 框架配置操作之动态配置、扩展配置及批量配置实例分析
2020/05/15 PHP
js DOM的学习笔记
2011/12/22 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
Java分治归并排序算法实例详解
2017/12/12 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
django fernet fields字段加密实践详解
2019/08/12 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
python根据文本生成词云图代码实例
2019/11/15 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
软件测试企业面试试卷
2016/07/13 面试题
大学生求职简历的自我评价
2013/10/21 职场文书
聚美优品广告词改编
2014/03/14 职场文书
留学推荐信范文
2014/05/10 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL