將改進混亂時鐘的網頁版

分享和讨论Javascript相关的话题
回复
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5277
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 176 次
被圈友点赞: 204 次
联系:

Re: 將改進混亂時鐘的網頁版

帖子 ejsoon »

當一方放棄行動時,lastMovePiece應該等於0而不是等於null。找到所有,相關代碼並更正。

gemini fast:

代码: 全选

要實現當玩家放棄行動(跳過回合)時將 `lastMovedPiece` 設為 `0` 的邏輯,我們需要針對初始化解析、放棄行動的處理函數以及狀態重置這幾個地方進行同步更正。

以下是針對 `chaosclockgame202604220741.js` 檔案中需要修改的相關代碼段落:

### 1. 修改初始化解析邏輯 (`parseComplexCkvalue`)
確保從 `ckvalue` 載入時,若無指定則預設為 `0`。

```javascript
parseComplexCkvalue(ckvalue) {
  const segments = ckvalue.split(';');
  // ... (盤面解析部分保持不變)

  // 解析目前回合 (第二段)
  if (segments.length > 1) {
    this.turn = parseInt(segments[1].trim());
  } else {
    this.turn = 1; // 預設乙方
  }
  this.initialPlayer = this.turn;

  // 3. 解析最後行動的棋子 (第三段)
  // 更正:如果缺少或為空,預設為 0
  if (segments.length > 2 && segments[2].trim() !== '') {
    this.lastMovedPiece = parseInt(segments[2].trim());
  } else {
    this.lastMovedPiece = 0;
  }

  this.renderInitialState();
}
```

---

### 2. 修改放棄行動處理 (`handleCancelClick`)
當玩家點擊取消/放棄區域時,明確將 `lastMovedPiece` 設為 `0`。

```javascript
async handleCancelClick() {
  if (this.state !== 'playing' || this.isAnimating) return;
  this.consecutiveSkips++;
  
  // 更正:當放棄行動時,將最後移動棋子設為 0
  this.lastMovedPiece = 0; 
  this.recordMoveStr('0');

  // ... (時針轉動與動畫邏輯保持不變)

  if (this.consecutiveSkips >= 2) {
    this.endGame(2);
  } else {
    this.switchTurn(false);
  }

  this.saveState();
}
```

---

### 3. 修改遊戲重置邏輯 (`restartGame`)
確保重新開始遊戲時,狀態回到 `0` 而非 `null`。

```javascript
restartGame() {
  this.btnRestart.style.display = 'none';
  this.statusOutput.textContent = '等待開始';
  this.minuteRotation += 180;
  this.hourRotation = -90;
  this.updatePointersRealtime();

  this.state = 'waiting';
  this.moveSequence = [];
  this.currentTurnMoves = [];
  this.consecutiveSkips = 0;
  
  // 更正:重置為 0
  this.lastMovedPiece = 0; 
  this.isYiFinalTurn = false;

  // ... (後續初始化邏輯保持不變)
}
```

---

### 4. 修改輔助解析邏輯 (`parseInitialData`)
此方法在代碼末尾重複定義了類似的功能,建議一併更正以保持一致性。

```javascript
parseInitialData(ckvalue) {
  // ... (盤面解析部分保持不變)

  // 3. 解析上一步剛走完的棋子
  if (lastStr && lastStr.trim() !== '') {
    const lastMoves = lastStr.split(',').map(Number);
    this.lastMovedPiece = lastMoves[lastMoves.length - 1];
  } else {
    // 更正:預設改為 0
    this.lastMovedPiece = 0; 
  }
}
```

### 重點更動說明:
* **統一性**:將所有 `this.lastMovedPiece` 出現 `null` 的地方改為 `0`。
* **規則銜接**:當值為 `0` 時,`handlePieceClick` 中的 `if (pieceValue === this.lastMovedPiece) return;` 判定將失效(因為沒有棋子編號為 0),這符合「放棄行動後,下一位玩家不受任何棋子移動限制」的規則。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5277
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 176 次
被圈友点赞: 204 次
联系:

Re: 將改進混亂時鐘的網頁版

帖子 ejsoon »

當遊戲結束時,如果是ckvalue有值的情況,則不再宣告「遊戲結束」,回退歷史後仍然可以行動。



gemini fast:

代码: 全选

根據你的需求,我們需要調整 `endGame` 邏輯以及棋譜載入後的行為。

核心邏輯在於:如果遊戲是從特定的 `ckvalue`(固定局面模式)啟動,即便達成勝負條件,也不應鎖死遊戲狀態,而是允許玩家透過導航欄回退(loadState)後繼續進行不同的嘗試。

以下是針對 `chaosclockgame202604220741.js` 的修改建議:

### 1. 修改 `endGame` 方法
移除宣告訊息的邏輯,並確保在固定局面模式下,狀態不被永久鎖定。

```javascript
  endGame(resultCode) {
    // 如果是讀檔進來的(非隨機模式),不強制切換到 ended 狀態以允許繼續操作
    if (this.isRandomMode) {
        this.state = 'ended';
    }

    // 1. 紀錄最後一波動作
    if (this.currentTurnMoves.length > 0) {
      this.moveSequence.push(this.currentTurnMoves.join('-'));
      this.currentTurnMoves = [];
    }

    // 2. 分針固定順時針轉半圈 (180度)
    this.minuteRotation += 180;

    // 3. 根據結果設定訊息與時針目標角度
    let finalAngle = 0;
    let msg = '';
    if (resultCode === 4) {
      msg = '遊戲結束:乙方獲勝';
      finalAngle = 90;
    } else if (resultCode === 1) {
      msg = '遊戲結束:甲方獲勝';
      finalAngle = 270;
    } else if (resultCode === 3) {
      msg = '遊戲結束:甲乙共贏';
      finalAngle = 360;
    } else {
      msg = '遊戲結束:甲乙同輸';
      finalAngle = 180;
    }

    // 修正:只有在隨機模式(主動遊戲)才宣告「遊戲結束」
    // 如果是 ckvalue 模式,僅更新狀態文字但不鎖死狀態
    if (this.isRandomMode) {
        this.setNormalMessage(msg);
    } else {
        // 固定局面模式下,只顯示勝負結果,不帶「遊戲結束」字樣,且保持 state 為 playing
        this.setNormalMessage(msg.replace('遊戲結束:', ''));
    }

    // 4. 指針動畫邏輯 (保持不變)
    let baseRotation = Math.floor(this.hourRotation / 360) * 360;
    let nextRotation = baseRotation + finalAngle;
    if (nextRotation <= this.hourRotation) {
      nextRotation += 360;
    }
    this.hourRotation = nextRotation;
    this.updatePointersRealtime();

    // 5. 顯示 UI 按鈕 (保持不變)
    if (this.isRandomMode) {
      this.btnRestart.style.display = 'inline-block';
      this.btnRandom.style.display = 'inline-block';
    }

    // 6. 輸出棋譜 (保持不變)
    const finalResult = this.initialPlayer === 1 ? resultCode : resultCode === 4 ? 1 : resultCode === 1 ? 4 : resultCode;
    const record = `${this.initialBoardStr};${this.initialPlayer};${this.moveSequence.join(',')};${finalResult}`;
    console.log('棋譜:', record);
  }
```

---

### 2. 修改 `loadState` 方法
確保從歷史紀錄回退時,狀態會重新設為 `playing`,讓玩家可以重新行動。

```javascript
  loadState(index) {
    if (index < 0 || index >= this.activePath.length) return;
    this.historyIndex = index;
    const state = this.activePath[index].state;

    // 核心修正:回退歷史時,將遊戲狀態恢復為 playing
    this.state = 'playing';

    this.board = [...state.board];
    this.hands = { 0: [...state.hands[0]], 1: [...state.hands[1]] };
    // ... (其餘賦值邏輯保持不變)

    this.setNormalMessage(state.statusMsg);
    this.updateHistoryButtons();
    this.updatePieceBorders();
  }
```

### 修改說明:
1.  **狀態鎖定優化**:在 `endGame` 中,透過 `this.isRandomMode` 判斷。若是 `ckvalue` 載入的局面,`this.state` 不會變更為 `ended`(維持 `playing`),這解決了無法繼續行動的問題。
2.  **文字提示精簡**:在固定局面模式下,移除了「遊戲結束」的字眼,改為直接顯示勝負結果(如:「乙方獲勝」)。
3.  **歷史回退激活**:在 `loadState` 加入 `this.state = 'playing'`,確保玩家從任何歷史節點切換回來時,都能立刻重新觸發 `handlePieceClick` 的邏輯。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5277
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 176 次
被圈友点赞: 204 次
联系:

Re: 將改進混亂時鐘的網頁版

帖子 ejsoon »

chaosclockgame202604221531

剛走不能移的提示,甲方不能落雙數子的提示修正,乙走完直接獲勝判定,回退歴史仍然可以繼續行動,第二個分號後面只接一個數字表示最後行動的棋子。
附件
chaosclockgame202604221531.js
(41.92 KiB) 已下载 3 次
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5277
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 176 次
被圈友点赞: 204 次
联系:

Re: 將改進混亂時鐘的網頁版

帖子 ejsoon »

改進:
js中新建一個類,名為「CrackChaosClock」。

建立兩個函式,分別把局面轉成bigint,以及從bigint轉成局面。

局面指的是ckvalue=12,5,1,2,10,7,11,6,3,4,8,9;0;3

其中,第一個分號後面接的是0或1,0表示輪到甲方,1表示輪到乙方。默認乙方。

第二個分號後面接的是一個數字,代表上一步剛走完的棋子。默認是0。

如果只有一個分號或沒有分號,就使用默認值。

把前4*12個位元定義為正位1~12,第49個位元為0或1,指輪到甲方或乙方。

第50~53位元指上一步剛走完的棋子。

倒數四個位元定義當前局面評分:4己贏,3共贏,2同輸,1己輸。

給出一個Input來輸入局面,再給一個確認button,下面再給一個div輸出bigint每個位元是0或1(一共64個位元)。如果input為空則取當前實例的ckvalue。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5277
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 176 次
被圈友点赞: 204 次
联系:

Re: 將改進混亂時鐘的網頁版

帖子 ejsoon »

gemini thinking:

代码: 全选

這是一個非常有意思的擴展需求。將遊戲局面「向量化」或「數字化」是進行 AI 訓練或盤面搜尋(如蒙地卡羅樹搜尋)的第一步。

我為你撰寫了 `CrackChaosClock` 類別,並將其整合到現有的系統中。這個類別專門負責 **位元操作 (Bitwise operations)**,利用 `BigInt` 來處理超過 32 位元的整數。

### 程式碼實現

你可以將以下程式碼加入到你的 `.js` 檔案中,或者放在 `ChaosClock` 類別之後:

```javascript
class CrackChaosClock {
  constructor(mainGameInstance) {
    this.game = mainGameInstance;
    this.initUI();
  }

  initUI() {
    const container = document.createElement('div');
    container.style.cssText = 'margin-top: 20px; padding: 15px; border: 1px dashed #4CAF50; border-radius: 8px; font-family: monospace;';
    
    const title = document.createElement('h3');
    title.textContent = '🛠️ CrackChaosClock 局面解析器';
    title.style.margin = '0 0 10px 0';

    this.input = document.createElement('input');
    this.input.placeholder = '輸入 ckvalue (例如: 12,5...;0;3)';
    this.input.style.width = '80%';
    this.input.style.padding = '5px';

    const btn = document.createElement('button');
    btn.textContent = '轉換為 BigInt';
    btn.style.marginLeft = '10px';
    btn.onclick = () => this.handleConvert();

    this.bitOutput = document.createElement('div');
    this.bitOutput.style.cssText = 'margin-top: 15px; word-break: break-all; background: #f0f0f0; padding: 10px; font-size: 12px; line-height: 1.5;';
    this.bitOutput.innerHTML = '等待輸入...';

    container.appendChild(title);
    container.appendChild(this.input);
    container.appendChild(btn);
    container.appendChild(this.bitOutput);

    // 掛載到遊戲 UI 下方
    this.game.uiContainer.appendChild(container);
  }

  // 1. 從局面字串轉 BigInt
  ckvalueToBigInt(ckvalue) {
    const segments = ckvalue.split(';');
    const board = segments[0].split(',').map(Number);
    const turn = segments[1] !== undefined ? parseInt(segments[1]) : 1; // 預設乙方(1)
    const lastMoved = segments[2] !== undefined ? parseInt(segments[2]) : 0; // 預設0
    const score = segments[3] !== undefined ? parseInt(segments[3]) : 0; // 評分預設0

    let val = 0n;

    // 前 48 位元:12 個位置,每個位置 4 bits (0-12)
    for (let i = 0; i < 12; i++) {
      const piece = BigInt(board[i] || 0);
      val |= (piece << BigInt(i * 4));
    }

    // 第 49 位元:回合 (Bit 48)
    val |= (BigInt(turn & 1) << 48n);

    // 第 50~53 位元:最後移動棋子 (Bit 49-52)
    val |= (BigInt(lastMoved & 0xF) << 49n);

    // 倒數四個位元:評分 (Bit 60-63)
    val |= (BigInt(score & 0xF) << 60n);

    return val;
  }

  // 2. 從 BigInt 轉回局面資料 (回傳物件)
  bigIntToState(val) {
    const board = [];
    for (let i = 0; i < 12; i++) {
      board.push(Number((val >> BigInt(i * 4)) & 0xFn));
    }

    const turn = Number((val >> 48n) & 1n);
    const lastMoved = Number((val >> 49n) & 0xFn);
    const score = Number((val >> 60n) & 0xFn);

    return {
      ckvalue: `${board.join(',')};${turn};${lastMoved}`,
      score: score
    };
  }

  handleConvert() {
    let inputStr = this.input.value.trim();
    
    // 如果輸入為空,嘗試抓取當前遊戲狀態
    if (!inputStr) {
      const currentState = this.game.captureCurrentState();
      // 組合出類似 ckvalue 的字串進行處理
      inputStr = `${currentState.board.map(v => v||0).join(',')};${currentState.turn};${currentState.lastMovedPiece}`;
      this.input.value = inputStr;
    }

    const bigIntValue = this.ckvalueToBigInt(inputStr);
    this.renderBitDisplay(bigIntValue);
  }

  renderBitDisplay(bigInt) {
    let binaryStr = bigInt.toString(2).padStart(64, '0');
    // 反轉字串讓 bit 0 在左邊,或者按一般習慣 bit 63 在左邊?
    // 這裡遵照「第1~48位元」的邏輯,從左向右顯示 0 到 63 位元
    let display = '<strong>64位元二進制佈局 (Bit 0 → 63):</strong><br>';
    
    for (let i = 0; i < 64; i++) {
      const bit = (bigInt >> BigInt(i)) & 1n;
      let color = '#333';
      
      // 為不同區域著色以便辨識
      if (i < 48) color = '#1976D2'; // 盤面 (藍)
      else if (i === 48) color = '#C62828'; // 回合 (紅)
      else if (i >= 49 && i <= 52) color = '#2E7D32'; // 最後棋子 (綠)
      else if (i >= 60) color = '#FB8C00'; // 評分 (橙)

      display += `<span style="color: ${color}">${bit}</span>`;
      if ((i + 1) % 4 === 0) display += ' '; // 每 4 bits 空一格
      if ((i + 1) % 16 === 0) display += '<br>';
    }

    display += `<br><span style="font-size:10px; color:#666;">十進制值: ${bigInt.toString()}</span>`;
    this.bitOutput.innerHTML = display;
  }
}

// 在 ChaosClock 的 init 結尾或是適當時機實例化它
// 修改原有的 ChaosClock setupGame 結尾:
const originalSetupGame = ChaosClock.prototype.setupGame;
ChaosClock.prototype.setupGame = function() {
  originalSetupGame.apply(this);
  this.cracker = new CrackChaosClock(this);
};
```

---

### 設計細節說明

1.  **位元分配佈局:**
    * **Bit 0-47 (4*12)**:存儲盤面 1~12 號位置的內容。每個位置佔 4 bits,足以儲存 0~12($2^4 = 16$)。
    * **Bit 48**:回合標誌。`0` 代表甲方,`1` 代表乙方。
    * **Bit 49-52**:上一步走過的棋子(0~12),佔 4 bits。
    * **Bit 60-63**:局面評分(1~4)。這部分放在 BigInt 的最高位元區域。
2.  **安全性處理:**
    * 使用 `& 0xF` (二進制 `1111`) 或 `& 1` 來確保提取或寫入時不會發生位元溢出干擾到鄰近區域。
    * 使用 `BigInt` 解決 JavaScript 標準 Number 只有 53 位元精度的限制($2^{53}-1$)。
3.  **UI 互動:**
    * 如果 Input 欄位是空的,點擊按鈕會自動抓取你當前正在玩的實體局面。
    * 輸出區域對不同功能的位元進行了 **顏色編碼**,方便你肉眼 debug。

這下子,你已經準備好把混沌鐘的局面轉換成機器學習模型可以吞掉的數字格式了!如果你之後想實做回放 BigInt 局面的功能,只需呼叫 `this.cracker.bigIntToState(val)` 即可。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5277
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 176 次
被圈友点赞: 204 次
联系:

Re: 將改進混亂時鐘的網頁版

帖子 ejsoon »

將cpp文檔中的posValue函式,改寫成js函式,並放進CrackChaosClock中。


gemini thinking:

代码: 全选

這是一個非常實用的函式,在原有的 C++ 程式碼中,`posValue` 的作用是根據目前的盤面狀態(Bitboard)計算一個**權重分值**。它會檢查 1 到 12 號位置,如果該位置上的棋子剛好等於其正位(即 $p = i + 1$),則根據該位置賦予對應的權重。

這個權重的數學邏輯是:
$$Weight = 2^{\lfloor i/2 \rfloor}$$

這意味著位置 1-2 的權重為 1,3-4 為 2,以此類推,11-12 的權重最高,為 32。這通常用於評估局面接近完成的程度。

以下是將其改寫為 JavaScript 並整合進 `CrackChaosClock` 類別的程式碼:

### 改寫後的 CrackChaosClock 類別

```javascript
class CrackChaosClock {
  constructor(mainGameInstance) {
    this.game = mainGameInstance;
    this.initUI();
  }

  // ... 前面已有的 initUI, ckvalueToBigInt, bigIntToState 等函式 ...

  /**
   * 將 C++ 中的 posValue 移植到 JS
   * @param {BigInt} bc - 64位元的局面資料
   * @returns {number} 局面正位分值
   */
  posValue(bc) {
    let sum = 0;
    // 遍歷 12 個時鐘位置 (0~11)
    for (let i = 0; i < 12; i++) {
      // 提取 4 bits 並轉為 Number
      const p = Number((bc >> BigInt(i * 4)) & 0xFn);
      
      // 檢查是否處於正位 (棋子數值等於位置索引 + 1)
      if (p === i + 1) {
        // C++ 中的 (1 << (i / 2)) 
        // 在 JS 中使用 Math.floor 處理整數除法
        sum += (1 << Math.floor(i / 2));
      }
    }
    return sum;
  }

  // 修改原本的 handleConvert,讓它顯示這個分值
  handleConvert() {
    let inputStr = this.input.value.trim();
    
    if (!inputStr) {
      const currentState = this.game.captureCurrentState();
      inputStr = `${currentState.board.map(v => v||0).join(',')};${currentState.turn};${currentState.lastMovedPiece}`;
      this.input.value = inputStr;
    }

    const bigIntValue = this.ckvalueToBigInt(inputStr);
    const scoreValue = this.posValue(bigIntValue); // 呼叫新函式
    
    this.renderBitDisplay(bigIntValue, scoreValue);
  }

  renderBitDisplay(bigInt, posScore) {
    let binaryStr = bigInt.toString(2).padStart(64, '0');
    let display = `<strong>64位元二進制佈局 (Bit 0 → 63):</strong><br>`;
    
    for (let i = 0; i < 64; i++) {
      const bit = (bigInt >> BigInt(i)) & 1n;
      let color = '#333';
      
      if (i < 48) color = '#1976D2'; 
      else if (i === 48) color = '#C62828'; 
      else if (i >= 49 && i <= 52) color = '#2E7D32'; 
      else if (i >= 60) color = '#FB8C00'; 

      display += `<span style="color: ${color}">${bit}</span>`;
      if ((i + 1) % 4 === 0) display += ' '; 
      if ((i + 1) % 16 === 0) display += '<br>';
    }

    display += `<br><div style="margin-top:10px; font-weight:bold; color:#d32f2f;">`;
    display += `當前盤面正位分值 (posValue): ${posScore}`;
    display += `</div>`;
    display += `<span style="font-size:10px; color:#666;">BigInt 十進制: ${bigInt.toString()}</span>`;
    
    this.bitOutput.innerHTML = display;
  }
}
```

---

### 主要改動說明:

1.  **位元運算與 BigInt**:在 C++ 中 `long long` 是 64 位元,JS 必須強制使用 `BigInt`(後綴帶 `n` 的數字)才能保證位移運算的準確性。
2.  **整數除法處理**:C++ 的 `i / 2` 在 `i` 為奇數時會自動無條件捨去(如 $1/2 = 0$)。在 JS 中,`i / 2` 會得到浮點數($0.5$),因此我加上了 `Math.floor()` 以確保邏輯與原版 C++ 完全一致。
3.  **UI 整合**:我在 `renderBitDisplay` 中新增了一個區塊,讓你在點擊轉換按鈕時,能直接看到該局面透過 `posValue` 計算出的分值。

現在當你輸入一個局面字串並按下確認,系統不但會幫你轉成 64 位元二進制,還會告訴你目前的「正位完成度」是多少分了。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5277
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 176 次
被圈友点赞: 204 次
联系:

Re: 將改進混亂時鐘的網頁版

帖子 ejsoon »

如何通過web assemble技術,調用一個cpp生成的二進制文件?這個二進制文件在linux中執行時,可以接收參數,之後輸出結果。

代码: 全选

要通過 WebAssembly (Wasm) 技術調用 C++ 代碼,你不能直接「運行」一個在 Linux 下編譯的 `.out` 或 `ELF` 二進制文件。因為 Wasm 是一個虛擬指令集架構,它需要將 C++ 源碼**重新編譯**為 `.wasm` 格式。

目前最成熟、標準的工具鏈是 **Emscripten**。它可以將 C++ 代碼編譯為 Wasm,並自動生成與 JavaScript 交互所需的「膠水代碼」。

---

## 實作流程

### 1. 安裝編譯工具鏈 (Emscripten)
你需要先安裝 `emsdk`。它可以將你的 C++ 代碼轉換成瀏覽器或 Node.js 能識別的格式。

### 2. 編寫 C++ 代碼
假設你有一個簡單的程序 `main.cpp`,它接收參數並輸出結果:

```cpp
#include <iostream>
#include <string>

int main(int argc, char** argv) {
    if (argc < 2) {
        std::cout << "請提供參數!" << std::endl;
        return 1;
    }
    
    std::string input = argv[1];
    std::cout << "Wasm 接收到參數: " << input << std::endl;
    std::cout << "處理結果: Hello, " << input << " from C++!" << std::endl;
    
    return 0;
}
```

### 3. 編譯為 WebAssembly
使用 `emcc` 命令進行編譯。為了讓它像在命令行一樣接收參數,我們通常編譯為可以在 Node.js 運行或 HTML 加載的模式。

```bash
emcc main.cpp -o program.js -s WASM=1
```
* `program.js`: 自動生成的 JavaScript 膠水代碼,負責加載和運行 `.wasm`。
* `program.wasm`: 實際的二進制邏輯文件。

---

## 4. 調用與傳遞參數

根據你的運行環境,調用方式略有不同:

### 方案 A:在 Node.js 中運行(最接近 Linux 命令行體感)
你可以直接像運行腳本一樣傳遞參數:

```bash
node program.js "MyData"
```
**輸出:**
> Wasm 接收到參數: MyData
> 處理結果: Hello, MyData from C++!

---

### 方案 B:在瀏覽器中調用
在網頁環境中,你不能直接通過 `argc/argv` 傳遞,因為沒有終端。但你可以通過 Emscripten 提供的 `Module` 對象來模擬參數。



**index.html:**
```html
<!DOCTYPE html>
<html>
<body>
    <script src="program.js"></script>
    <script>
        // Emscripten 會自動定義 Module 對象
        var Module = {
            // arguments 數組對應 C++ 中的 argv
            arguments: ["BrowserUser"],
            print: function(text) {
                console.log('C++ 輸出: ' + text);
            }
        };
    </script>
</body>
</html>
```

---

## 重點筆記

* **文件系統 (FS):** 如果你的 Linux 二進制文件涉及讀取本地文件,Wasm 默認是無法訪問你的硬碟的。你需要使用 Emscripten 的 `Virtual File System` (如 `--preload-file`)。
* **性能:** Wasm 的執行速度接近原生 C++(約 80%-90%),非常適合計算密集型任務。
* **內存管理:** Wasm 在一個沙箱化的堆內存中運行,安全性比直接執行 Linux 二進制文件高得多。

> **小建議:** 如果你的 C++ 程序不是一次性執行完就結束(例如你想在 JS 運行期間多次調用某個 C++ 函數),建議使用 `EMSCRIPTEN_KEEPALIVE` 來導出特定的函數,而不是僅僅依賴 `main` 函數。

你目前的 C++ 程序是否涉及複雜的網絡請求或特定硬碟路徑的讀寫?這會影響編譯時的參數配置。
介紹在ubuntu環境下如何安裝emsdk。

代码: 全选

在 Ubuntu 環境下安裝 **Emscripten SDK (emsdk)** 非常直觀,主要通過 Git 進行克隆與配置。以下是標準的安裝步驟:

---

### 1. 安裝前置依賴
在開始之前,確保你的系統已經安裝了編譯所需的基礎工具(Python、Git 和 CMake)。

```bash
sudo apt update
sudo apt install python3 git cmake build-essential
```

---

### 2. 下載 emsdk
建議將 `emsdk` 克隆到你的用戶目錄下(例如 `~/emsdk`):

```bash
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
```

---

### 3. 安裝與激活工具鏈
`emsdk` 是一個管理工具,你需要通過它來下載最新的編譯器組件。

1.  **獲取最新列表**:
    ```bash
    git pull
    ```
2.  **安裝最新版工具**(這一步會下載 LLVM 和二進制文件,耗時視網絡情況而定):
    ```bash
    ./emsdk install latest
    ```
3.  **激活當前版本**:
    ```bash
    ./emsdk activate latest
    ```

---

### 4. 配置環境變量
激活後,你需要將編譯器的路徑加入到當前的 Shell 會話中。

* **臨時生效**(僅限當前終端):
    ```bash
    source ./emsdk_env.sh
    ```

* **永久生效**(建議):
    為了避免每次打開終端都要重新執行 source,可以將其加入到你的 `.bashrc` 文件中:
    ```bash
    echo 'source "/path/to/your/emsdk/emsdk_env.sh"' >> ~/.bashrc
    ```
    *(請將 `/path/to/your/emsdk/` 替換為你實際的安裝路徑)*

---

### 5. 驗證安裝
執行以下命令,如果看到版本信息,說明安裝成功:

```bash
emcc -v
```

---

### 常見問題與技巧

* **權限問題**:盡量不要使用 `sudo` 來運行 `emsdk` 命令,這可能會導致權限混亂。在用戶目錄下操作是最安全的。
* **更新 SDK**:以後如果想更新版本,只需進入目錄執行:
    ```bash
    git pull
    ./emsdk install latest
    ./emsdk activate latest
    source ./emsdk_env.sh
    ```
* **Python 版本**:Emscripten 需要 Python 3.6 以上版本,Ubuntu 20.04/22.04 默認即符合要求。



你打算編譯的 C++ 項目是否依賴特定的 Linux 第三方庫(如 OpenSSL 或 Libpng)?如果有的話,編譯腳本會需要額外的配置。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5277
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 176 次
被圈友点赞: 204 次
联系:

Re: 將改進混亂時鐘的網頁版

帖子 ejsoon »

在ckvalue為空,也就是「隨機模式」時,取消「開始遊戲」和「重新開始」,直接開始遊戲,也沒有「遊戲結束」。

增加「輸入局面」,當點擊時,彈出一個「輸入單行文字、確認和取消」的對話框,當確認時,則使用這個輸入的局面。

新增「上一局」和「下一局」按鈕,當點擊「隨機局面」或「輸入局面」之後,產生的局面都會記錄到程式中,當所記錄的局面超過兩局,就可以按「上一局」和「下一局」來切換。如果沒有上一局或下一局時按鈕會變灰且不可點擊。

只需給出所要修改的地方。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
回复

在线用户

正浏览此版面之用户: 没有注册用户 和 1 访客