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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
浅谈React Event实现原理
Sep 20 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
js轮播图之旋转木马效果
Oct 13 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
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
jQuery的deferred对象使用详解
2011/08/20 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
python清除指定目录内所有文件中script的方法
2015/06/30 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
python3实现简单飞机大战
2020/11/29 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
Nebula美国官网:便携式投影仪
2019/03/15 全球购物
酒店服务与管理毕业生求职信
2013/11/02 职场文书
管理科学大学生求职信
2013/11/13 职场文书
淘宝客服自我总结鉴定
2014/01/25 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
银行求职自荐信
2014/06/30 职场文书
小学优秀教师材料
2014/12/15 职场文书
总经理岗位职责范本
2015/04/01 职场文书
python中super()函数的理解与基本使用
2021/08/30 Python
MySQL存储过程及语法详解
2022/08/05 MySQL