js实现小星星游戏
更新时间：2020年03月23日 17:12:18 作者：0菜鸡小白0
这篇文章主要为大家详细介绍了js实现小星星游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现小星星游戏的具体代码，供大家参考，具体内容如下
功能简介
如图：实现一个点击游戏
准备
准备一个星星的图片（这里我重命名为xxx.png）
开搞
新建一个html文件，并将其与准备好的图片放在同一目录下（东西多了不建议这样搞，但这个就俩）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小星星游戏</title>
</head>
<style>
body{
background-color: black;
}
meter{
width:100%;
}
#title{
width:100%;
position: relative;
text-align: center;
color: #ffffff;
}
#score{
position: absolute;
top:0;
left:90%;
width:10%;
color: #ffffff;
}
#jindu{
padding:0 33%;
}
span{
display: block;
text-align: center;
}
span > button{
width:20%;
}
</style>
<body>
<div><h1 id="title">小星星游戏</h1></div>
<div><h1 id="score">得分:</h1></div>
<div id="jindu">
<span>
<meter id="meter" min="0" max="100"></meter>
</span>
<span>
<button onclick="start()">开始</button>
<button onclick="restart()">重玩</button>
</span>
</div>
<script>
var c = 0;
function start(){
//console.log("调用");
//周期的调用函数，0.2s
t1 = window.setInterval(show,200)
}
var meter = document.getElementById("meter");
meter.value=0;
var j =0;
function show(){
meter.value+=5;
// console.log(meter.value)
if(j<=meter.value){
j=meter.value;
}else{
window.clearInterval(t1)
}
if(j==100){
j=101;
alert("游戏结束,共消除了"+c+"个小星星");
window.clearInterval(t1)
}
var img = document.createElement('img');
img.src='xxx.png';
img.style.position="absolute";
//math.floor向下取整
var w = Math.floor(Math.random()*(100-20+1)+20);
var l = Math.floor(Math.random()*(1500-20+1)+20);
var t = Math.floor(Math.random()*(600-150+1)+150);
img.width = w;
img.style.top = t+"px";
img.style.left = l+"px";
document.body.appendChild(img);
img.onclick =rem;
}
function rem() {
//通过父元素删除子节点
this.parentNode.removeChild(this);
var score= document.getElementById("score")
if(meter.value!=100){
meter.value-=8;
j-=8;
c++;
score.innerText="得分:"+c;
}
}
function restart(){
//重新载入当前文档
location.reload();
}
</script>
</body>
</html>
结束
可以将css部分和js部分写成单独的文件,但是需要引入
<link href = "css文件路径" rel = "stylesheet"> <script src="js文件路径" type="text/javascript"></script>
更多关于Js游戏的精彩文章，请查看专题： 《JavaScript经典游戏 玩不停》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在上传文件时，常常要对文件的类型即对文件的后缀名进行判断，用javascript可以很容易的做到这一点。用Javascript解析一个带绝对路径的文件名并得到后缀名的方法有很多种，这里列出一种，以供参考。2013-07-07
基于JavaScript实现HarmonyOS备忘录服务卡片
这篇文章主要介绍了基于JavaScript实现HarmonyOS备忘录服务卡片，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-05-05
这篇文章主要介绍了JavaScript动态添加style节点的方法,涉及javascript节点操作的相关技巧,需要的朋友可以参考下2015-06-06
这篇文章主要为大家详细介绍了JavaScript+CSS实现模态框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
今天小编就为大家分享一篇浅谈layui分页控件field参数接收对象的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
再读《JavaScript权威指南》（犀牛书）9.7确定对象类型 之摘录2012-03-03
这篇文章主要为大家详细介绍了js带点自动图片轮播幻灯片特效，图片轮播效果特别适合做产品展示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-09-09
Javascript操纵Cookie实现购物车程序...2006-11-11
光标定位等TextRange的操作的范例代码...2006-07-07
使用<web-view>标签能在小程序中打开外部网页,但是要打开的网页的域名必须跟小程序的业务域名(业务域名可以在小程序的后台管理界面添加)一致,否则在真机上是打不开的,下面这篇文章主要给大家介绍了关于微信小程序嵌入H5页面(web-view)的相关资料,需要的朋友可以参考下2022-09-09
最新评论