數字華容道是一款非常經典的益智游戲，33版的數字華容道也是其中之一。以下是33數字華容道的html代碼：
<!DOCTYPE html>
<html>
<head>
<title>33數字華容道</title>
<style>
.game-board {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
width: 350px;
height: 350px;
margin: 0 auto;
border: 2px solid #333;
padding: 10px;
}
.game-board div {
background-color: #eee;
border: 1px solid #333;
font-size: 60px;
text-align: center;
line-height: 110px;
cursor: pointer;
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.game-board .empty {
background-color: transparent;
}
</style>
</head>
<body>
<div class="game-board">
<div class="num1">1</div>
<div class="num2">2</div>
<div class="num3">3</div>
<div class="num4">4</div>
<div class="num5">5</div>
<div class="num6">6</div>
<div class="num7">7</div>
<div class="num8">8</div>
<div class="empty"></div>
</div>
<script>
const cells = document.querySelectorAll('.game-board div');
const empty = document.querySelector('.empty');
let index = 0;
const moveCell = e => {
const target = e.target;
const targetIndex = [...cells].indexOf(target);
if((targetIndex+1 === index) || (targetIndex-1 === index) || (targetIndex+3 === index) || (targetIndex-3 === index)) {
const emptyIndex = [...cells].indexOf(empty);
cells[emptyIndex].classList.add('num'+target.innerText);
cells[emptyIndex].innerText = target.innerText;
target.classList = 'empty';
target.innerText = '';
empty.classList = 'num'+target.innerText;
empty.innerText = target.innerText;
index = targetIndex;
}
}
cells.forEach(cell => {
cell.addEventListener('click', moveCell)
})
</script>
</body>
</html>以上就是33數字華容道的完整html代碼，其中利用了grid布局和JavaScript的dom操作來實現拼圖游戲的效果。