AngularJS 1.x 游戏开发求助：如何创建带颜色与ID标识的按钮

没问题，我来帮你搞定这个按钮游戏的实现，从创建按钮到完整的点击规则都给你安排明白，直接看代码和解释就行：

完整实现代码 #

<html ng-app="Bluebox">
<head>
    <title>BlueBox</title>
    <script src="angular.js"></script>
    <style>
        .game-button {
            width: 60px;
            height: 60px;
            margin: 5px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
        }
        .status-message {
            margin: 20px 0;
            font-size: 18px;
            font-weight: bold;
        }
    </style>
</head>
<body ng-controller="GameController">
    <div class="status-message">
        剩余点击次数: {{clickCount}} | {{gameStatus}}
    </div>
    <div>
        <!-- 循环生成50个按钮 -->
        <button 
            class="game-button"
            ng-repeat="btn in buttonList"
            ng-style="{'background-color': btn.currentColor}"
            ng-click="handleButtonClick(btn)"
            ng-disabled="gameEnded"
        >
            ID: {{btn.id}}
        </button>
    </div>

    <script>
        angular.module('Bluebox', [])
        .controller('GameController', function($scope) {
            // 初始化游戏状态
            $scope.clickCount = 3;
            $scope.gameStatus = '';
            $scope.gameEnded = false;
            // 预设初始颜色和切换颜色（可以根据需求修改）
            const INIT_COLOR = '#cccccc'; // 初始灰色
            const TOGGLE_COLOR = '#007bff'; // 切换后的蓝色

            // 生成50个按钮的数据
            $scope.buttonList = [];
            for (let i = 1; i <= 50; i++) {
                $scope.buttonList.push({
                    id: i,
                    currentColor: INIT_COLOR,
                    toggleColor: TOGGLE_COLOR
                });
            }

            // 按钮点击处理函数
            $scope.handleButtonClick = function(btn) {
                // 如果游戏已结束，直接返回
                if ($scope.gameEnded) return;

                // 切换按钮颜色
                btn.currentColor = btn.currentColor === INIT_COLOR ? btn.toggleColor : INIT_COLOR;

                // 减少点击次数
                $scope.clickCount--;

                // 判断是否点击了第25个按钮
                if (btn.id === 25) {
                    $scope.gameStatus = '🎉 恭喜你获胜！';
                    $scope.gameEnded = true;
                    return;
                }

                // 判断点击次数是否用完
                if ($scope.clickCount === 0) {
                    $scope.gameStatus = '😔 点击次数用完，游戏失败！';
                    $scope.gameEnded = true;
                }
            };
        });
    </script>
</body>
</html>

关键部分解释 #

• 模块与控制器：首先定义了Bluebox模块和GameController控制器，这是AngularJS 1.x的核心结构，所有游戏逻辑都在控制器里处理。
• 按钮数据生成：用for循环创建了50个按钮对象，每个对象包含id、currentColor（当前显示颜色）、toggleColor（切换后的目标颜色），你可以随意修改这两个颜色值。
• 视图渲染：通过ng-repeat循环遍历buttonList数组，自动生成50个按钮，用ng-style动态绑定背景色，ng-click绑定点击事件，ng-disabled在游戏结束后禁用所有按钮。
• 点击逻辑：
  • 每次点击先切换按钮颜色
  • 减少剩余点击次数
  • 检查是否点击了第25个按钮，若是则触发获胜状态
  • 若点击次数用完，则触发失败状态，同时禁用所有按钮

你只需要确保angular.js的路径正确，直接运行这个页面就能看到效果了，要是需要调整颜色、按钮样式或者规则，直接修改对应的参数就行！

内容的提问来源于stack exchange，提问作者java_jazz