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 相关文章推荐
基于jquery的超简单上下翻
Apr 20 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
vue3实现v-model原理详解
Oct 09 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 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
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
php下获取http状态的实现代码
2014/05/09 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
PDO::inTransaction讲解
2019/01/28 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Python延时操作实现方法示例
2018/08/14 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
python logging模块的使用总结
2019/07/09 Python
python之生产者消费者模型实现详解
2019/07/27 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
Keras设置以及获取权重的实现
2020/06/19 Python
python import 上级目录的导入
2020/11/03 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
美国在线购物频道:Shop LC
2019/04/21 全球购物
文秘自荐信
2014/06/28 职场文书
盗窃案辩护词
2015/05/21 职场文书
走近毛泽东观后感
2015/06/04 职场文书
工商局调档介绍信
2015/10/22 职场文书
学习经验交流会策划书
2015/11/02 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android