打字训练大师

by DriftStar25
168 lines7.2 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>打字训练大师</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:微软雅黑;-webkit-user-select:none;user-select:none;}
body{background:#f5f7fa;color:#333;overflow:hidden;}
.container{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;}
.menu{display:flex;flex-direction:column;gap:12px;width:90%;max-width:400px;}
.menu-btn{padding:16px;background:#409eff;color:white;border:none;border-radius:8px;font-size:18px;cursor:pointer;}
.menu-btn:hover{background:#337ecc;}
.top-right{position:fixed;top:16px;right:16px;font-size:24px;cursor:pointer;}
.setting-panel{position:fixed;top:60px;right:16px;background:white;padding:16px;border-radius:8px;box-shadow:0 2px 10px #0002;display:none;width:220px;}
.setting-item{margin:10px 0;display:flex;justify-content:space-between;align-items:center;}
.keyboard{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin-top:20px;width:100%;max-width:500px;}
.key{padding:12px;background:#eee;border-radius:6px;text-align:center;font-size:20px;cursor:pointer;}
.key:active{background:#ccc;}
.key-del{grid-column:span 2;background:#ff6b6b;color:white;}
.key-shift{grid-column:span 1;background:#4ecdc4;color:white;}
.word-box{font-size:28px;margin:20px 0;text-align:center;min-height:40px;line-height:1.4;}
.pinyin-tip{font-size:16px;color:#666;margin-top:4px;}
.input-box{font-size:24px;margin:10px 0;text-align:center;min-height:36px;color:#409eff;}
.timer{font-size:22px;margin:10px 0;}
.result-panel{position:fixed;inset:0;background:rgba(0,0,0,0.7);display:none;align-items:center;justify-content:center;}
.result-content{background:white;padding:24px;border-radius:12px;width:90%;max-width:400px;}
.history-panel{width:90%;max-width:600px;height:80vh;overflow-y:auto;background:white;padding:20px;border-radius:12px;display:none;}
.history-item{border-bottom:1px solid #eee;padding:10px;}
.review-panel{display:none;}
.group-panel{display:none;}
.pk-room-panel{display:none;flex-direction:column;gap:16px;align-items:center;}
.room-input{padding:12px;font-size:18px;width:80%;max-width:300px;text-align:center;}
.synopsis{margin:10px 0;line-height:1.6;}
.back-btn{margin-top:20px;padding:12px 24px;background:#666;color:white;border:none;border-radius:6px;cursor:pointer;}
</style>
</head>
<body>
<div class="top-right" id="settingBtn">☰</div>
<div class="setting-panel" id="settingPanel">
<div class="setting-item">
<span>键盘类型</span>
<select id="keyboardType">
<option value="26">26键拼音</option>
<option value="9">9宫格拼音</option>
<option value="hand">手写输入</option>
</select>
</div>
<div class="setting-item">
<button id="exportBtn">导出存档</button>
<button id="importBtn">导入存档</button>
</div>
<div class="setting-item">
<label><input type="checkbox" id="pinyinShow" checked> 显示拼音提示</label>
</div>
</div>

<div class="container" id="mainMenu">
<div class="menu">
<button class="menu-btn" data-mode="human">人机训练</button>
<button class="menu-btn" data-mode="pk">真人PK</button>
<button class="menu-btn" data-mode="limit">限时打字</button>
<button class="menu-btn" data-mode="smart">智能增强训练</button>
<button class="menu-btn" data-mode="review">复盘记录</button>
<button class="menu-btn" data-mode="group">组词拼音训练</button>
</div>
</div>

<!-- PK房间面板 -->
<div id="pkRoomPanel" class="pk-room-panel" style="display:none;">
<h3>局域网联机对战</h3>
<input type="text" class="room-input" id="roomCode" placeholder="输入房间号">
<button class="menu-btn" id="createRoomBtn">创建房间</button>
<button class="menu-btn" id="joinRoomBtn">加入房间</button>
<button class="menu-btn back-btn" id="pkBackBtn">返回主菜单</button>
</div>

<div id="gameArea" style="display:none;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:20px;">
<div class="timer" id="timer">05:00</div>
<div class="word-box" id="wordBox">
<div id="charText"></div>
<div class="pinyin-tip" id="pinyinTip"></div>
</div>
<div class="input-box" id="inputBox"></div>
<div class="keyboard" id="keyboard">
<!-- 第一行 qwertyuiop -->
<div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>
<!-- 第二行 asdfghjkl -->
<div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>
<!-- 第三行 shift zxcvbnm del -->
<div class="key key-shift" id="shiftBtn">⇧</div>
<div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>
<div class="key key-del" id="delBtn">⌫</div>
</div>
<button class="back-btn" id="gameBackBtn">退出对局</button>
</div>

<div class="result-panel" id="resultPanel">
<div class="result-content">
<h2 id="resultTitle">对局结束</h2>
<div id="resultInfo"></div>
<button class="menu-btn" style="margin-top:16px;" id="closeResultBtn">确定</button>
</div>
</div>

<div class="history-panel" id="historyPanel">
<h2>全部对局历史记录</h2>
<div id="historyList"></div>
<button class="back-btn" id="historyBackBtn">返回</button>
</div>

<script>
// 汉字-拼音映射库
const charPinyin = {
    '我':'wo','你':'ni','他':'ta','好':'hao','的':'de','是':'shi','在':'zai','有':'you','不':'bu','人':'ren',
    '这':'zhe','个':'ge','上':'shang','们':'men','来':'lai','到':'dao','时':'shi','大':'da','地':'di','为':'wei'
};
// 本地持久化存档
let saveData = JSON.parse(localStorage.getItem('typingSave')) || {
    history: [],
    bestScore: 0,
    keyboard: '26',
    pinyinShow: true,
    smartLevel: 1,
    groupLevel: 1
};
// 保存数据
function saveDataToLocal(){
    localStorage.setItem('typingSave', JSON.stringify(saveData));
}
saveDataToLocal();

// WebRTC局域网联机核心
let peerConn = null;
let dataChannel = null;
let isHost = false;
let roomId = '';
let myKeyboard = saveData.keyboard;
let rivalKeyboard = '';

// 键盘布局初始化
let isShift = false;
const keys = document.querySelectorAll('.key');
const shiftBtn = document.getElementById('shiftBtn');
const delBtn = document.getElementById('delBtn');
const inputBox = document.getElementById('inputBox');
const charText = document.getElementById('charText');
const pinyinTip = document.getElementById('pinyinTip');
let currentInput = '';

shiftBtn.addEventListener('click',()=>{
    isShift = !isShift;
    shiftBtn.style.background = isShift ? '#ff9f43' : '#4ecdc4';
});

keys.forEach(k=>{
    if(k.id==='shiftBtn'||k.id==='delBtn') return;
    k.addEventListener('click',()=>{
        let char = k.innerText;
        if(isShift) char = char.toUpperCase();
        currentInput += char;
        inputBox.innerText = currentInput;
    });
});

delBtn.addEventListener('click',()=>{
    currentInput = currentInput.slice(0,-1);
    inputBox.inne
Game Source: 打字训练大师

Creator: DriftStar25
Libraries: none
Complexity: moderate (168 lines, 7.2 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: game-driftstar25" to link back to the original. Then publish at arcadelab.ai/publish.