讀心術小遊戲

讀心術小遊戲

主要用到知識點

• css3 2d轉換 與過渡
• css 使用less
• display:grid 佈局 repeat()方法
• fr單元是容許你用等分網格容器剩餘可用空間來設置（簡單來講就是佔容器的幾份）
• 效果圖

html：

<div class="wraper">
        <div class="left">
            <div class="board">
                <img class="img" src="./img/round.png" alt="">
                <img class="tuan" src="./img/values/0.png" alt="">
            </div>
            <p>在心中任意選擇一個兩位數（或者說，從10~99之間任意選擇一個數），把這個數字分別減去其十位數和個位數（例如你選擇的是71,那就：71-7-1=63）。</p>
            <br />
            <p>在右邊圖表中找出與最後得出的數所相應的圖形，並把這個圖形牢記心中，而後點擊上方的陣型。你會發現，陣型所顯示出來的圖形就是你剛剛內心記下的那個圖形。</p>
        </div>
        <div class="right">
        </div>
    </div>

css：

*{
        margin: 0;
        padding: 0;
    }
    .wraper{
        width: 932px;
        margin: 10px auto;
        display: flex;
        .left{
            width:300px;
            .board{
                width: 300px;
                height: 300px;
                background: url('../img/bg.gif');
                background-size: 300px 300px;
                margin-bottom: 50px;
                position: relative;
                transition: all 3s ease-in-out;
                img{
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    cursor: pointer;
                    transform: translate(-50%,-50%);
                    transition: all 1s ease-in;
                }
                .img{
                    z-index: 10;
                }
                .tuan{
                    opacity: 0;
                }
            }
        }
        .right{
            width:500px;
            height: 560px;
            margin-left:32px; 
            display: grid; //網格佈局
            grid-template-columns:repeat(5,1fr); //定義列寬
            grid-template-rows: repeat(20,1fr); //定義行寬
            grid-auto-flow: column; //自動放置算法 
            align-items: center; //垂直對齊方式
            justify-items: center; //水平對齊方式
            .item{
                span{
                    display: inline-block;
                    line-height: 18px;
                    height: 18px;
                    margin-right: 8px;
                }
                img{
                    width: 18px;
                    height:18px;
                    vertical-align: middle;
                }
            }
        }
    }

js：

(function() {
        var right = document.getElementsByClassName('right')[0];
        var img = document.getElementsByClassName('img')[0];
        var tuan = document.getElementsByClassName('tuan')[0];
        var board = document.getElementsByClassName('board')[0];
        var curent;
        var maxImgIndex = 15;

        function play() {
            var rand;
            curent = getRandom(0, maxImgIndex);
            for (var i = 0; i < 100; i++) {
                if (i % 9 === 0) {
                    rand = curent;
                } else {
                    rand = getRandom(0, maxImgIndex);
                }
                right.innerHTML += `<div class="item">
                    <span>${i}</span>
                    <img src="./img/values/${rand}.png" alt="">
                </div>`;
            }
        }
        play();

        function getRandom(min, max) {
            max++;
            return Math.floor(Math.random() * (max - min) + min);
        }

        board.addEventListener('click', function() {
            this.style.transform = "rotate(1800deg)";
        })
        board.addEventListener('transitionend', function() {
            img.style.opacity = '0';
            tuan.src = `./img/values/${curent}.png`;
            tuan.style.opacity = '1';
        })
    })()

參考自：騰訊課堂渡一教育