HTML 注音游戏：测试你的汉语拼音
以下是一个示例的 HTML 代码，实现了给随机的汉字注音，并根据注音的正确与否显示不同的图片和更新积分的功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注音游戏</title>
<style>
#score {
position: absolute;
top: 10px;
right: 10px;
}
</style>
<script>
// 声母数据
var initials = ['b', 'p', 'm', 'f', 'd', 't', 'n', 'l', 'g', 'k', 'h', 'j', 'q', 'x', 'zh', 'ch', 'sh', 'r', 'z', 'c', 's', 'y', 'w'];
// 韵母数据
var finals = ['a', 'o', 'e', 'i', 'u', 'ü', 'ai', 'ei', 'ui', 'ao', 'ou', 'iu', 'ie', 'üe', 'er', 'an', 'en', 'in', 'un', 'ün', 'ang', 'eng', 'ing', 'ong'];
// 生成随机的注音
function generateRandomPinyin() {
var initial = initials[Math.floor(Math.random() * initials.length)];
var final = finals[Math.floor(Math.random() * finals.length)];
return initial + final;
}
// 更新积分显示
function updateScore(correct) {
var scoreElement = document.getElementById('score');
var score = parseInt(scoreElement.innerText);
if (correct) {
score += 2;
} else {
score -= 1;
}
scoreElement.innerText = score;
}
// 检查注音是否正确
function checkPinyin(element) {
var pinyin = element.value.toLowerCase();
var hanzi = element.dataset.hanzi;
var correctPinyin = hanzi.pinyin.toLowerCase();
if (pinyin === correctPinyin) {
element.classList.add('correct');
element.nextElementSibling.src = 'image1.png';
updateScore(true);
} else {
element.classList.add('wrong');
element.nextElementSibling.src = 'image2.png';
updateScore(false);
}
element.disabled = true;
}
// 游戏初始化
function initGame() {
var hanziElements = document.getElementsByClassName('hanzi');
for (var i = 0; i < hanziElements.length; i++) {
var hanziElement = hanziElements[i];
var pinyin = generateRandomPinyin();
hanziElement.innerText = hanziElement.dataset.hanzi.hanzi;
hanziElement.dataset.hanzi.pinyin = pinyin;
}
}
</script>
</head>
<body onload="initGame()">
<h1>注音游戏</h1>
<div id="score">积分: <span>0</span></div>
<table>
<tr>
<th>汉字</th>
<th>注音</th>
<th>结果</th>
</tr>
<tr>
<td class="hanzi" data-hanzi='{ 'hanzi': '字1', 'pinyin': '' }'></td>
<td>
<input type="text" onchange="checkPinyin(this)">
</td>
<td>
<img src="" alt="">
</td>
</tr>
<tr>
<td class="hanzi" data-hanzi='{ 'hanzi': '字2', 'pinyin': '' }'></td>
<td>
<input type="text" onchange="checkPinyin(this)">
</td>
<td>
<img src="" alt="">
</td>
</tr>
<!-- 添加更多行... -->
</table>
</body>
</html>
在上述代码中，初始化函数initGame()会生成随机的注音，并将汉字和注音保存在对应的data属性中。每个注音输入框的onchange事件会调用checkPinyin()函数来检查用户输入的注音是否正确，并根据结果显示不同的图片。同时，积分会根据注音的正确与否进行更新，更新函数为updateScore()。积分显示在页面右上角的score元素中。
原文地址: https://www.cveoy.top/t/topic/o0vT 著作权归作者所有。请勿转载和采集!