js实现小星星游戏

网络编程 2024/12/24 佚名

3 2 1

圆月山庄资源网 Design By www.vgjia.com

本文实例为大家分享了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部分写成单独的文件,但是需要引入

更多关于Js游戏的精彩文章，请查看专题：《JavaScript经典游戏玩不停》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js,小星星,游戏

标签：

js,小星星,游戏

圆月山庄资源网 Design By www.vgjia.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

圆月山庄资源网 Design By www.vgjia.com

评论“js实现小星星游戏”

暂无评论...

www.vgjia.com 圆月山庄资源网

139,976互联网资源

144,792高清电影

21,817无损音乐

631,128技术资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年12月24日

js实现小星星游戏

js,小星星,游戏

JS实现点星星消除小游戏

JS Array.from()将伪数组转换成数组的方法示例

评论“js实现小星星游戏”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接