见缝插针一个小游戏

最新推荐文章于 2022-07-10 00:59:05 发布

转载最新推荐文章于 2022-07-10 00:59:05 发布 · 312 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/tianyuqin/blog/761292

文章标签：

#python #游戏 #javascript #ViewUI

本文介绍了一个简单的网页版见缝插针游戏的实现过程，使用HTML和JavaScript创建游戏界面，并通过JavaScript控制游戏逻辑，包括游戏开始、进行及结束状态的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>见缝插针</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 400px;
            height: 400px;
          /*  border: 1px solid #cc4ad5;*/
            position: relative;
        }
        .center{
            width: 50px;
            height: 50px;
            position: absolute;
            top: 175px;
            left: 175px;
            background: black;
            border-radius: 50%;
        }
        .ball,.newball{
            width: 26px;
            height: 26px;
            background: black;
            border-radius: 50%;
            position: absolute;
            top: -26px;
            left: -12px;
        }
        .line,.newline{
            width: 5px;
            height: 124px;
            background: black;
            position: absolute;
            top: 76px;
            left: 199px;
            transform-origin: 50% 100%;
        }
        .box{
            width: 400px;
            height: 600px;
            border: 1px solid black;
            background: rgb(224,224,224);
            overflow: hidden;
        }
        .start{
            width: 400px;
            height: 600px;
            background: rgba(0,0,0,0.7);
            position: absolute;
            top: 1px;
            left: 1px;
            text-align: center;
            line-height: 600px;
            font-size: 40px;
            color: rgb(214,206,206);
        }
        .startBtn{
            width: 150px;
            height: 60px;
            border: 2px solid gray;
            position: absolute;
            top: 350px;
            left: 125px;
            background: rgba(188,188,188,0.8);
            border-radius: 20px;
            text-align: center;
            line-height: 60px;
            font-size: 25px;
            color: rgb(88,100,100);
            cursor: pointer;
        }
         .num{
             width: 26px;
             height: 26px;
             background: black;
             color: white;
             border-radius:50% ;
             margin-left: 187px;
             margin-top: 5px;
             text-align: center;
             line-height: 26px;
             font-size: 15px;
             cursor: pointer;
         }
        .over{
            width: 400px;
            height: 600px;
            background: rgba(0,0,0,0.7);
            position: absolute;
            top: 1px;
            left: 1px;
            text-align: center;
            line-height: 600px;
            font-size: 40px;
            color: rgb(214,206,206);
            display: none;
        }
        .again{
            width: 150px;
            height: 60px;
            border: 2px solid gray;
            position: absolute;
            top: 350px;
            left: 125px;
            background: rgba(188,188,188,0.8);
            border-radius: 20px;
            text-align: center;
            line-height: 60px;
            font-size: 25px;
            color: rgb(88,100,100);
            cursor: pointer;
        }
        .niu{
            width: 400px;
            height: 600px;
            background: rgba(0,0,0,0.7);
            position: absolute;
            top: 1px;
            left: 1px;
            text-align: center;
            line-height: 600px;
            font-size: 200px;
            color: rgb(214,206,205);
            display: none;
        }
    </style>
</head>
<body>
<div class="box">
    <!--<div class="wrap">
        <div class="line" style="transform: rotate(0deg)">
            <div class="ball"></div>
        </div>
        <div class="line" style="transform: rotate(45deg)">
            <div class="ball"></div>
        </div>
        <div class="line" style="transform: rotate(160deg)">
            <div class="ball"></div>
        </div>
    </div>
    <div class="center"></div>-->
</div>
<div class="start">
    见缝插针<br>
    <div class="startBtn">Start</div>
</div>
<div class="over">
    游戏结束
    <div class="again">play again</div>
</div>
<div class="niu">
    牛逼
</div>
</body>
<script type="text/javascript">
    var start = document.querySelector('.start');
    var startBtn = document.querySelector('.startBtn');
    startBtn.onclick = function(){
        start.style.display = 'none';
    };

    var body_ = document.querySelector('.box');
    var wrap = document.createElement('div');
    wrap.className = 'wrap';
    body_.appendChild(wrap);
    var center = document.createElement('div');
    center.className = 'center';
    body_.appendChild(center);
    var num_ = document.createElement('div');
    body_.appendChild(num_);


    var index = 1;
    var x = 5;
    var arr = [];
    function made(){
        for(var i=0 ;i<x;i++){
            var line = document.createElement('div');
            line.className = 'line';
            line.setAttribute('id','init-line'+(i+1)+'');
            line.style.transform = 'rotate('+ i*(360/x)+'deg)';
            arr.push(i*(360/x));
            var ball = document.createElement('div');
            ball.className = 'ball';
            line.appendChild(ball);
            wrap.appendChild(line);
        }
    }
    /*设置时间，转动起来*/
    var timer = null;
    var z = 0;

    /*点击，发射针*/
    body_.onclick = function(){
        var newline = document.createElement('div');
        newline.className = 'newline';
        var newZ = 180 - z;
        if(newZ <=0){
            arr.push(newZ + 360)
        }else{
            arr.push(newZ);
        }
        newline.style.transform = 'rotate(' + newZ +'deg)';
        var newball = document.createElement('div');
        newball.className = 'newball';
        newline.appendChild(newball);
        wrap.appendChild(newline);
        for(var i=0;i<arr.length-1;i++){
             if(Math.abs(arr[i] - arr[arr.length - 1]) <= 10){
                 clearInterval(timer);
                 gameOver();
             }
        }
        var mm = 0;
        var nums = document.querySelectorAll('.num');
        num_.removeChild(nums[mm]);
        if(nums.length == 1){
            finalSuccess();
        }

    };

    var c = 10;
    function initNum(){
        timer = setInterval(function(){
            z++;
            wrap.style.transform = 'rotate(' + z + 'deg)';
            wrap.style.transformOrigin = '50% 50%';
            if(z >= 360){
                z=0
            }else{
                z++;
            }
        },20);
        /*设置下面的针*/
        for(var i=0;i<c;i++){
            var num = document.createElement('div');
            num.className = 'num';
            num.innerHTML = c-i;
            num_.appendChild(num);
        }
    }
    /*胜利*/
    var niu = document.querySelector('.niu');
    function finalSuccess(){
        clearInterval(timer);
        niu.style.display = 'block';
    }

    /*失败*/
    var over = document.querySelector('.over');
    function gameOver(){
        over.style.display = 'block';
    }


    made();
    initNum();

    /*重新玩*/
    var again = document.querySelector('.again');
    again.onclick = function(){
        wrap.innerHTML = '';
        num_.innerHTML = '';
         index = 1;
         x = 5;
         arr = [];
        made();
        c = 10;
        z = 0;
        initNum();
        over.style.display = 'none';
    }


</script>
</html>

转载于:https://my.oschina.net/tianyuqin/blog/761292