HTML5 五子连珠消除小游戏

游戏上方是即将出现的彩色棋子。你可以点中棋盘上的棋子将其移动到随意位置（只要有棋路可通），尽量把同色的棋子连接在一起，达到5个同色棋子连接在一起时，将被一起消除，得分加5.

game

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 9818
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

this.bubbles.forEach(function (bubble) {
            bubble.draw();
        });

ctx.restore();
    },
    isMoving: false,
    flyin: function () {
        var emptys = game.map.getEmptyBubbles();
        if (emptys.length < 3) {
            //GAME OVER
            game.over();
            return;
        }
        var me = this;
        var status = [0, 0, 0];
        var times = 1;
        game.play("flyin", function () {
            if (status[0] && status[1] && status[2]) {
                game.stop("flyin");
                me.isMoving = false;
                status = [0, 0, 0];
                me.bubbles = [];
                me.genrate();
                return;
            }
            me.isMoving = true;
            for (var i = 0; i < me.bubbles.length; i++) {
                if (status[i]) {
                    continue;
                }
                var target = emptys[i];
                var x2 = target.px + game.map.startX - me.startX;
                var y2 = target.py + game.map.startY - me.startY;
                var current = me.bubbles[i];
                var step = Math.abs(x2 - current.px)/10 || Math.abs(y2 - current.y)/10;
                if (current.px < x2) {
                    current.py = ((y2 - current.py) / (x2 - current.px)) * step + current.py;
                    current.px += step;
                    if (current.px > x2) {
                        current.px = x2;
                    }
                }
                else if (current.px > x2) {
                    current.py = ((y2 - current.py) / (current.px - x2)) * step + current.py;
                    current.px -= step;
                    if (current.px < x2) {
                        current.px = x2;
                    }
                }
                else {
                    current.py += step;
                }
                if (current.py > y2) {
                    current.py = y2;
                }
                if (parseInt(current.px+0.1) == x2 && parseInt(current.py+0.1) == y2) {
                    status[i] = 1;
                    current.x = target.x;
                    current.y = target.y;
                    game.map.addBubble(current);
                    game.map.clearLine(current.x, current.y, current.color, false);
                }
            }
        }, 10);

}
};
game.map = {
    startX: 40.5,
    startY: 60.5,
    width: game.cellCount * game.cellWidth,
    height: game.cellCount * game.cellWidth,
    bubbles: [],
    init: function () {
        for (var i = 0; i < game.cellCount; i++) {
            var row = [];
            for (var j = 0; j < game.cellCount; j++) {
                row.push(new Bubble(j, i, null));
            }
            this.bubbles.push(row);
        }
    },
    clearLine: function (x1, y1, color, isClick) {
        if (this.isEmpty(x1, y1)) {
            if (isClick) game.ready.flyin();
            return;
        };
        //Given a coordinate, to see whether there is a satisfying line can be eliminated
        //4 lines direction 一  | / \
        var current = this.getBubble(x1, y1);
        if (!current.color) {
            console.log(current);
        }
        var arr1, arr2, arr3, arr4;
        arr1 = this.bubbles[y1];
        arr2 = [];
        for (var y = 0; y < game.cellCount; y++)
            arr2.push(this.getBubble(x1, y));
        arr3 = [current];
        arr4 = [current];
        for (var i = 1; i < game.cellCount ; i++) {
            if (x1 - i >= 0 && y1 - i >= 0)
                arr3.unshift(this.getBubble(x1 - i, y1 - i));
            if (x1 + i < game.cellCount && y1 + i < game.cellCount)
                arr3.push(this.getBubble(x1 + i, y1 + i));

if (x1 - i >= 0 && y1 + i < game.cellCount)
                arr4.push(this.getBubble(x1 - i, y1 + i));
            if (x1 + i < game.cellCount && y1 - i >= 0)
                arr4.unshift(this.getBubble(x1 + i, y1 - i));
        }
        var line1 = getLine(arr1);
        var line2 = getLine(arr2);
        var line3 = getLine(arr3);
        var line4 = getLine(arr4);
        var line = line1.concat(line2).concat(line3).concat(line4);
        if (line.length < 5) {
            if (isClick) game.ready.flyin();
            return;
        }
        else {
            var me = this;
            var i = 0;
            game.play("clearline", function () {
                if (i == line.length) {
                    game.score.addScore(line.length);
                    game.stop("clearline");
                    me.isMoving = false;
                    //game.ready.flyin();
                    return;
                }
                me.isMoving = true;
                var p = line[i];
                me.setBubble(p.x, p.y, null);
                i++;
            }, 100);
        }
        function getLine(bubbles) {

//console.log(path);
        var me = this;
        var name = "move_" + bubble.x + "_" + bubble.y;
        var i = path.length - 1;
        var color = bubble.color;
        game.play(name, function () {
            if (i < 0) {
                game.stop(name);
                game.clicked = null;
                me.isMoving = false;
                me.clearLine(target.x, target.y, color, true);
                return;
            }
            me.isMoving = true;
            path.forEach(function (cell) {
                me.setBubble(cell.x, cell.y, null);
            });
            var currentCell = path[i];
            me.setBubble(currentCell.x, currentCell.y, color);
            i--;
        }, 50);
    },
    search: function (x1, y1, x2, y2) {
        var history = [];
        var goalCell = null;
        var me = this;
        getCell(x1, y1, null);
        if (goalCell) {
            var path = [];

for (var i = 0; i < history.length; i++) {
                if (history[i].x == x && history[i].y == y)
                    return;
            }
            var cell = { "x": x, "y": y, child: [], "parent": parent };
            history.push(cell);

if (cell.x == x2 && cell.y == y2) {
                goalCell = cell;
                return cell;
            }
            var child = [];
            var left, top, right, buttom;
            //shortest path
            if (x - 1 >= 0 && me.isEmpty(x - 1, y))
                child.push({ "x": x - 1, "y": y });
            if (x + 1 < me.bubbles.length && me.isEmpty(x + 1, y))
                child.push({ "x": x + 1, "y": y });
            if (y + 1 < me.bubbles.length && me.isEmpty(x, y + 1))
                child.push({ "x": x, "y": y + 1 });
            if (y - 1 >= 0 && me.isEmpty(x, y - 1))
                child.push({ "x": x, "y": y - 1 });
            var distance = [];
            for(var i=0;i<child.length;i++){
                var c = child[i];
                if(c){
                    distance.push({"i":i,"d":Math.abs(x2 - c.x) + Math.abs(y2 - c.y)});
                }else{
                    distance.push({"i":i,"d":-1});
                }
            };
            distance.sort(function (a, b) { return a.d - b.d });
            for (var i = 0; i < child.length; i++) {
                var d = distance[i];
                var c = child[d.i];
                if (c) cell.child.push(getCell(c.x, c.y, cell));
            }
            return cell;
        }
    },
    getEmptyBubbles: function () {
        var empties = [];
        this.bubbles.forEach(function (row) {
            row.forEach(function (bubble) {
                if (!bubble.color) {
                    empties.push(new Bubble(bubble.x, bubble.y));
                }
            });
        });
        if (empties.length <= 3) {
            return [];
        }
        var result = [];
        var useds = [];
        for (var i = 0; i < empties.length; i++) {
            if (result.length == 3) {
                break;
            }
            var isUsed = false;
            var ra = game.getRandom(empties.length);
            for (var m = 0; m < useds.length; m++) {
                isUsed = ra === useds[m];
                if (isUsed) break;
            }
            if (!isUsed) {
                result.push(empties[ra]);
                useds.push(ra);
            }
        }
        //console.log(useds);
        return result;
    },
    addBubble: function (bubble) {
        var thisBubble = this.getBubble(bubble.x, bubble.y);
        thisBubble.color = bubble.color;
    },
    setBubble: function (x, y, color) {
        this.getBubble(x, y).color = color;
    },
    getBubble: function (x, y) {
        if (x < 0 || y < 0 || x > game.cellCount || y > game.cellCount) return null;
        return this.bubbles[y][x];
    },
    isEmpty: function (x, y) {
        var bubble = this.getBubble(x, y);
        return !bubble.color;
    },
};
var Cell = function (x, y) {
    this.x = x;
    this.y = y;
}
var Bubble = function (x, y, color) {
    this.x = x;
    this.y = y;
    this.px = game.cellWidth * (this.x + 1) - game.cellWidth / 2;
    this.py = game.cellWidth * (this.y + 1) - game.cellWidth / 2;
    this.color = color;
    this.light = 10;
};
Bubble.prototype.draw = function () {
    if (!this.color) {
        return;
    }
    var ctx = game.ctx;
    ctx.beginPath();
    //console.log("x:" + px + "y:" + py);
    var gradient = ctx.createRadialGradient(this.px - 5, this.py - 5, 0, this.px, this.py, this.light);
    gradient.addColorStop(0, "white");
    gradient.addColorStop(1, this.color);
    ctx.arc(this.px, this.py, 11, 0, Math.PI * 2);
    ctx.strokeStyle = this.color;
    ctx.fillStyle = gradient;
    ctx.fill();
    ctx.stroke();
};
Bubble.prototype.play = function () {
    var me = this;
    var isUp = true;
    game.play("light_" + this.x + "_" + this.y, function () {
        if (isUp) {
            me.light += 3;
        }

if (!isUp) {
            me.light -= 3;
        }
        if (me.light >= 30) {
            isUp = false;
        }
        if (me.light <= 10) {
            isUp = true;
        }
    }, 50);
};
Bubble.prototype.stop = function () {
    //this.light = 10;
    var me = this;
    game.stop("light_" + this.x + "_" + this.y);
    game.play("restore_" + this.x + "_" + this.y, function () {
        if (me.light > 10) {
            me.light--;
        }
        else {
            me.light = 10;
            game.stop("restore_" + me.x + "_" + me.y);
        }
    }, 50);
};
game.start();

编译

CSS

HTML

游戏上方是即将出现的彩色棋子。你可以点中棋盘上的棋子将其移动到随意位置（只要有棋路可通），尽量把同色的棋子连接在一起，达到5个同色棋子连接在一起时，将被一起消除，得分加5.

game

编辑器支持Emmet

快捷键

游戏上方是即将出现的彩色棋子。 你可以点中棋盘上的棋子将其移动到随意位置（只要有棋路可通），尽量把同色的棋子连接在一起，达到5个同色棋子连接在一起时，将被一起消除，得分加5.

game

HTML5/JS 经典的五子棋小游戏

HTML5 Phaser.js 经典弹球消除方块小游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

游戏上方是即将出现的彩色棋子。你可以点中棋盘上的棋子将其移动到随意位置（只要有棋路可通），尽量把同色的棋子连接在一起，达到5个同色棋子连接在一起时，将被一起消除，得分加5.