实例介绍
【实例简介】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>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论