ActionScript计算器开发：按数位从数组调用鱼形符号展示数字

核心优化思路是把重复的按钮逻辑抽离，统一做数位-鱼数组的映射、数位坐标配置，避免给0-9每个按钮单独写冗余逻辑，同时修正原有代码数位匹配顺序错误、边界判断缺失的问题。

1 基础配置修正与统一映射 #

首先修正原有代码里的无效写法，把数位对应关系、每个数位的鱼形展示坐标做统一配置，后续调整位置、调整数位顺序只需要改配置项即可：

• 修正原代码中Math.max单参数无效的问题，直接定义数值范围
• 新增输入框激活状态切换逻辑，点击哪个输入框就往哪个输入框输数字
• 按输入顺序（从左到右输入的第1位到第6位）映射对应的鱼形数组，这里默认按「输入最左侧为十万位、最右侧为个位」的6位数字规则匹配，如果需要调整数位顺序（比如把最左侧设为百万位），直接调整digitArrays里的数组顺序即可
• 预设每个数位的鱼形展示坐标，可根据实际UI调整x/y值
• 新增数组存储已经显示的鱼形实例，避免重复创建、元素重叠

这部分的代码如下：

// 基础配置
var switchBox:String = "num_txt1";
var signSwitcher:String = "";
const MIN_NUM:Number = 900000;
const MAX_NUM:Number = 999999;
const MAX_INPUT_LENGTH:int = 6; // 最大输入6位

// 输入框基础样式
num_txt1.border = false;
num_txt2.border = false;
num_txt1.restrict = "0-9";
num_txt2.restrict = "0-9";

// 输入框点击切换激活状态
num_txt1.addEventListener(MouseEvent.CLICK, switchActiveInput);
num_txt2.addEventListener(MouseEvent.CLICK, switchActiveInput);
function switchActiveInput(e:MouseEvent):void {
    switchBox = e.currentTarget.name;
}

// 数位-鱼形数组映射：索引0对应输入的第1位（最左侧），索引5对应输入的第6位（最右侧/个位）
// 可根据实际数位顺序调整数组排列
var digitArrays:Array = [
    hundredthousandsArray, // 第1位：十万位
    tenthousandsArray,     // 第2位：万位
    thousandsArray,        // 第3位：千位
    hundredsArray,         // 第4位：百位
    tensArray,            // 第5位：十位
    onesArray             // 第6位：个位
];

// 每个数位对应的鱼形展示坐标，按UI实际位置调整即可
var digitPositions:Array = [
    {x:56.05, y:56.05},  // 第1位坐标
    {x:106.05, y:56.05}, // 第2位坐标
    {x:156.05, y:56.05}, // 第3位坐标
    {x:206.05, y:56.05}, // 第4位坐标
    {x:256.05, y:56.05}, // 第5位坐标
    {x:306.05, y:56.05}  // 第6位坐标（原代码里个位的位置）
];

// 存储当前显示的鱼形实例，key为输入框名+数位索引，value为鱼实例
var activeFishMap:Object = new Object();

// 原有预设鱼数组保留
var onesArray:Array = [fish1, fish2, fish3, fish4, fish5, fish6, fish7, fish8, fish9];
var tensArray:Array = [fish10, fish20, fish30, fish40, fish50, fish60, fish70, fish80, fish90];
var hundredsArray:Array = [fish100, fish200, fish300, fish400, fish500, fish600, fish700, fish800, fish900];
var thousandsArray:Array = [fish1k, fish2k, fish3k, fish4k, fish5k, fish6k, fish7k, fish8k, fish9k];
var tenthousandsArray:Array = [fish10k, fish20k, fish30k, fish40k, fish50k, fish60k, fish70k, fish80k, fish90k];
var hundredthousandsArray:Array = [fish100k, fish200k, fish300k, fish400k, fish500k, fish600k, fish700k, fish800k, fish900k];
var millionsArray:Array = [fish1m, fish2m, fish3m, fish4m, fish5m, fish6m, fish7m, fish8m, fish9m];

2 抽离通用数字输入逻辑 #

把所有数字按键的公共逻辑抽成一个通用函数，不管按哪个数字、在哪个输入框输入，都走同一套逻辑，避免重复代码：

1. 校验当前激活输入框的长度是否达到上限，达到上限直接不响应
2. 把按下的数字拼接到当前输入框的文本末尾
3. 计算当前刚输入的数位索引（输入前的文本长度就是当前位的索引，比如输入前文本是空，长度0，对应第1位也就是索引0）
4. 清空当前数位之前显示的鱼形元素，避免重叠
5. 从对应数位的数组中取出当前数字对应的鱼实例（数字n对应数组索引n-1，因为数组从0开始计数）
6. 把鱼实例移动到当前数位的预设坐标，添加到显示列表
7. 播放鱼的开场动画
8. 把当前鱼实例存到映射表中，方便后续清空/替换

代码如下：

/**
 * 通用数字输入处理
 * @param num 按下的数字值 0-9
 */
function handleNumberInput(num:int):void {
    var targetTxt:TextField = null;
    // 判断当前激活的输入框
    if(switchBox == "num_txt1") {
        targetTxt = num_txt1;
    } else {
        targetTxt = num_txt2;
    }
    // 超过最大输入长度直接返回
    if(targetTxt.text.length >= MAX_INPUT_LENGTH) return;

    // 拼接数字到输入框
    var currentLen:int = targetTxt.text.length;
    targetTxt.appendText(String(num));

    // 数位索引：刚输入的这一位是第currentLen位（0开始）
    var digitIndex:int = currentLen;
    var fishKey:String = switchBox + "_" + digitIndex;

    // 先移除当前数位之前显示的鱼
    if(activeFishMap[fishKey] != null) {
        removeChild(activeFishMap[fishKey]);
        activeFishMap[fishKey] = null;
    }

    // 数字0不对应鱼形元素直接跳过（如果0需要对应鱼自行加逻辑）
    if(num == 0) return;

    // 从对应数组取鱼实例
    var targetArray:Array = digitArrays[digitIndex];
    var targetFish:MovieClip = targetArray[num - 1];
    // 读取当前数位的坐标
    var pos:Object = digitPositions[digitIndex];
    targetFish.x = pos.x;
    targetFish.y = pos.y;
    // 加到显示层
    addChild(targetFish);
    // 播放开场动画
    var sfish:FishOpening = new FishOpening();
    sfish.play();
    // 存入映射表
    activeFishMap[fishKey] = targetFish;
}

3 绑定所有数字按键事件 #

不需要给每个按钮单独写点击处理函数，直接绑定事件时传入对应的数字即可，0-9按键绑定逻辑统一：

// 数字0-9按键绑定
num0_btn.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void { handleNumberInput(0); });
num1_btn.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void { handleNumberInput(1); });
num2_btn.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void { handleNumberInput(2); });
num3_btn.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void { handleNumberInput(3); });
num4_btn.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void { handleNumberInput(4); });
num5_btn.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void { handleNumberInput(5); });
num6_btn.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void { handleNumberInput(6); });
num7_btn.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void { handleNumberInput(7); });
num8_btn.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void { handleNumberInput(8); });
num9_btn.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void { handleNumberInput(9); });

可选补充逻辑 #

如果需要做清空、退格功能，可以加对应的处理函数：

// 清空指定输入框的所有鱼
function clearFishForInput(inputName:String):void {
    for(var key:String in activeFishMap) {
        if(key.indexOf(inputName) == 0) {
            removeChild(activeFishMap[key]);
            delete activeFishMap[key];
        }
    }
}

如果需要调整数位顺序，比如要支持7位到百万位，只需要把MAX_INPUT_LENGTH改成7，在digitArrays头部加入millionsArray，在digitPositions里加一个百万位的坐标即可。

内容的提问来源于stack exchange，提问作者Isaac Yeap Jie Ling