前端开发自制消消乐

wed前端开发教程百度云
core前端开发教程
mac 前端开发教程

连续做了好几天,总算是大致做好了。欢迎赏玩,顺便帮忙找找 bug。
提示:游戏总共有 8 关,每关需要达到一定的分数才能过关,说明下,这个需要达到的分数是随机的,过关后增加一种图片。还有,不要点太快,至少图片不动的时候再点下一次,不然可能出现 bug。

<!DOCTYPE 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
赞(0)
64K

评论 抢沙发

评论前必须登录!