消星星小游戏

最新推荐文章于 2024-09-12 23:12:05 发布

chongfu8271

最新推荐文章于 2024-09-12 23:12:05 发布

阅读量205

点赞数

文章标签：游戏 javascript ViewUI

原文链接：https://my.oschina.net/u/3772683/blog/1613225

版权

实现界面上随机出现星星，点击就消失，街面上星星总数不超过20个就可以一直玩，有进行游戏的总时间

同时有进度条来可以感受到离结束的快慢。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>star</title>
   <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">
   // 点击星星让星消失星星超过20个游戏就结束，有时间，有进度条
   // obj.οnclick=abcd（对象.事件=事件函数）
       // window.οnlοad=init;
       var dsq;
       var t=0
       var timedsq;

       function start(){
           window.clearInterval(timedsq);
           window.clearInterval(dsq);
           dsq=window.setInterval("star()",400)
           timedsq=window.setInterval("time()",1000);

       }
       function time(){
           t++;
           var obj=document.getElementById("d1");
           obj.innerHTML="youxi jin xing l "+t+"s";
       }
       function stop(){
// window.clearInterval(dsq);
alert("暂停游戏");

       }
       var count=0;
       function star() {
           var obj=document.createElement("img")
           obj.src="star.png";
           var w=Math.floor(Math.random()*80+20)
           obj.width=w;
           var x=Math.floor(Math.random()*1166+1000);
           var y=Math.floor(Math.random()*500+100);
           obj.style.position="absolute";
           obj.style.top=x+"px";
           obj.style.left=y+"px";//随机显示星星图片的宽度和出现在界面上的位置
           obj.οnclick=removestar;
//添加节点
           document.body.appendChild(obj);
       count++;
       var spanwidth=document.getElementById("d3");
       spanwidth.style.width=count*5+"px";
       //解决游戏
       if(count>20){
           alert("游戏结束");
           window.clearInterval(dsq);
           location.reload();//实现超过20个游戏就结束游戏同时重启游戏界面
       }

       }//当前节点的父节点删除当前的子节点（只有父节点可以删除节点：使用this不用传递参数可以直接使用表示当前）用this来实现点击消失的星星是当前的星星
       function removestar(){
           this.parentNode.removeChild(this);
           count--;//解决不减的bug
           var spanwidth=document.getElementById("d3");
       spanwidth.style.width=count*5+"px";

       }
   </script>
</head>
<body>
   <input type="button" value="点击游戏" οnclick="start()">
   <input type="button" value="stopgame" οnclick="stop()">
<span id="d1">youxi jin xing l <strong>0</strong>s</span>
<span id="d2"><span id="d3"></span></span>
</body>
</html>

转载于:https://my.oschina.net/u/3772683/blog/1613225