html+css+js趣味小游戏~猜数字游戏（附源码）
下面是一个简单的记忆卡片配对游戏的完整代码，使用HTML、CSS和JavaScript实现：
html
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>猜数字游戏</title>
</head>
<body><h1>猜数字游戏</h1><div id="game"><p>我已经想好了一个1到100之间的数字，你能猜出来吗？</p><button onclick="makeGuess()">提交猜测</button><button onclick="resetGame()">重新开始</button></div>
</body>
</html>css
body {font-family: Arial, sans-serif;display: flex;flex-direction: column;align-items: center;margin-top: 50px;
}
#board {display: grid;grid-template-columns: repeat(3, 100px);grid-template-rows: repeat(3, 100px);gap: 5px;
}JavaScript
const board = document.getElementById('board');
const statusDisplay = document.getElementById('status');
let currentPlayer = 'X';
let gameActive = true;
let gameState = ['', '', '', '', '', '', '', '', ''];const winningConditions = [[0, 1, 2], [3, 4, 5], [6, 7, 8], // 横[0, 3, 6], [1, 4, 7], [2, 5, 8], // 竖[0, 4, 8], [2, 4, 6] // 斜
];
// 初始化游戏
createBoard();
document.getElementById('restart-btn').addEventListener('click', restartGame);展示效果
猜数字游戏
游戏说明
- 游戏目标：系统随机生成一个数字，玩家通过输入猜测，系统会提示“太大”或“太小”，直到猜中为止。
- 游戏规则：
- 猜数字
如何扩展
- 增加难度级别（不同大小的网格）
- 添加计时功能
- 增加更多卡片符号或使用图片
- 添加音效（翻转、匹配成功等）
- 添加动画效果
- 实现高分记录系统
这个游戏适合所有年龄段的人玩，可以锻炼记忆力和反应能力。代码结构清晰，适合初学者学习JavaScript事件处理和DOM操作。