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 相关文章推荐
一种JavaScript的设计模式
Nov 22 Javascript
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
Javascript玩转继承(一)
May 08 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
element-ui表格合并span-method的实现方法
May 21 Javascript
通过js实现压缩图片上传功能
Feb 25 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之第七天
2006/10/09 PHP
封装一个PDO数据库操作类代码
2009/09/09 PHP
php上的memcache和memcached两个pecl库
2010/03/29 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
Jquery 学习笔记(一)
2009/10/13 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
React中的render何时执行过程
2018/04/13 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
Python中with及contextlib的用法详解
2017/06/08 Python
python实现多进程代码示例
2018/10/31 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
详解numpy的argmax的具体使用
2019/05/27 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
什么是测试驱动开发(TDD)
2012/02/15 面试题
商务英语专业求职信范文
2014/01/28 职场文书
店面销售职位的职责
2014/03/09 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL