2023年1月7日 星期六

橋牌主打練習程式 (On-line Javascript 設計)

http://4rdp.blogspot.com/2023/01/on-line-javascript.html














Contract :
Win

(西家連續攻擊方塊 AKQ,南家如何完成 4S 合約?)

為了研究橋牌主打合約技巧,需要嘗試不同出牌次序的結果,寫在紙上塗塗改改很不美觀也不方便,消耗紙張更不經濟,因此想寫個程式,除方便自己研究之外,也可以讓橋友們試用,依據以往經驗,Javascript 網頁程式最適合與部落格相搭配,因此選它來設計小程式,以及使用 On-line 程式工具,主要可以省卻軟體工具安裝和設定,所以我選用 Jsbin

設計網頁或視窗程式,首先要先規劃使用者操作介面,相關內容要怎樣顯示在螢幕上,為了內容不跑位,我使用了表格限制內容可以顯示的範圍,因此 HTML 語法為

<table> ...... </table>

表格內的橫列為

<tr> ...... </tr>

橫列中的欄位用 <td>,幾個欄位就有幾個 <td>

<tr><td> ...1... <td> ...2... <td> ...3... </tr>

此外,還需要能輸入資料的欄位,以及限制欄寬

<input type='text' id='......' value='......' size='5px'>

然後 <br /> 換行

那我又是怎樣知道這些 HTML 語法的呢?我是參考兩本書,是以前逛書店,覺得這些工具書看得懂並且未來有需要才買的,

1. HTML 帶了就走:我是個網頁高手 ISBN 957-22-3264-9

2. 從 HTML5+CSS3+JavaScript 到 jQuery+Node.js 程式設計 ISBN 978-986-312-391-0

不過這回程式設計,多了一個好用的工具,那就是 ChatGPT,只要你指定程式語言並清楚說出功能需求 (不要太複雜),就可以自動產出程式範例,我就是參考它的程式範例,改寫出想要的功能。


在表格 HTML 中,先預藏 id,例如 <tr><td><td id='NORTH'><td></tr>,當我按下 Reset Buttons 按鈕後,會先清除舊資料,再去讀取北家的牌張資料,然後將牌張按鈕的 HTML 碼新建在 <td id='NORTH'> 之後,部分程式碼如下:
const reset = document.getElementById('RESET');
const color = document.getElementById('COLOR');
var north = document.getElementById('NORTH');

reset.addEventListener('click', function() { while (north.childNodes[0] != null) north.removeChild(north.childNodes[0]); // 清除舊資料

createButton(north, 'S '+document.getElementById('NST').value) // 讀取牌張再新建按鍵
});

function createButton(obj, str) {
  var cards = Array.from(str);
  for (i=0 ; i<str.length ; i++) {
    if (i<2) {
      switch (cards[i]) {
        case 'S':
          cards[i] = '\u2660';
          break;
        case 'H':
          cards[i] = '\u2661';
          break;
        case 'D':
          cards[i] = '\u2662';
          break;
        case 'C':
          cards[i] = '\u2663';
          break;
      }
      obj.appendChild(document.createTextNode(cards[i]));
    } else {
      var newButton = document.createElement('button');
      newButton.textContent = cards[i];
      newButton.style.backgroundColor = '';
      newButton.addEventListener('click', function onClick() {
        if (this.style.backgroundColor == '') {
          if (color.checked)
            this.style.backgroundColor = '#00ff00';   // Green
          else
            this.style.backgroundColor = 'red';
        } else
          this.style.backgroundColor = '';
      });
      obj.appendChild(newButton);
    }
  }
  obj.appendChild(document.createElement('br'));
}

此外,放一個 Win 勾選的項目,打勾表示主打方獲勝,反之防禦方獲勝,這樣可以標示打過的牌是哪一邊得分,如果打錯牌再按一下可恢復原狀,想重打則按 Reset Buttons。目前沒有檔案讀取及儲存功能,等有空再追加吧。

寫這一篇是給程式新手一個參考,程式是怎樣從無到有設計出來的,Javascript 不是我熟悉的程式語言,這程式剛好不複雜,我差不多用十幾個小時將它完成,可以給入門的人觀摩,學習從不熟悉的東西之中怎樣找資料。

沒有留言:

張貼留言