你画我猜小游戏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>你画我猜小游戏</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui, sans-serif}
body{background:#222;color:#fff;padding:16px}
.wrap{max-width:1100px;margin:0 auto}
.top{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
#wordBox{font-size:22px;background:#333;padding:8px 14px;border-radius:8px;color:#ffd040}
#tip{color:#aaa}
.main{display:flex;gap:16px;flex-wrap:wrap}
#canvas{border:3px solid #555;background:#fff;border-radius:8px;cursor:crosshair}
.panel{flex:1;min-width:260px}
.ctrl{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
button{padding:8px 14px;border:none;border-radius:6px;font-size:15px;cursor:pointer}
.btn-primary{background:#3498db;color:#fff}
.btn-danger{background:#e74c3c;color:#fff}
.btn-success{background:#27ae60;color:#fff}
#colorSelect{width:40px;height:36px;border:none}
#lineWidth{width:100px}
#guessInput{width:100%;padding:10px;font-size:16px;border-radius:6px;border:none;color:#222;margin:10px 0}
#msg{font-size:18px;margin:10px 0;min-height:24px}
.score{font-size:18px;margin-bottom:10px}
</style>
</head>
<body>
<div class="wrap">
  <div class="top">
    <div>当前词：<span id="wordBox">???</span></div>
    <div id="tip">画画的人看词，猜的人不要看！</div>
    <div class="score">分数：<span id="score">0</span></div>
  </div>
  <div class="main">
    <canvas id="canvas" width="640" height="480"></canvas>
    <div class="panel">
      <div class="ctrl">
        <input type="color" id="colorSelect" value="#000000">
        <label>粗细：<input type="range" id="lineWidth" min="1" max="30" value="4"></label>
        <button class="btn-danger" id="clearBtn">清空画布</button>
        <button class="btn-primary" id="newWordBtn">换词开局</button>
      </div>
      <input id="guessInput" placeholder="在这里输入你猜的答案，按回车提交">
      <div id="msg"></div>
      <button class="btn-success" id="submitBtn">提交答案</button>
    </div>
  </div>
</div>

<script>
// 词语库，可以自己增加
const wordList = [
  "小猫", "飞机", "蛋糕", "太阳", "自行车", "西瓜", "雨伞", "火箭",
  "苹果", "恐龙", "房子", "星星", "汽车", "大象", "花朵", "篮球",
  "汉堡", "电脑", "月亮", "机器人", "兔子", "火车", "雨伞", "企鹅",
  "海豚", "书本", "风筝", "吉他", "雪人", "冰淇淋"
];

let currentWord = "";
let score = 0;
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let isDraw = false;
let color = "#000000";
let lineWidth = 4;
let lastX = 0, lastY = 0;

const wordBox = document.getElementById("wordBox");
const scoreDom = document.getElementById("score");
const msgDom = document.getElementById("msg");
const guessInput = document.getElementById("guessInput");
const colorSel = document.getElementById("colorSelect");
const lineRange = document.getElementById("lineWidth");

// 随机选词
function pickWord(){
  const idx = Math.floor(Math.random() * wordList.length);
  currentWord = wordList[idx];
  wordBox.innerText = currentWord;
  msgDom.innerText = "";
  guessInput.value = "";
}

// 画布鼠标事件
canvas.addEventListener("mousedown",(e)=>{
  isDraw=true;
  const rect = canvas.getBoundingClientRect();
  lastX = e.clientX - rect.left;
  lastY = e.clientY - rect.top;
})
canvas.addEventListener("mousemove",draw);
canvas.addEventListener("mouseup",()=>isDraw=false);
canvas.addEventListener("mouseleave",()=>isDraw=false);

function draw(e){
  if(!isDraw) return;
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  ctx.beginPath();
  ctx.moveTo(lastX,lastY);
  ctx.lineTo(x,y);
  ctx.strokeStyle = color;
  ctx.lineWidth = lineWidth;
  ctx.lineCap = "round";
  ctx.stroke();
  lastX = x; lastY = y;
}

// 按钮事件
document.getElementById("clearBtn").onclick = ()=>{
  ctx.clearRect(0,0,canvas.width,canvas.height);
}
document.getElementById("newWordBtn").onclick = ()=>{
  ctx.clearRect(0,0,canvas.width,canvas.height);
  pickWord();
}
colorSel.oninput = ()=> color = colorSel.value;
lineRange.oninput = ()=> lineWidth = lineRange.value;

// 提交答案
function checkAnswer(){
  const ans = guessInput.value.trim();
  if(!ans){
    msgDom.innerText="请输入猜测答案！";
    msgDom.style.color="#ff7777";
    return;
  }
  if(ans === currentWord){
    msgDom.innerText="🎉答对啦！+1分";
    msgDom.style.color="#7cf07c";
    score++;
    scoreDom.innerText = score;
  }else{
    msgDom.innerText="❌猜错了，继续猜！";
    msgDom.style.color="#ffaa66";
  }
}
document.getElementById("submitBtn").onclick = checkAnswer;
guessInput.addEventListener("keydown",e=>{
  if(e.key==="Enter") checkAnswer();
})

// 初始化
pickWord();
</script>
</body>
</html>