js实现简单的类似羊了个羊消除游戏代码
代码语言:html
所属分类:游戏
代码描述:js实现简单的类似羊了个羊消除游戏代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>羊了个羊</title> <style> * { box-sizing: border-box; } body { margin: 0; } .main { position: relative; } .item { position: absolute; background: no-repeat center center #ffffff; border:1px solid #ddd; background-size: 100%; color: transparent; display: flex; justify-content: center; align-items: center; z-index: 0; transition: left .3s, top .3s, transform .3s; } .item:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; transition: background-color .2s; } .disabled:after { background-color: rgba(0,0,0,0.7); } .move-list { border: 1px solid #ddd; background-color: #ddd; margin:0 auto; } </style> </head> <body> <div class="main"> </div> <div class="move-list"> </div> <script> // 基础数据 const simpleData = [ {name: '虎', color: '#ff1100', bg: '//repo.bfw.wiki/bfwrepo/images/yang/1.png'}, {name: '兔', color: '#ff8800', bg: '//repo.bfw.wiki/bfwrepo/images/yang/2.png'}, {name: '牛', color: 'green', bg: '//repo.bfw.wiki/bfwrepo/images/yang/3.png'}, {name: '羊', color: 'blue', bg: '//repo.bfw.wiki/bfwrepo/images/yang/4.png'}, {name: '蛇', color: '#779922', bg: '//repo.bfw.wiki/bfwrepo/images/yang/5.png'}, {name: '鼠', color: '#335577', bg: '//repo.bfw.wiki/bfwrepo/images/yang/6.png'} ] // 卡片大小 const size = 40 // 矩阵行 const rows = 10 // 矩阵列 const cols = 10 // 每组为3个 const oneGoupCount = 3 // 每个卡片有x组 const group = 6 // 总共6层,即6个表格 const layerCount = 6 // 表格html const cellHtml = [] // 将生成所有的十二生肖 const renderData = Array.from(new Array(oneGoupCount * group)).map(v => { return simpleData.map(v => ({...v})) }).flat().sort(v => Math.random() - 0.5) // 第一步:绘制出表格矩阵 for(let ly = layerCount - 1; ly >= 0 ; ly--) { for(let i = 0; i < rows; i++) { for(let j = 0; j < cols; j++) { let pyStep = (ly + 1) % 2 === 0 ? size / 2 : 0 let item = (Math.random() > 0.7 && renderData.pop()) item && cellHtml.push(`<div class="item" onclick="move(this)" id="m${ly}-${i}-${j}" style="width:${size}px;height:${size}px;left:${size * j + pyStep}px;top:${size * i + pyStep}px;background-image:url(${item.bg || ''})">${item.name || ''}</div>`) } } } const main = document.querySelector('.main') const moveList = document.querySelector('.move-list') main.innerHTML = cellHtml.reverse().join('') main.style.height = `${size * rows + size * 2}px` main.style.width = `${size * cols}px` moveList.style.height = `${size}px` moveList.style.width = `${size * 6}px` // 第二步:计算被遮住的底牌需标暗色 const checkDisabled = (items) => { (items || main.querySelectorAll('.item')).forEach((v, i) => { const arr = v.id.substring(1).split('-').map(v => Number(v)) .........完整代码请登录后点击上方下载按钮下载查看
网友评论0