HTML5 Javascript 五彩连珠网页特效

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 Javascript 五彩连珠-源码Game</title>
</head>
<body>
    <canvas id="canvas" height="400" width="600" style="background: #333;"></canvas>
    <script type="text/javascript">
        var game = {
            canvas: document.getElementById("canvas"),
            ctx: document.getElementById("canvas").getContext("2d"),
            cellCount: 9,
            cellWidth: 30,
            lineCount: 5,
            mode: 7,
            actions: {},
            play: function (name, action, interval) {
                var me = this;
                this.actions[name] = setInterval(function () {
                    action();
                    me.draw();
                }, interval || 50);
            },
            stop: function (name) {
                clearInterval(this.actions[name]);
                this.draw();
            },
            colors: ["red", "#039518", "#ff00dc", "#ff6a00", "gray", "#0094ff", "#d2ce00"],
            start: function () {
                this.map.init();
                this.ready.init();
                this.draw();
                this.canvas.onclick = this.onclick;
            },
            over: function () {
                alert("GAME OVER");
                this.onclick = function () {
                    return false;
                };
            },
            draw: function () {
                this.ctx.clearRect(0, 0, 400, 600);
                this.ctx.save();
                this.map.draw();
                this.ready.draw();
                this.score.draw();
                this.ctx.restore();
            },
            clicked: null,
            isMoving: function () {
                return this.ready.isMoving || this.map.isMoving;
            },
            onclick: function (e) {
                if (game.isMoving()) {
                    return;
                }
                var px = (e.offsetX || (e.clientX - game.canvas.offsetLeft)) - game.map.startX;
                var py = (e.offsetY || (e.clientY - game.canvas.offsetTop)) - game.map.startY;
                if (px < 0 || py < 0 || px > game.map.width || py > game.map.height) {
                    return;
                }
                var x = parseInt(px / game.cellWidth);
                var y = parseInt(py / game.cellWidth);

game.score = {
            basic: 0,
            operate: 0,
            star1: 0,
            star2: 0,
            boom: 0,
            draw: function () {
                var startX = game.cellWidth * 10 + game.map.startX;
                var startY = game.map.startY;
                var ctx = game.ctx;
                ctx.save();
                ctx.translate(startX, startY);
                ctx.clearRect(0, 0, 150, 400);
                ctx.strokeStyle = "#456";
                //ctx.strokeRect(0, 0, 150, 200);
                ctx.font = "24px 微软雅黑";
                ctx.fillStyle = "#fefefe";
                ctx.fillText("score:" + (this.basic * 5 + this.star1 * 8 + this.star2 * 10 + this.boom * 20), 0, 30);
                ctx.stroke();
                ctx.restore();
            },
            addScore: function (length) {
                switch (length) {
                    case 5:
                        this.basic++;
                        break;
                    case 6:
                        this.star1++;
                        break;
                    case 7:
                        this.star2++;
                        break;
                    default:
                        this.boom++;
                        break;
                }
                this.draw();
                console.log(this.score);
            },
        };

game.ready = {
            startX: 40.5,
            startY: 20.5,
            width: game.cellWidth * 3,
            height: game.cellWidth,
            bubbles: [],
            init: function () {
                this.genrate();
                var me = this;
                me.flyin();
            },
            genrate: function () {
                for (var i = 0; i < 3; i++) {
                    var color = game.colors[game.getRandom(game.mode)];
                    this.bubbles.push(new Bubble(i, 0, color));
                }
                //console.log(this.bubbles);
            },
            draw: function () {
                var ctx = game.ctx;
                ctx.save();
                ctx.translate(this.startX, this.startY);
                ctx.beginPath();
                ctx.strokeStyle = "#555";
                ctx.strokeRect(0, 0, this.width, this.height);
                ctx.stroke();
                //绘制准备的泡
                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];
                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 = 2;
                        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 (current.px == x2 && current.py == 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;
                };
                //给定一个坐标，看是否有满足的line可以被消除
                //4根线 一  | / \
                //横线
                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) {

var p1 = i * game.cellWidth;;
                    ctx.moveTo(p1, 0);
                    ctx.lineTo(p1, this.height);

var p2 = i * game.cellWidth;
                    ctx.moveTo(0, p2);
                    ctx.lineTo(this.width, p2);
                }
                ctx.strokeStyle = "#555";
                ctx.stroke();

//绘制子元素（所有在棋盘上的泡）
                this.bubbles.forEach(function (row) {
                    row.forEach(function (bubble) {
                        bubble.draw();
                    });
                });
                ctx.restore();
            },
            isMoving: false,
            move: function (bubble, target) {
                var path = this.search(bubble.x, bubble.y, target.x, target.y);
                if (!path) {
                    //显示不能移动s
                    alert("过不去");
                    return;
                }
                //map开始播放当前泡的移动效果
                //两种实现方式，1、map按路径染色，最后达到目的地 2、map生成一个临时的bubble负责展示，到目的地后移除
                //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);
                        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 = [];

var cell = goalCell;
                    while (cell) {
                        path.push({ "x": cell.x, "y": cell.y });
                        cell = cell.parent;
                    }

return path;
                }
                return null;

function getCell(x, y, parent) {
                    if (x >= me.bubbles.length || y >= me.bubbles.length)
                        return;
                    if (x != x1 && y != y2 && !me.isEmpty(x, y))
                        return;

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;
                    }

if (x > x2) {
                        if (y > y2)
                            child = [left, top, right, buttom];
                        else if (y < y2)
                            child = [left, buttom, right, top];
                        else
                            child = [left, top, right, buttom];
                    }
                    else if (x < x2) {
                        if (y > y2)
                            child = [right, top, left, buttom];
                        else if (y < y2)
                            child = [right, buttom, left, top];
                        else
                            child = [right, top, left, buttom];
                    }
                    else if (x == x2) {
                        if (y > y2)
                            child = [top, left, right, buttom];
                        else if (y < y2)
                            child = [buttom, left, right, top];
                    }

for (var i = 0; i < child.length; i++) {
                        var c = child[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 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();
    </script>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

HTML5 Javascript 五彩连珠网页特效

分类

游戏

描述

一款HTML5网页游戏效果，运行效果时请不要使用IE9以下版本，最好使用火狐或Google浏览器或Opera浏览器。本游戏效果相当界面设计挺漂亮，五彩连珠同时也是一款经常玩的小游戏，你可以一边玩，一边研究一下HTML5啦！