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 事件的一些重要说明
Oct 25 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
Feb 28 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
浅析TypeScript 命名空间
Mar 19 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 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
德生1994机评
2021/03/02 无线电
example1.php
2006/10/09 PHP
PHP的分页功能
2007/03/21 PHP
ini_set的用法介绍
2014/01/07 PHP
php中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
小学红领巾中秋节广播稿
2014/01/13 职场文书
纺织工程专业个人求职信范文
2014/01/27 职场文书
大学旷课检讨书
2014/01/28 职场文书
物理专业本科生自荐信
2014/01/30 职场文书
大一新生学期自我评价
2014/04/09 职场文书
环卫工作个人总结
2015/03/04 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
PHP遍历数组的6种方式总结
2021/11/17 PHP
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js