通過浪費時間獲得快樂不是對時間的浪費
Penilum meum pullo sententia Latin a est

詳解愛因斯坦的謎題

小時候在《科學畫報》上看到過，不會。長大后會編程了，能做到試3!×3!×4!×4!次了，又發現手工可解。

先看手工：用個5x5的表格表示狀態，行依次是：國籍、房子顏色、飲料、香煙、寵物。表格初始空白。

“挪威人住第一間房，挪威人住藍房子隔壁，住中間房子的喝牛奶”：

Screenshot_20251018_134308

“綠房子在白房子左面隔壁，住綠房子的喝咖啡”。像拼圖或俄羅斯方塊：

Screenshot_20251018_135726

上圖這一塊，往哪兒插呢？或者多層透明塑料上寫的有字，疊起來后字不能擋住字。

HTML+CSS/Canvas， Python (Pillow)等等都可以alpha blend, AI還特別喜歡overkill，下圖是CSS做的：

Screenshot_20251018_134654

這倒是也可以開發個“游戲”：n張卡片有3D堆疊效果，可以點擊選擇某一張進行編輯，有個按鈕“模擬顯示”（致敬DOS版WPS)把它們疊起來，程序判斷有無沖突。

或者樸素點，像華容道或數字迷宮，點擊同一行里的兩個方塊可以交換位置，程序判斷是否整個表格滿足條件。

依次類推，比如”英國人住紅房子”，房子只有一個空位了。最后幾步得試幾種可能，沒有必然。

人工+Python搜索：

from  itertools import permutations as pmt
L = lambda s: list(s)
a = [L('挪丹英德瑞'),L('黃藍紅綠白'),L('水茶奶咖啤'),L('ｄｂｍｐｓ'),L('貓馬鳥魚狗')]
def let(row, cols, s):
 for i in range(len(cols)): a[row][cols[i]] = s[i]

for n in pmt([1,3,4]): # nation
 let(0, n, '丹德瑞')
 for d in pmt([0,1,4]): # drink
  if n[0] != d[0]: continue # 丹麥人喝茶
  let(2, d, '茶水啤')
  for p in pmt([0,2,3,4]): # pet
   if n[2] != p[2]: continue # 瑞典人養狗
   let(4, p, '鳥貓狗魚')
   for c in pmt(range(1,5)): # cigarette
    if p[0] != c[3]: continue # 抽ｍ煙的養鳥
    if n[1] != c[1]: continue # 德國人抽ｐ煙
    if d[2] != c[2]: continue # 喝啤酒的抽ｓ煙
    if abs(c[0]-d[1]) != 1: continue # 抽ｂ煙的挨著喝水的
    if abs(c[0]-p[1]) != 1: continue # 抽ｂ煙的挨著養貓的
    let(3, c, 'ｂｐｓｍ')
    for r in a: print(''.join(r))

這樣的題是如何編出來的呢？最少需要幾個怎樣的條件才能唯一確定？

Screenshot_20251018_150808

HTML堆疊各層：

<html><head><meta charset="UTF-8"><style>
body {
  display: flex; justify-content: center; align-items: center;
}

.container {
  position: relative; width: 300px; height: 300px;
}

table {
  position: absolute; width: 100%; height: 100%;
  border-collapse: collapse;
  mix-blend-mode: multiply; /* 關鍵屬性 */
}

td { text-align: center; padding: 10px;
  background: transparent !important;
  font: 16pt serif;
}

.controls {
  position: fixed;
  bottom: 20px;
  display: flex;
  gap: 10px;
  margin: 1rem 0;
  padding: 1rem;
}

input {
  position: relative;
  margin-right: 16px;
  width: 24px; height: 24px;
  vertical-align: middle;
}
</style></head><body>
<div class="container" id="tableContainer"></div>
<div class="controls">
  <div style="font-size:150%">
    <!-- 自閉合標簽（void element）-->
    <input type="checkbox" value="0">1
    <input type="checkbox" value="1">2
    <input type="checkbox" value="2">3
    <input type="checkbox" value="3">4
    <input type="checkbox" value="4">5
  </div>
</div>
<script>
const data = [
  '挪　　　　　藍　　　　　　　　　　　　　　　　　　',
  '　　　　　　　　　　　　奶　　　　　　　　　　　　',
  '　　　　　　　　綠白　　　咖　　　　　　　　　　　',
  '　　英　　　　紅　　　　　　　　　　　　　　　　　',
  '挪丹英德瑞黃藍紅綠白水茶奶咖啤ｄｂｍｐｓ貓馬鳥魚狗'
];

const colors = [
  'rgba(60, 179, 113, 0.6)',  // 海洋綠
  'rgba(30, 144, 255, 0.6)',  // 道奇藍
  'rgba(238, 130, 238, 0.6)', // 紫羅蘭
  'rgba(255, 215, 0, 0.6)',   // 金色
  'rgba(218, 112, 214, 0.6)'  // 蘭花粉
];

let container = document.getElementById('tableContainer');
let tables = [];

function createTable(index) {
  const table = document.createElement('table');
  for (let i = 0; i < 5; i++) {
    const row = document.createElement('tr');
    for (let j = 0; j < 5; j++) {
        const cell = document.createElement('td');
        cell.textContent = data[index][i * 5 + j]
        row.appendChild(cell)
    }
    table.appendChild(row);
  }
  table.style.backgroundColor = colors[index];
  tables.push(table);
  container.appendChild(table);
}

for (let i = 0; i < 5; i++) createTable(i);

document.querySelectorAll('input').forEach(
  cb => { 
    cb.setAttribute('checked', true)
    // 箭頭函數的this繼承自外層作用域（詞法作用域），定義時就已經確定且無法改變。
    // 與傳統函數動態綁定this不同。
    cb.addEventListener('change', function() { 
      let i = parseInt(this.value)
      tables[i].style.display = this.checked ? 'table' : 'none'
    });
})
</script></body></html>

View Code

在HTML中，void元素（如<input>、<img>等）可以寫成自閉合形式（即帶有/的結束標記），但這不是強制要求。現代HTML5規范中，自閉合的/是可選的，更傾向于簡化寫法。

下面的截圖是CSS Tricks網站的首頁：

Screenshot_20251019_233909

我那個程序，可能因為body的background是white，混合后顏色很難看。

posted @ 2025-10-18 13:55 華容道專家閱讀(20) 評論(0) 收藏舉報

刷新頁面返回頂部