JavaScript基础消消乐小游戏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } .home { width: 880px; height: 800px; background: rgba(0, 38, 255, 0.2); margin: 50px auto; position: relative; font-size: 0px; border-radius: 5px; border: 10px solid rgba(0, 0, 0, 0); overflow: hidden; } .happyElms, .fixedElms { width: 80px; height: 80px; border: 0px solid #555; box-sizing: border-box; background: url('http://m.qpic.cn/psb?/V14bAT0n0crOhQ/Dx46HaFb2vN*wlmA8ahZHrARMM5XN1FxOVMfKBwA*fY!/b/dDIBAAAAAAAA&bo=fgc*AX4HPwEDORw!&rf=viewer_4') no-repeat; background-position: 0px 0px; background-size: 600%; position: absolute; border-radius: 5px; transition: all 0.3s; filter: contrast(150%) saturate(150%) blur(0); } .happyElms:hover, .fixedElms:hover { background: url('http://m.qpic.cn/psb?/V14bAT0n0crOhQ/B7AhaRiLR6CoFm64lKnGz79h**eXsDZG7BJrJqzqI30!/b/dC8BAAAAAAAA&bo=fgc*AX4HPwEDCSw!&rf=viewer_4') no-repeat; background-size: 600%; box-shadow: 0px 0px 15px white inset; /*opacity: 0; transform: scale(0.5) */ } .bg { position: relative; width: 76px; height: 76px; background: linear-gradient(#182748, #182748); opacity: 0.8; margin: 1px; overflow: hidden; border: 1px solid rgba(13, 49, 99, 0.6); display: inline-block; border-radius: 5px; filter: contrast(150%) saturate(120%); } .room { display: inline-block; width: 80px; height: 100%; border: 0px solid rgba(13, 49, 99, 0.6); background: rgba(255, 255, 255, 0.2); font-size: 0px; } .bg::before { content: ''; display: block; background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); width: 110%; height: 10%; } body { background: url('http://m.qpic.cn/psb?/V14bAT0n0crOhQ/gRDfGCvVRPZgj.YYeCpr4nrm*SqzKx.D8gL.g5t4ixQ!/b/dFIBAAAAAAAA&bo=gAc4BIAHOAQRGS4!&rf=viewer_4') no-repeat; } .count { position: absolute; right: 100px; top: 100px; width: 350px; height: 100px; font-size: 20px; text-align: center; color: #fff; } .count p { display: inline-block; background: rgba(255, 255, 255, 0.5); border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.8); height: 50px; width: 200px; margin: 10px; font-size: 35px; line-height: 50px; overflow: hidden; position: relative; cursor: pointer; } .count p::after { content: ''; display: block; position: absolute; width: 100%; height: 20px; background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); top: 0px; } </style></head><body> <div class="home"> <div class="count">总得分<br> <p>0</p> </div> <div class="room"> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> </div> <div class="room"> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> </div> <div class="room"> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> </div> <div class="room"> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> </div> <!-- <div class="room"></div> <div class="room"></div> <div class="room"></div> <div class="room"></div> <div class="room"></div> <div class="room"></div> --> </div> <script> var room = document.getElementsByClassName('room') var gameArr = [] for (var i = 0; i < room.length; i ) { gameArr.push([]) } var happyEL = {//原对象 taget: document.getElementsByClassName('home')[0], fixed: document.getElementsByClassName('fixedElms'), move: document.getElementsByClassName('happyElms'), top: 1, left: 0, speed: 80, boor: true, id: 0, class: 6 } function HappyEL(happyEL, s) {//构造元素属性 this.happy = document.createElement('div') this.taget = happyEL.taget this.taget.appendChild(this.happy) this.happy.className = 'happyElms' this.left = happyEL.left this.speed = happyEL.speed this.happy.style.top = -happyEL.top * 80 'px' this.happy.style.left = happyEL.left * this.speed 'px' this.fixed = happyEL.fixed this.boor = happyEL.boor this.id = happyEL.id this.class = happyEL.class this.randcolor = Math.floor(Math.random() * this.class) this.move = happyEL.move this.happy.style.backgroundPosition = -this.randcolor * this.speed 'px ' '0px' this.shine = function () { this.happy.style.boxShadow = '0px 0px 15px white inset' } this.loseShine = function () { this.happy.style.boxShadow = null } this.remo = function () { this.happy.style.transform = 'scale(0.5)' this.happy.style.opacity = 0 } this.dest = function () { if (this.happy && this.taget) { try { this.taget.removeChild(this.happy) } catch (e) { } } } } var timer var cont = 0 function Timer() { //入口，从这开始 // var col = gameArr.length % gameArr.length // timer = setInterval(function () { // col %= gameArr.length // if (cont >= 40) { // clearInterval(timer) // } else { // work(col) // col // cont // } // }, 50) for (var i = 0; i < gameArr.length; i ) { for (var j = 0; j < 10; j ) { work(i, j) } } } Timer() var count = 0 var pCount = document.getElementsByTagName('p')[0] function work(x, y) {//创建元素工厂 happyEL.left = x var createElms = new HappyEL(happyEL) happyEL.id createElms.maxTop = y createElms.remove = function (n) {//绑定事件 if (createElms.boor) { createElms.boor = false createElms.remo() count pCount.innerText = count createElms.happy.addEventListener('transitionend', function () { setTimeout(function () { createElms.dest() removeArr(createElms.id) }, 100 * n) }) } } createElms.happy.onclick = function () {//单击事件 createElms.shine() exchangeElns(createElms) } gameArr[x].push([createElms, createElms.randcolor, createElms.id]) var timer = setInterval(function () { elmsBor(createElms, timer) }, 80) } function retSpeed() {//为每个元素的移动速度调整为80 for (var i = 0; i < gameArr.length; i ) { for (var j = gameArr[i].length - 1; j >= 0; j--) { gameArr[i][j][0].maxTop = j gameArr[i][j][0].speed = 80 } } } function removeArr(n) {//移除数组中对应的值，并new一个数组出来 for (var i = 0; i < gameArr.length; i ) { for (var j = gameArr[i].length - 1; j >= 0; j--) { if (gameArr[i][j][2] == n) { gameArr[i].splice(j, 1) console.log(j) work(i,j) break } } } } function elmsBor(elms) {//元素的移动，判断位置 if (parseInt(elms.happy.style.top) elms.speed >= 800 - elms.maxTop * 80) { elms.speed = 0 elms.happy.className = 'fixedElms' } else { elms.happy.style.top = parseInt(elms.happy.style.top) elms.speed 'px' } // var fixed = elms.fixed // var move = elms.move // var x = parseInt(elms.happy.style.left) // var y = parseInt(elms.happy.style.top) // var boor = false // for (var i = 0; i < fixed.length; i ) { // if (x == parseInt(fixed[i].style.left) && y elms.speed == parseInt(fixed[i].style.top)) { // elms.speed = 0 // elms.happy.className = 'fixedElms' // break // } else if (move[i] && cont >= 40) { // if (x == parseInt(move[i].style.left) && y == parseInt(move[i].style.top)) { // // elms.speed = 0 // } // } // } // if (boor == false) { // elms.happy.style.top = parseInt(elms.happy.style.top) elms.speed 'px' // } // } } var tempArr = [] function exchangeElns(elms) {//元素显示交换 if (tempArr.length < 1) { tempArr.push(elms) } else { tempArr.push(elms) var id = tempArr[0].id//交换标识 var x = parseInt(tempArr[0].happy.style.left) var y = parseInt(tempArr[0].happy.style.top) var id_1 = tempArr[1].id//交换标识 var x1 = parseInt(tempArr[1].happy.style.left) var y1 = parseInt(tempArr[1].happy.style.top) if (x == x1 && y 80 == y1 || x == x1 && y - 80 == y1 || x 80 == x1 && y == y1 || x - 80 == x1 && y == y1) { tempArr[0].happy.style.left = x1 'px' tempArr[0].happy.style.top = y1 'px' tempArr[1].happy.style.left = x 'px' tempArr[1].happy.style.top = y 'px' changeArr(id, id_1) tempArr[0].loseShine() tempArr[1].loseShine() tempArr = [] } else { tempArr[0].loseShine() tempArr[1].loseShine() tempArr = [] } } } function changeArr(n, n_1) {//元素隐式交换 var first var first_n = [] var second var second_n = [] for (var i = gameArr.length - 1; i >= 0; i--) { for (var j = 0; j < gameArr[i].length; j ) { if (gameArr[i][j][2] == n) { first = gameArr[i].splice(j, 1, '') first_n.push(i, j) } else if (gameArr[i][j][2] == n_1) { second = gameArr[i].splice(j, 1, '') second_n.push(i, j) } } } gameArr[second_n[0]][second_n[1]] = first[0] gameArr[first_n[0]][first_n[1]] = second[0] } function removeElms() {//消除匹配到的元素 匹配元素 1好位置 for (var i = 0; i < gameArr.length; i ) { for (var j = gameArr[i].length - 1; j >= 0; j--) { //纵向匹配 if (seekPortElms(gameArr, i, j, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9)) { if (matchElms(gameArr, i, j, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9)) { deleteElms(gameArr, i, j, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9) continue } } if (seekPortElms(gameArr, i, j, 0, 1, 2, 3, 4, 5, 6, 7, 8)) { if (matchElms(gameArr, i, j, 0, 1, 2, 3, 4, 5, 6, 7, 8)) { deleteElms(gameArr, i, j, 0, 1, 2, 3, 4, 5, 6, 7, 8) continue } } if (seekPortElms(gameArr, i, j, 0, 1, 2, 3, 4, 5, 6, 7)) { if (matchElms(gameArr, i, j, 0, 1, 2, 3, 4, 5, 6, 7)) { deleteElms(gameArr, i, j, 0, 1, 2, 3, 4, 5, 6, 7) continue } } if (seekPortElms(gameArr, i, j, 0, 1, 2, 3, 4, 5, 6)) { if (matchElms(gameArr, i, j, 0, 1, 2, 3, 4, 5, 6)) { deleteElms(gameArr, i, j, 0, 1, 2, 3, 4, 5, 6) continue } } if (seekPortElms(gameArr, i, j, 0, 1, 2, 3, 4, 5)) { if (matchElms(gameArr, i, j, 0, 1, 2, 3, 4, 5)) { deleteElms(gameArr, i, j, 0, 1, 2, 3, 4, 5) continue } } if (seekPortElms(gameArr, i, j, 0, 1, 2, 3, 4)) { if (matchElms(gameArr, i, j, 0, 1, 2, 3, 4)) { deleteElms(gameArr, i, j, 0, 1, 2, 3, 4) continue } } if (seekPortElms(gameArr, i, j, 0, 1, 2, 3)) { if (matchElms(gameArr, i, j, 0, 1, 2, 3)) { deleteElms(gameArr, i, j, 0, 1, 2, 3) continue } } if (seekPortElms(gameArr, i, j, 0, 1, 2)) { if (matchElms(gameArr, i, j, 0, 1, 2)) { deleteElms(gameArr, i, j, 0, 1, 2) continue } } //横向匹配 if (seekTranElms(gameArr, i, 0, 1, 2, 3)) { if (matchElms_tran(gameArr, i, j, 0, 1, 2, 3)) { deleteElms_tran(gameArr, i, j, 0, 1, 2, 3) continue } } if (seekTranElms(gameArr, i, 0, 1, 2)) { if (matchElms_tran(gameArr, i, j, 0, 1, 2)) { deleteElms_tran(gameArr, i, j, 0, 1, 2) continue } } } } } setInterval(function () { retSpeed() if (gameArr.length >= 4 && gameArr[0].length >= 10 && gameArr[1].length >= 10 && gameArr[2].length >= 10 && gameArr[3].length >= 10) { removeElms() } }, 50) //寻找纵向元素seekPortElms(gameArr,i,j,1,2) function seekPortElms() { var taget = arguments[0][arguments[1]] var boor = true for (var n = 3; n < arguments.length; n ) { if (typeof (taget[arguments[2] arguments[n]]) == 'undefined') { boor = false break } } return boor } function matchElms() {//纵向匹配 var target = arguments[0][arguments[1]][arguments[2]][1] var matchTarget = arguments[0][arguments[1]] var boor = true for (var n = 3; n < arguments.length; n ) { if (target != matchTarget[arguments[2] arguments[n]][1]) { boor = false break } } return boor } function deleteElms() {//清除销毁纵向元素 //arguments[0][arguments[1]][arguments[2]][0].remove(arguments[arguments.length-1]) for (var n = arguments.length - 1; n >= 3; n--) { arguments[0][arguments[1]][arguments[2] arguments[n]][0].remove(arguments[n]) } } //寻找横向元素seekTranElms(gameArr,i,1,2) function seekTranElms() {//寻找横向元素 var taget = arguments[0] var boor = true for (var n = 2; n < arguments.length; n ) { if (typeof (taget[arguments[1] arguments[n]]) == 'undefined') { boor = false break } } return boor } function matchElms_tran() {//横向向匹配 var target = arguments[0][arguments[1]][arguments[2]][1] //var matchTarget = arguments[0][arguments[1]] var boor = true for (var n = 3; n < arguments.length; n ) { if (target != arguments[0][arguments[1] arguments[n]][arguments[2]][1]) { boor = false break } } return boor } function deleteElms_tran() {//清除销毁横向元素 // arguments[0][arguments[1]][arguments[2]][0].remove(0) for (var n = 3; n < arguments.length; n ) { arguments[0][arguments[1] arguments[n]][arguments[2]][0].remove(arguments[n]) } } </script></body></html>
评论