JS实现点星星消除小游戏
更新时间：2020年03月24日 08:33:03 作者：zhanghe-V
这篇文章主要为大家详细介绍了JS实现点星星消除小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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队列的定义、使用,基数排序实现方法等相关操作技巧,需要的朋友可以参考下2019-03-03
这篇文章主要为大家详细介绍了JavaScript实现点击自制菜单效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-02-02
通过本篇文章给大家介绍Sublime Text3使用技巧的相关知识，对sublime text3技巧相关知识感兴趣的朋友一起学习吧2015-12-12
这篇文章主要介绍了产制造追溯系统-通过微信小程序实现移动端报表平台 ,本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-06-06
这篇文章主要为大家详细介绍了javascript实现瀑布流动态加载图片原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
JavaScript ECMA-262-3 深入解析.第三章.this
在这篇文章里，我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字2011-09-09
这篇文章主要介绍了JavaScript获取网页中第一个链接ID的方法,涉及javascript中document.links方法的使用,需要的朋友可以参考下2015-04-04
JavaScript是一种解释型语言，所以能无法达到和C/Java之类的水平，限制了它能在客户端所做的事情，为了能改进他的性能，我想基于我以前给JavaScript做过的很多测试来谈谈自己的经验，希望能帮助大家改进自己的JavaScript脚本性能。2007-02-02
今天小编就为大家分享一篇layer.confirm()右边按钮实现href的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了js DOM的事件常见操作,结合实例形式详细分析了JavaScript DOM事件概念、原理及DOM操作常见实现技巧与使用注意事项,需要的朋友可以参考下2019-12-12
最新评论