读心术小游戏

###主要用到知识点

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

参考自：腾讯课堂渡一教育

总结

以上是生活随笔为你收集整理的读心术小游戏的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。