###主要用到知識點

• 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';})})()

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

總結

以上是生活随笔為你收集整理的读心术小游戏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。