js实现消灭星星(web简易版)-前端开发

让我来详细讲解JS实现消灭星星（web简易版）的攻略。

让我来详细讲解JS实现消灭星星（web简易版）的攻略。

简介

消灭星星是一款非常经典的益智游戏，它将星星消除为游戏目标。在这个web简易版中，我们需要使用JavaScript语言来实现星星的判断和消除。

技术实现

我们需要使用以下技术来实现这个游戏：

1. HTML5和CSS3

我们使用HTML5和CSS3来创建游戏界面和样式，比如星星的样式、背景图、游戏面板的布局等。

2. JavaScript

我们使用JavaScript来控制星星的判断和消除，实现游戏交互，比如点击星星时的效果、判断一排星星是否连续等。

3. jQuery

我们使用jQuery库来简化JavaScript代码，使得代码更加易读易懂。

游戏规则

玩家通过点击星星来消除它们，每次消除会得到相应的分数。一排中有3个或以上连续的星星将会被消除，每个消灭的星星将会对你的分数造成影响。玩家需要尽量消灭更多的星星来得到更高的分数。当星星堆满时，游戏结束。

JS的实现

我们需要用JS来实现以下几点：

1. 绘制星星

我们需要将每个星星绘制在游戏面板上。在JS代码中，我们需要生成一个星星数组，然后使用循环遍历生成这些星星元素，同时，我们需要使用CSS3来实现星星的样式，比如颜色、大小等。

以下是一个生成星星的代码示例：

var stars = [{
    x: 0,
    y: 0,
    color: "#f00"
}, {
    x: 1,
    y: 0,
    color: "#f00"
}, {
    x: 2,
    y: 0,
    color: "#f00"
}, {
    x: 3,
    y: 0,
    color: "#f00"
}, {
    x: 4,
    y: 0,
    color: "#f00"
}];

var starHeight = 50;
var starWidth = 50;

for (var i = 0; i < stars.length; i++) {
    var star = $("<div>").css({
        "position": "absolute",
        "left": stars[i].x * starWidth + "px",
        "top": stars[i].y * starHeight + "px",
        "width": starWidth + "px",
        "height": starHeight + "px",
        "background": stars[i].color
    }).appendTo($("#game_area"));
}

2. 星星消除

当玩家点击一个星星时，我们需要判断它周围的星星是否能和它成为一排，然后将它们全部消除。我们需要编写一个消除星星的方法，它将会接收一个星星元素，然后判断它周围的星星是否处于同一排中，如果是，就将它们全部消除。

以下是一个消除星星的代码示例：

function destroyStars(elem) {
    var curColor = elem.css("background-color");
    var left = elem.position().left / starWidth;
    var top = elem.position().top / starHeight;

    // 找到左边相同的星星
    var leftStars = getLeftStars(left, top, curColor);
    // 找到右边相同的星星
    var rightStars = getRightStars(left, top, curColor);
    // 找到上面相同的星星
    var topStars = getTopStars(left, top, curColor);
    // 找到下面相同的星星
    var bottomStars = getBottomStars(left, top, curColor);

    // 可以消除的星星数组
    var destroyArray = [];

    // 添加元素到达数组中
    destroyArray.push(elem);
    $.merge(destroyArray, leftStars);
    $.merge(destroyArray, rightStars);
    $.merge(destroyArray, topStars);
    $.merge(destroyArray, bottomStars);

    // 消除所有元素
    destroyElem(destroyArray);
}

3. 分数计算

在玩家消除星星时，我们需要根据消除的星星数量来计算其得分。我们需要记录玩家的得分，并在每次消除星星后更新它。当玩家达到一定的分数时，我们将为他们提供额外的奖励。

以下是一个计算分数的代码示例：

function updateScore(points) {
    curScore += points;
    $('#score_area').text("Score:" + curScore);

    // 奖励
    if (curScore >= 10000) {
        alert("恭喜你获得了额外的奖励！");
    }
}

示例

以下是完整的示例代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JS消灭星星</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        #game_area {
            width: 250px;
            height: 500px;
            position: relative;
            background: url(bg.jpg) no-repeat;
        }
        .star {
            position: absolute;
            width: 50px;
            height: 50px;
            border-width: 2px;
            border-color: #fff;
            background-color: rgba(0, 255, 0, 0.5);   
        }
    </style>
    <script src="jquery.min.js"></script>
    <script type="text/javascript">
        var starWidth = 50;
        var starHeight = 50;
        var curScore = 0;
        var stars = [];

        $(function () {
            // 初始化星星数组
            initStars();

            // 事件绑定
            $(".star").click(function () {
                var star = $(this);
                if (star.hasClass("selected")) {
                    destroyStars(star);
                    updateScore(10);
                } else {
                    $(".selected").removeClass("selected");
                    star.addClass("selected");
                }
            })
        });

        function initStars() {
            for (var j = 0; j < 10; j++) {
                for (var i = 0; i < 5; i++) {
                    stars.push({
                        x: i,
                        y: j,
                        color: getRandomColor()
                    })
                }
            }

            for (var i = 0; i < stars.length; i++) {
                var star = $("<div>").attr("id", "star_" + i)
                    .addClass("star")
                    .css({
                        "left": stars[i].x * starWidth + "px",
                        "top": stars[i].y * starHeight + "px",
                        "background-color": stars[i].color
                    })
                    .appendTo($("#game_area"));
            }
        }

        function getRandomColor() {
            return "rgb(" + getRandomNum(0, 255) + ", " + getRandomNum(0, 255) + ", " + getRandomNum(0, 255) + ")";
        }

        function getRandomNum(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }

        function getLeftStars(x, y, color) {
            var result = [];
            for (var i = x - 1; i >= 0; i--) {
                if ($("#star_" + (y * 5 + i)).css("background-color") !== color) {
                    break;
                } else {
                    result.push($("#star_" + (y * 5 + i)));
                }
            }
            return result;
        }

        function getRightStars(x, y, color) {
            var result = [];
            for (var i = x + 1; i < 5; i++) {
                if ($("#star_" + (y * 5 + i)).css("background-color") !== color) {
                    break;
                } else {
                    result.push($("#star_" + (y * 5 + i)));
                }
            }
            return result;
        }

        function getTopStars(x, y, color) {
            var result = [];
            for (var i = y - 1; i >= 0; i--) {
                if ($("#star_" + (i * 5 + x)).css("background-color") !== color) {
                    break;
                } else {
                    result.push($("#star_" + (i * 5 + x)));
                }
            }
            return result;
        }

        function getBottomStars(x, y, color) {
            var result = [];
            for (var i = y + 1; i < 10; i++) {
                if ($("#star_" + (i * 5 + x)).css("background-color") !== color) {
                    break;
                } else {
                    result.push($("#star_" + (i * 5 + x)));
                }
            }
            return result;
        }

        function destroyStars(elem) {
            var curColor = elem.css("background-color");
            var left = elem.position().left / starWidth;
            var top = elem.position().top / starHeight;

            var leftStars = getLeftStars(left, top, curColor);
            var rightStars = getRightStars(left, top, curColor);
            var topStars = getTopStars(left, top, curColor);
            var bottomStars = getBottomStars(left, top, curColor);

            var destroyArray = [];

            destroyArray.push(elem);
            $.merge(destroyArray, leftStars);
            $.merge(destroyArray, rightStars);
            $.merge(destroyArray, topStars);
            $.merge(destroyArray, bottomStars);

            destroyElem(destroyArray);
        }

        function destroyElem(arr) {
            for (var i = 0; i < arr.length; i++) {
                arr[i].fadeOut("fast", function () {
                    $(this).remove();
                });

                var index = parseInt(arr[i].attr("id").split("_")[1]);
                stars.splice(index, 1);
            }

            updateScore(arr.length * 10);
        }

        function updateScore(points) {
            curScore += points;
            $('#score_area').text("得分:" + curScore);

            if (curScore >= 10000) {
                alert("恭喜您获得额外的奖励！");
            }
        }
    </script>
</head>
<body>
    <div id="score_area">得分:0</div>
    <div id="game_area"></div>
</body>
</html>