Jmx0OyFET0NUWVBFIGh0bWwmZ3Q7CiZsdDtodG1sIGxhbmc9JnF1b3Q7dGgmcXVvdDsmZ3Q7CiZsdDtoZWFkJmd0OwogICZsdDttZXRhIGNoYXJzZXQ9JnF1b3Q7VVRGLTgmcXVvdDsmZ3Q7CiAgJmx0O3RpdGxlJmd0O0xldmVsVXAhIFZvY2FiJmx0Oy90aXRsZSZndDsKICAmbHQ7c3R5bGUmZ3Q7CiAgICBib2R5IHsKICAgICAgZm9udC1mYW1pbHk6IHNhbnMtc2VyaWY7CiAgICAgIGJhY2tncm91bmQ6ICNmNWY1ZjU7CiAgICAgIGRpc3BsYXk6IGZsZXg7CiAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyOwogICAgICBwYWRkaW5nOiAyMHB4OwogICAgfQogICAgLmJvYXJkLWNvbnRhaW5lciB7CiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTsKICAgIH0KICAgIC5ib2FyZCB7CiAgICAgIGRpc3BsYXk6IGdyaWQ7CiAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDEwLCA1MHB4KTsKICAgICAgZ3JpZC10ZW1wbGF0ZS1yb3dzOiByZXBlYXQoMTAsIDUwcHgpOwogICAgICBnYXA6IDRweDsKICAgICAgYmFja2dyb3VuZDogI2NjZTsKICAgICAgcGFkZGluZzogMTBweDsKICAgICAgYm9yZGVyOiA0cHggc29saWQgIzMzMzsKICAgICAgcG9zaXRpb246IHJlbGF0aXZlOwogICAgfQogICAgLmNlbGwgewogICAgICBkaXNwbGF5OiBmbGV4OwogICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICAgICAgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgICAgIGJvcmRlci1yYWRpdXM6IDZweDsKICAgICAgY29sb3I6ICNmZmY7CiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTsKICAgIH0KICAgIC5ibHVlIHsgYmFja2dyb3VuZC1jb2xvcjogIzRkYjhmZjsgfQogICAgLmdyZWVuIHsgYmFja2dyb3VuZC1jb2xvcjogIzYwZDM5NDsgfQogICAgLnllbGxvdyB7IGJhY2tncm91bmQtY29sb3I6ICNmMmI4NGI7IH0KICAgIC5kZWZhdWx0IHsgYmFja2dyb3VuZC1jb2xvcjogI2NjYzsgY29sb3I6ICMwMDA7IH0KCiAgICAuc25ha2UsIC5sYWRkZXIgewogICAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICAgIGZvbnQtc2l6ZTogMzZweDsKICAgICAgcG9pbnRlci1ldmVudHM6IG5vbmU7CiAgICB9CgogICAgLyog4LiV4Liz4LmB4Lir4LiZ4LmI4LiH4LiH4Li5ICjguJXguLHguKfguK3guKLguYjguLLguIcpICovCiAgICAuc25ha2UxIHsgdG9wOiAyMjBweDsgbGVmdDogNDBweDsgcm90YXRlOiAxNWRlZzsgfQogICAgLnNuYWtlMiB7IHRvcDogMTQwcHg7IGxlZnQ6IDMwMHB4OyByb3RhdGU6IC0xMGRlZzsgfQogICAgLnNuYWtlMyB7IHRvcDogODBweDsgbGVmdDogMTAwcHg7IHJvdGF0ZTogMzBkZWc7IH0KCiAgICAvKiDguJXguLPguYHguKvguJnguYjguIfguJrguLHguJnguYTguJQgKOC4leC4seC4p+C4reC4ouC5iOC4suC4hykgKi8KICAgIC5sYWRkZXIxIHsgdG9wOiAzNTBweDsgbGVmdDogNjBweDsgcm90YXRlOiAtMzVkZWc7IH0KICAgIC5sYWRkZXIyIHsgdG9wOiAxNjBweDsgbGVmdDogMjEwcHg7IHJvdGF0ZTogMjVkZWc7IH0KICAgIC5sYWRkZXIzIHsgdG9wOiA2MHB4OyBsZWZ0OiAzNzBweDsgcm90YXRlOiAtMTBkZWc7IH0KICAmbHQ7L3N0eWxlJmd0OwombHQ7L2hlYWQmZ3Q7CiZsdDtib2R5Jmd0OwogICZsdDtkaXYgY2xhc3M9JnF1b3Q7Ym9hcmQtY29udGFpbmVyJnF1b3Q7Jmd0OwogICAgJmx0O2RpdiBjbGFzcz0mcXVvdDtib2FyZCZxdW90OyBpZD0mcXVvdDtib2FyZCZxdW90OyZndDsmbHQ7L2RpdiZndDsKCiAgICAmbHQ7IS0tIOC4h+C4uSAtLSZndDsKICAgICZsdDtkaXYgY2xhc3M9JnF1b3Q7c25ha2Ugc25ha2UxJnF1b3Q7Jmd0O/CfkI0mbHQ7L2RpdiZndDsKICAgICZsdDtkaXYgY2xhc3M9JnF1b3Q7c25ha2Ugc25ha2UyJnF1b3Q7Jmd0O/CfkI0mbHQ7L2RpdiZndDsKICAgICZsdDtkaXYgY2xhc3M9JnF1b3Q7c25ha2Ugc25ha2UzJnF1b3Q7Jmd0O/CfkI0mbHQ7L2RpdiZndDsKCiAgICAmbHQ7IS0tIOC4muC4seC4meC5hOC4lCAtLSZndDsKICAgICZsdDtkaXYgY2xhc3M9JnF1b3Q7bGFkZGVyIGxhZGRlcjEmcXVvdDsmZ3Q78J+qnCZsdDsvZGl2Jmd0OwogICAgJmx0O2RpdiBjbGFzcz0mcXVvdDtsYWRkZXIgbGFkZGVyMiZxdW90OyZndDvwn6qcJmx0Oy9kaXYmZ3Q7CiAgICAmbHQ7ZGl2IGNsYXNzPSZxdW90O2xhZGRlciBsYWRkZXIzJnF1b3Q7Jmd0O/CfqpwmbHQ7L2RpdiZndDsKICAmbHQ7L2RpdiZndDsKCiAgJmx0O3NjcmlwdCZndDsKICAgIGNvbnN0IGJsdWVDZWxscyA9IFsxLDQsNywxMCwxMywxNiwxOSwyMywyNiwyOSwzMSwzNCwzNyw0MCw0Miw0NSw0OCw1Miw1NSw1OCw2MSw2NCw2Nyw3MCw3Myw3Niw3OSw4Myw4Niw4OSw5MSw5NCw5NywxMDBdOwogICAgY29uc3QgeWVsbG93Q2VsbHMgPSBbODAsNDEsMjAsODIsNTksMjIsOTgsNjMsMzgsMyw3Nyw0NCwxNyw4NSw1NiwyNSw5NSw2NiwzNSw2LDc0LDQ3LDE0LDg4LDUzLDI4LDkyLDY5LDMyLDksNzEsNTAsMTFdOwogICAgY29uc3QgZ3JlZW5DZWxscyA9IFs4MSw5OSw2MCw2Miw3OCw4NCw5NiwyMSwzOSw0Myw1Nyw2NSw3NSw4Nyw5MywyLDE4LDI0LDM2LDQ2LDU0LDY4LDcyLDkwLDUsMTUsMjcsMzMsNDksNTEsOCwxMiwzMF07CgogICAgY29uc3QgYm9hcmQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnYm9hcmQnKTsKCiAgICBmb3IgKGxldCByb3cgPSA5OyByb3cgJmd0Oz0gMDsgcm93LS0pIHsKICAgICAgZm9yIChsZXQgY29sID0gMDsgY29sICZsdDsgMTA7IGNvbCsrKSB7CiAgICAgICAgbGV0IGkgPSByb3cgJSAyID09PSAwID8gY29sIDogOSAtIGNvbDsKICAgICAgICBjb25zdCBudW0gPSByb3cgKiAxMCArIGkgKyAxOwogICAgICAgIGNvbnN0IGNlbGwgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdkaXYnKTsKICAgICAgICBjZWxsLmNsYXNzTGlzdC5hZGQoJ2NlbGwnKTsKCiAgICAgICAgaWYgKGJsdWVDZWxscy5pbmNsdWRlcyhudW0pKSB7CiAgICAgICAgICBjZWxsLmNsYXNzTGlzdC5hZGQoJ2JsdWUnKTsKICAgICAgICB9IGVsc2UgaWYgKHllbGxvd0NlbGxzLmluY2x1ZGVzKG51bSkpIHsKICAgICAgICAgIGNlbGwuY2xhc3NMaXN0LmFkZCgneWVsbG93Jyk7CiAgICAgICAgfSBlbHNlIGlmIChncmVlbkNlbGxzLmluY2x1ZGVzKG51bSkpIHsKICAgICAgICAgIGNlbGwuY2xhc3NMaXN0LmFkZCgnZ3JlZW4nKTsKICAgICAgICB9IGVsc2UgewogICAgICAgICAgY2VsbC5jbGFzc0xpc3QuYWRkKCdkZWZhdWx0Jyk7CiAgICAgICAgfQoKICAgICAgICBjZWxsLnRleHRDb250ZW50ID0gbnVtOwogICAgICAgIGJvYXJkLmFwcGVuZENoaWxkKGNlbGwpOwogICAgICB9CiAgICB9CiAgJmx0Oy9zY3JpcHQmZ3Q7CiZsdDsvYm9keSZndDsKJmx0Oy9odG1sJmd0Ow==
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>LevelUp! Vocab</title>
<style>
body {
font-family: sans-serif;
background: #f5f5f5;
display: flex;
justify-content: center;
padding: 20px;
}
.board-container {
position: relative;
}
.board {
display: grid;
grid-template-columns: repeat(10, 50px);
grid-template-rows: repeat(10, 50px);
gap: 4px;
background: #cce;
padding: 10px;
border: 4px solid #333;
position: relative;
}
.cell {
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
border-radius: 6px;
color: #fff;
position: relative;
}
.blue { background-color: #4db8ff; }
.green { background-color: #60d394; }
.yellow { background-color: #f2b84b; }
.default { background-color: #ccc; color: #000; }
.snake, .ladder {
position: absolute;
font-size: 36px;
pointer-events: none;
}
/* ตำแหน่งงู (ตัวอย่าง) */
.snake1 { top: 220px; left: 40px; rotate: 15deg; }
.snake2 { top: 140px; left: 300px; rotate: -10deg; }
.snake3 { top: 80px; left: 100px; rotate: 30deg; }
/* ตำแหน่งบันได (ตัวอย่าง) */
.ladder1 { top: 350px; left: 60px; rotate: -35deg; }
.ladder2 { top: 160px; left: 210px; rotate: 25deg; }
.ladder3 { top: 60px; left: 370px; rotate: -10deg; }
</style>
</head>
<body>
<div class="board-container">
<div class="board" id="board"></div>
<!-- งู -->
<div class="snake snake1">🐍</div>
<div class="snake snake2">🐍</div>
<div class="snake snake3">🐍</div>
<!-- บันได -->
<div class="ladder ladder1">🪜</div>
<div class="ladder ladder2">🪜</div>
<div class="ladder ladder3">🪜</div>
</div>
<script>
const blueCells = [1,4,7,10,13,16,19,23,26,29,31,34,37,40,42,45,48,52,55,58,61,64,67,70,73,76,79,83,86,89,91,94,97,100];
const yellowCells = [80,41,20,82,59,22,98,63,38,3,77,44,17,85,56,25,95,66,35,6,74,47,14,88,53,28,92,69,32,9,71,50,11];
const greenCells = [81,99,60,62,78,84,96,21,39,43,57,65,75,87,93,2,18,24,36,46,54,68,72,90,5,15,27,33,49,51,8,12,30];
const board = document.getElementById('board');
for (let row = 9; row >= 0; row--) {
for (let col = 0; col < 10; col++) {
let i = row % 2 === 0 ? col : 9 - col;
const num = row * 10 + i + 1;
const cell = document.createElement('div');
cell.classList.add('cell');
if (blueCells.includes(num)) {
cell.classList.add('blue');
} else if (yellowCells.includes(num)) {
cell.classList.add('yellow');
} else if (greenCells.includes(num)) {
cell.classList.add('green');
} else {
cell.classList.add('default');
}
cell.textContent = num;
board.appendChild(cell);
}
}
</script>
</body>
</html>