<!DOCTYPE html>
<html>
<head>
<title>猜字游戏</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
#gameCanvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('gameCanvas');
var ctx = canvas.getContext('2d');
var words = ['apple', 'banana', 'cherry'];
var wordToGuess = '';
var guessedLetters = [];
function startGame() {
wordToGuess = words[Math.floor(Math.random() * words.length)];
guessedLetters = [];
drawHangman(0);
drawWord();
}
function guessLetter(letter) {
guessedLetters.push(letter);
if (wordToGuess.includes(letter)) {
// 字母在词汇中
drawWord();
} else {
// 字母不在词汇中
drawHangman(guessedLetters.length);
}
}
function drawHangman(step) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
switch(step) {
case 0:
// 游戏开始时不画图
break;
case 1:
// 画第一步挂图
break;
// ... 其他步骤
}
}
function drawWord() {
ctx.clearRect(0, 25, canvas.width, canvas.height);
var visibleWord = wordToGuess.split('').map(letter => {
return guessedLetters.includes(letter) ? letter : '_';
}).join(' ');
ctx.fillText(visibleWord, 50, 50);
}
startGame(); // 开始游戏
</script>
</body>
</html>这个简易的猜字游戏使用了HTML5 Canvas API来绘制挂图和显示猜测结果。游戏开始时，会随机选择一个词汇，然后用下划线代替未猜测的字母。当玩家输入一个字母后，如果这个字母在随机词汇中存在，则显示这个字母，否则根据猜测错误的次数画出相应的挂图部分。这个例子教给初学者如何使用Canvas API和简单的游戏逻辑。