前端开发者| wed前端开发教程百度云 |
| core前端开发教程 |
| mac 前端开发教程 |
连续做了好几天，总算是大致做好了。欢迎赏玩，顺便帮忙找找 bug。
提示：游戏总共有 8 关，每关需要达到一定的分数才能过关，说明下，这个需要达到的分数是随机的，过关后增加一种图片。还有，不要点太快，至少图片不动的时候再点下一次，不然可能出现 bug。
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width” />
<title>消消乐</title>
<style>
html,
body {
margin: 0;
overflow: hidden;
}
span {
display: inline-block;
position: absolute;
width: 60px;
height: 60px;
background-color: #000;
}
div {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 480px;
height: 480px;
margin: auto;
background-color: #000;
overflow: hidden;
}
canvas {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 480px;
height: 480px;
margin: auto;
}
</style>
</head>
<body>
<div></div>
<canvas></canvas>
<script>
window.onload = function() {
var width = 480
var height = 480
var size = 60
var row = width / size
var col = width / size
var div = document.querySelector(‘div’)
var canvas = document.querySelector(‘canvas’)
canvas.width = width
canvas.height = height
var ctx = canvas.getContext(‘2d’)
var vys = [6, 8, 10, 12]
var count = 3
var score = 0
var min
var num
var foods = []
var flyFoods = []
var srcs = [
‘http://pic.yupoo.com/pines/09c4fb29/362c48eb.jpg’,
‘http://pic.yupoo.com/pines/df9cff50/89009ea8.jpg’,
‘http://pic.yupoo.com/pines/f71af70f/167afb4a.jpg’,
‘http://pic.yupoo.com/pines/1416d004/9df2a9a5.jpg’,
‘http://pic.yupoo.com/pines/a5b79187/d519efea.jpg’,
‘http://pic.yupoo.com/pines/2993d1bd/70f1f4dc.jpg’,
‘http://pic.yupoo.com/pines/9cae2983/07986b49.jpg’,
‘http://pic.yupoo.com/pines/290cde80/b4c8b205.jpg’,
‘http://pic.yupoo.com/pines/b55d91de/9d26db06.jpg’,
‘http://pic.yupoo.com/pines/9d781988/bae3c259.jpg’,
]
function randomNUM(min, max) {
return Math.floor(Math.random() * (max – min) + min)
}
function createSpan(x, y, src, width, height) {
var span = document.createElement(‘span’)
span.style.left = x + ‘px’
span.style.top = y + ‘px’
span.style.backgroundImage = src
span.style.backgroundSize = width + ‘px ‘ + height + ‘px’
div.appendChild(span)
return span
}
function initSpans(size, row, col, count) {
for (var i = 0; i < row; i++) {
for (var j = 0; j < col; j++) {
var x = size * i
var y = size * (j – 8)
var src = ‘url(‘ + srcs[randomNUM(0, count)] + ‘)’
var width = size
var height = size
createSpan(x, y, src, width, height)
}
}
}
function initFoods(size, row, col) {
var spans = document.querySelectorAll(‘span’)
for (var i = 0; i < row; i++) {
foods[i] = []
for (var j = 0; j < col; j++) {
var food = spans[i * row + j]
food.i = i
food.j = j
food.mj = j
food.size = size
food.isEat = false
food.isEmpty = false
food.v = vys[randomNUM(0, vys.length)]
food.isDown = true
foods[i].push(food)
}
}
}
function downMove(food) {
food.style.top = parseInt(food.style.top) + food.v + ‘px’
if (
parseInt(food.style.top) >=
height – (8 – food.j) * food.size
) {
food.style.top = height – (8 – food.j) * size
food.isDown = false
}
}
function minScore() {
num = count – 1
var d = 3 * (num – 2)
min = randomNUM(58 – d, 62 – d)
confirm(‘本关你需要得：’ + min + ‘分！’)
}
function dowmFood() {
var timeID = null
var isOver = false
timeID = setInterval(function() {
for (var i = 0; i < foods.length; i++) {
for (var j = 0; j < foods[i].length; j++) {
var food = foods[i][j]
if (food.isDown) {
downMove(food)
}
}
}
isOver = foods.every(function(foodlist) {
return foodlist.every(function(food) {
return !food.isDown
})
})
if (isOver) {
clearInterval(timeID)
timeID = null
setTimeout(function() {
minScore()
}, 300)
}
}, 16)
}
function removeFood(food) {
food.classList.add(‘isEmpty’)
div.removeChild(document.querySelector(‘.isEmpty’))
food.isEmpty = true
}
function move(food) {
var dist = food.mj
var size = food.size
food.style.top = parseInt(food.style.top) + 5 + ‘px’
if (parseInt(food.style.top) >= dist * size) {
food.style.top = dist * size + ‘px’
food.isMove = false
food.isEat = true
}
}
function flyFood(eatlist) {
for (var i = 0; i < eatlist.length; i++) {
var m = eatlist[i][0]
var n = eatlist[i][1]
var food = foods[m][n]
var x = parseInt(food.style.left)
var y = parseInt(food.style.top)
var src = food.style.backgroundImage.slice(5, -2)
var img = new Image()
img.src = src
var afood = new Food(x, y, img)
flyFoods.push(afood)
}
}
function Food(x, y, img) {
this.x = x
this.y = y
this.vx = randomNUM(5, 15) – 10
this.vy = 2
this.img = img
this.size = size
this.isOver = false
}
Food.prototype.fly = function() {
this.x += this.vx
this.y += this.vy
this.vy += 0.5
this.drawFood()
if (this.x <= -5 || this.x >= width – this.size + 5) {
this.vx *= -1
}
if (this.y >= height) {
this.y = height
this.vx = 0
this.vy = 0
this.isOver = true
}
}
Food.prototype.drawFood = function() {
ctx.drawImage(
this.img,
this.x,
this.y,
this.size,
this.size,
)
}
function fly(flyFoods) {
var time = null
var isOver = false
time = setInterval(function() {
ctx.clearRect(0, 0, width, height)
flyFoods.forEach(function(food) {
if (!food.isOver) {
food.fly()
}
})
isOver = flyFoods.every(function(food) {
return food.isOver
})
if (isOver) {
flyFoods.forEach(function(food) {
ctx.clearRect(0, 0, width, height)
food.size = 0
food.drawFood()
})
clearInterval(time)
time = null
flyFoods = []
}
}, 16)
}
function eatFood(food, eatlist) {
var i = food.i
var j = food.j
var eatFoods = []
var src = food.style.backgroundImage
if (foods[i – 1]) {
var leftFood = foods[i – 1][j]
if (
leftFood &&
!leftFood.isEat &&
!leftFood.isEmpty &&
leftFood.style.backgroundImage === src
) {
eatFoods.push(leftFood)
}
}
if (foods[i]) {
var topFood = foods[i][j – 1]
if (
topFood &&
!topFood.isEat &&
!topFood.isEmpty &&
topFood.style.backgroundImage === src
) {
eatFoods.push(topFood)
}
}
if (foods[i]) {
var bottomFood = foods[i][j + 1]
if (
bottomFood &&
!bottomFood.isEat &&
!bottomFood.isEmpty &&
bottomFood.style.backgroundImage === src
) {
eatFoods.push(bottomFood)
}
}
if (foods[i + 1]) {
var rightFood = foods[i + 1][j]
if (
rightFood &&
!rightFood.isEat &&
!rightFood.isEmpty &&
rightFood.style.backgroundImage === src
) {
eatFoods.push(rightFood)
}
}
if (eatFoods.length > 0) {
if (!food.isEat) {
food.isEat = true
removeFood(food)
eatlist.push([i, j])
}
eatFoods.forEach(function(food) {
if (!food.isEat) {
food.isEat = true
removeFood(food)
eatlist.push([food.i, food.j])
}
eatFood(food, eatlist)
})
}
}
function elist(eatlist) {
var list = {}
for (var i = 0; i < eatlist.length; i++) {
var m = eatlist[i][0]
var n = eatlist[i][1]
if (!list[m]) {
list[m] = [n]
} else {
list[m].push(n)
}
}
return list
}
function moveFood(list) {
var keys = Object.keys(list)
var temFoods = []
for (var i = 0; i < keys.length; i++) {
var m = keys[i]
var n = list[m]
temFoods[i] = []
n.sort(function(a, b) {
return a – b
})
var max = n.pop()
for (var j = max – 1; j >= 0; j–) {
var food = foods[m][j]
if (!food.isEat && !food.isEmpty) {
food.isMove = true
food.mj += 1
for (var q = 0; q < n.length; q++) {
if (food.j < n[q]) {
food.mj += 1
}
}
temFoods[i].push(food)
}
}
}
var time = setTimeout(function() {
clearTimeout(time)
time = null
animate(temFoods)
}, 200)
}
function animate(temFoods) {
var timeID = null
var isOver = false
timeID = setInterval(function() {
for (var i = 0; i < temFoods.length; i++) {
for (var j = 0; j < temFoods[i].length; j++) {
var food = temFoods[i][j]
if (food.isMove) {
move(food)
}
}
}
isOver = temFoods.every(function(temFood) {
return temFood.every(function(food) {
return !food.isMove
})
})
if (isOver) {
clearInterval(timeID)
timeID = null
resetFoods(temFoods)
}
}, 16)
}
function isFinish() {
var countFoods = []
var finish = true
for (var i = 0; i < foods.length; i++) {
for (var j = 0; j < foods[i].length; j++) {
var food = foods[i][j]
if (food && !food.isEat && !food.isEmpty) {
var src = food.style.backgroundImage
if (foods[i – 1]) {
var leftFood = foods[i – 1][j]
if (
leftFood &&
!leftFood.isEat &&
!leftFood.isEmpty &&
leftFood.style.backgroundImage === src
) {
countFoods.push(leftFood)
}
}
if (foods[i]) {
var topFood = foods[i][j – 1]
if (
topFood &&
!topFood.isEat &&
!topFood.isEmpty &&
topFood.style.backgroundImage === src
) {
countFoods.push(topFood)
}
}
if (foods[i]) {
var bottomFood = foods[i][j + 1]
if (
bottomFood &&
!bottomFood.isEat &&
!bottomFood.isEmpty &&
bottomFood.style.backgroundImage === src
) {
countFoods.push(bottomFood)
}
}
if (foods[i + 1]) {
var rightFood = foods[i + 1][j]
if (
rightFood &&
!rightFood.isEat &&
!rightFood.isEmpty &&
rightFood.style.backgroundImage === src
) {
countFoods.push(rightFood)
}
}
if (countFoods.length > 0) {
finish = false
break
}
}
}
}
return finish
}
function last() {
var lastFoods = []
for (var i = 0; i < foods.length; i++) {
for (var j = 0; j < foods[i].length; j++) {
var food = foods[i][j]
if (food && !food.isEat && !food.isEmpty) {
var x = parseInt(food.style.left)
var y = parseInt(food.style.top)
var src = food.style.backgroundImage.slice(
5,
-2,
)
var img = new Image()
img.src = src
var lastfood = new Food(x, y, img)
lastfood.i = i
lastfood.j = j
lastFoods.push(lastfood)
}
}
}
return lastFoods
}
function resetFoods(temFoods) {
for (var i = 0; i < temFoods.length; i++) {
for (var j = 0; j < temFoods[i].length; j++) {
var food = temFoods[i][j]
if (food.isEat && !food.isEmpty) {
var m = food.i
var n = food.mj
var x = parseInt(food.style.left)
var y = parseInt(food.style.top)
var src = food.style.backgroundImage
var width = food.size
var height = food.size
var newSpan = createSpan(
x,
y,
src,
width,
height,
)
var newFood = newSpan
newFood.i = m
newFood.j = n
newFood.mj = n
newFood.size = food.size
newFood.isEat = false
newFood.isEmpty = false
foods[m][n] = newFood
removeFood(food)
}
}
}
temFoods = null
var finish = isFinish()
if (finish) {
var lastfoods = last()
var time = setTimeout(function() {
clearTimeout(time)
time = null
lastfoods.forEach(function(lastfood) {
var i = lastfood.i
var j = lastfood.j
var food = foods[i][j]
food.isEat = true
removeFood(food)
})
fly(lastfoods)
if (score >= min) {
if (count === srcs.length) {
confirm(
‘你得了：’ +
score +
‘分！\n恭喜，你通关了！\n感谢你玩这个游戏！’,
)
}
if (count < srcs.length) {
var next = confirm(
‘你得了：’ +
score +
‘分，恭喜过关！\n’ +
‘下一关：第’ +
num +
‘关’,
)
if (next) {
score = 0
count += 1
init(count)
}
}
} else {
var again = confirm(
‘你得了：’ +
score +
‘分！\n太少了，再来一次？’,
)
if (again) {
score = 0
init(count)
}
}
}, 300)
}
}
function click(ev) {
if (!ev) ev = window.event
var x = ev.offsetX
var y = ev.offsetY
var i = Math.floor(x / 60)
var j = Math.floor(y / 60)
var food = foods[i][j]
if (food.isEat || food.isEmpty) return false
var eatlist = []
eatFood(food, eatlist)
if (eatlist.length > 0) {
score += eatlist.length
flyFood(eatlist)
fly(flyFoods)
var list = elist(eatlist)
moveFood(list)
}
return false
}
canvas.addEventListener(‘click’, click, false)
function init(count) {
initSpans(size, row, col, count)
initFoods(size, row, col)
dowmFood()
}
init(count)
}
</script>
</body>
</html>
| web前端开发自学教程 |
| 前端开发教程黑马 |
| access前端开发教程 |
» 本文来自：前端开发者 » 《前端开发自制消消乐》
» 本文链接地址：https://www.rokub.com/7748.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册