接棍游戏

最新推荐文章于 2024-09-17 13:42:29 发布

m0_48845795

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量202

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/m0_48845795/article/details/117033390

版权

接棍游戏（stick game)

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>接棍游戏</title>
    </head>
    <style>
        *{margin: 0;padding: 0;}
         .container{width: 1100px;margin:10px auto;}
         .head{width: 1000px;position: relative;}
         .lineH{width: 1000px;position: relative;height: 10px;background-color: khaki}
         .lineV{width: 25px;height: 50px;border-radius:5px;position: absolute;background-color: #d21e96;top:10px;}
         /* absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置             通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 */
         /* border-radius 属性 给div元素添加圆角的边框：注意: 每个半径的四个值的顺序是：左上角，右上			  角，右下角，左下角。如果省略左下角，
            右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。 */
        .lineV1{left:50px;}
        .lineV2{left:150px;}
        .lineV3{left:250px;}
        .lineV4{left:350px;}
        .lineV5{left:450px;}
        .lineV6{left:550px;}
        .lineV7{left:650px;}
        .lineV8{left:750px;}
        .lineV9{left:850px;}
        .lineV10{left:950px;}
    
    </style>
    <body>
        <div class="container">
            <div class="head">
                <div class="lineH"></div>
                <div class="lineV lineV1"></div>
                <div class="lineV lineV2"></div>
                <div class="lineV lineV3"></div>
                <div class="lineV lineV4"></div>
                <div class="lineV lineV5"></div>
                <div class="lineV lineV6"></div>
                <div class="lineV lineV7"></div>
                <div class="lineV lineV8"></div>
                <div class="lineV lineV9"></div>
                <div class="lineV lineV10"></div>
            </div>
        </div>
        
    </body>
    <script>
        var stickGame=document.getElementsByClassName('lineV');
        var arr=[0,1,2,3,4,5,6,7,8,9];//设置用于代表棍子所在数组中的索引的数组
        var timeArr=[5000,2500,1000];//设置用于存储随机时间的数组  1000毫秒= 1秒
        var timer=setInterval(function(){ //每1000毫秒执行一次
            //setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
            // setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
            // 由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
            //setTimeout作用为隔多少时间(单位为毫秒)后执行某函数或名为XX的函数一次。
            if(arr.length==0){
                clearInterval(timer);
                return;
            }
            //随机获取棍子
            var idx=Math.floor(Math.random()*arr.length);
            //值 = Math.floor(Math.random () * 可能值的总数+ 第一个可能的值 )
            var stickGameIndx=arr[idx];
            arr.splice(idx,1); //从用于存放索引的数组arr中,删除被取出的数值
            //splice() 方法用于添加或删除数组中的元素。如果仅删除一个元素，则返回一个元素的数组。 如果未删除任何元素，则返回空数组。
            //规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
            console.log(stickGame[stickGameIndx]);
            console.log(stickGame[stickGameIndx].style)
            //点击消失
            if(stickGame[stickGameIndx].onclick=function(){
                stickGame[stickGameIndx].style.display="none";
                return;
            });
            var stickTop=10;
            var timer2=setInterval(function(){
                if(stickTop>=500){
                   stickGame[stickGameIndx].style.display="none";
                   clearInterval(timer2);
                }
                stickTop+=10;
                stickGame[stickGameIndx].style.top=stickTop+"px";

            },50);           
        },timeArr[Math.floor(Math.random()*timeArr.length)]);
// Math.ceil（）向上舍入小数，它将数值向上舍入为最接近的整数
// Math.floor（） 向下舍入小数点，它将数值向下舍入为最接近的整数          
// Math.round（）标准的四舍五入，它将数值四舍五入为最接近的整数
    </script>
</html>

运行结果如图：
在这里插入图片描述