找回密码
当前位置：前端开发者 > HTML > 正文

H5 canvas 消消乐小游戏

2018-10-24 分类：HTML 阅读(1730) 评论(0)
原生app的前端开发框架
十大前端开发框架下
mvc 前端开发框架

主要是3个步骤：
1、画格子；
2、接连区域查找（递归）；
3、清除选中区域并位移（这块真是花费了我好多时间，感觉位移后，格子好像不一样了，不知道是不是错觉。
）

存在问题：目前有一列全部点完后，两侧还不能合并。

玩法：在pc端鼠标双击>=2相同颜色的格子，消除的格子越多越好。

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no” />
    <title>仿消消看小游戏</title>
    <style>
        html,body{
padding:0;
margin:0;
}
</style>
</head>
<body>
    <canvas id=”playground”></canvas>
    <script type=”text/javascript”>
        var canvas = document.getElementById(“playground”),
            context = canvas.getContext(“2d”),
            windowWt = window.innerWidth,
            windowHt = window.innerHeight;
        var gridSize = 50,
            rows = 0,
            cols = 0,
            gridArr = [],
            gridColor = [“#f0f”, “#0ff”, “#ff0”, “#00f”, “#0f0”, “#f00”, “#a0afcd”];
        var clickArea = [];
        var arrIndex = 0;
        /** [setCanvasSize description]设置画布大小 */
        function setCanvasSize() {
            canvas.width = windowWt;
            canvas.height = windowHt;
            rows = Math.floor(canvas.height / gridSize);
            cols = Math.floor(canvas.width / gridSize);
        }
        /** [setGridColor description]格子随机样式 */
        function setGridColor() {
            var len = gridColor.length;
            var rd = Math.floor(Math.random(0, 1) * len);
            return {
                color: gridColor[rd],
                mark: rd
            };
        }
        /** [createGrids description] 创建个字数组*/
        function createGrids() {
            for (var i = 0; i < rows; i++) {
                for (var j = 0; j < cols; j++) {
                    var style = setGridColor();
                    gridArr.push({
                        x: j * gridSize,
                        y: i * gridSize,
                        color: style.color,
                        mark: style.mark,
                        index: i * cols + j
                    });
                }
            }
        }
        /** [drawGrid description] 绘制矩形*/
        function drawGrid(grid) {
            if (grid) {
                context.beginPath();
                context.rect(grid.x, grid.y, gridSize, gridSize);
                context.fillStyle = grid.color;
                context.fill();
                context.stroke();
            }
        }
        /** [findRoundArea description]查找接壤区域 */
        function findRoundArea(curCol, curRow) {
            arrIndex++;
            if (arrIndex >= gridArr.length – 1) return;
            var index = curRow * cols + curCol;
            var grid = gridArr[index];
            if (!grid) return;
            var mark = grid.mark;
            var left = {},
                right = {},
                top = {},
                bottom = {};
            var arr = [];
            if (curCol > 0) {
                left = gridArr[index – 1] || {};
            }
            if (curCol < cols – 1) {
                right = gridArr[index + 1] || {};
            }
            if (curRow > 0) {
                top = gridArr[index – cols] || {};
            }
            if (curRow < rows – 1) {
                bottom = gridArr[index + cols] || {};
            }
            if (mark === left.mark) {
                if (!isInArray(left)) {
                    arr.push(left);
                }
            }
            if (mark === right.mark) {
                if (!isInArray(right)) {
                    arr.push(right);
                }
            }
            if (mark === top.mark) {
                if (!isInArray(top)) {
                    arr.push(top);
                }
            }
            if (mark === bottom.mark) {
                if (!isInArray(bottom)) {
                    arr.push(bottom);
                }
            }
            if (arr.length > 0) {
                if (!isInArray(grid)) {
                    clickArea.push(grid);
                }
                for (var i = 0; i < arr.length; i++) {
                    var curX = arr[i].x / gridSize,
                        curY = arr[i].y / gridSize;
                    clickArea.push(arr[i]);
                    findRoundArea(curX, curY);
                }
            }
        }
        /** [clearGridArea description] 清除接壤区域*/
        function clearGridArea() {
            if (clickArea.length) {
                for (var i = 0; i < clickArea.length; i++) {
                    var row = clickArea[i].y / gridSize;
                    var col = clickArea[i].x / gridSize;
                    while (row >= 0) {
                        var curIndex = row * cols + col;
                        if (row != 0) {
                            var index = (row – 1) * cols + col;
                            var top = gridArr[index];
                            if (top) {
                                top.y = row * gridSize;
                                gridArr[curIndex] = top;
                            } else {
                                gridArr[curIndex] = null;
                            }
                        } else {
                            gridArr[col] = null;
                        }
                        row–;
                    }
                }
            }
            clickArea = [];
        }
        /** [isInArray description]判断是否在区域数组内 */
        function isInArray(item) {
            var temp = false;
            for (var i = 0; i < clickArea.length; i++) {
                if (item == clickArea[i]) {
                    temp = true;
                    break;
                }
            }
            return temp;
        }
        /** [initGrids description]在画布中绘制 */
        function initGrids() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            for (var i = 0; i < gridArr.length; i++) {
                var grid = gridArr[i];
                drawGrid(grid);
            }
        }
        /** [init description]初始化 */
        function init() {
            setCanvasSize();
            createGrids();
            initGrids();
            canvas.addEventListener(“dblclick”, function (e) {
                var x = e.clientX,
                    y = e.clientY;
                var curRow = Math.floor(y / gridSize),
                    curCol = Math.floor(x / gridSize);
                findRoundArea(curCol, curRow);
                clearGridArea();
                initGrids();
            });
        }
        init();
    </script>
    <!– <script src=”./js/game.js”></script> –>
</body>
</html>
h5游戏开发前端框架
移动web前端js开发框架
前端 ui框架开发教程
赞(0)
前端开发者 » H5 canvas 消消乐小游戏
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论