下面是一个简单的记忆卡片配对游戏的完整代码，使用HTML、CSS和JavaScript实现：
html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HexGL风格太空竞速</title></head>
<body><div id="gameInfo">速度: 0 | 分数: 0</div><canvas id="gameCanvas"></canvas><script src="js/game.js"></script>
</body>
</html>css
body { margin: 0; overflow: hidden; background: #000; }canvas { display: block; background: #111; }
JavaScript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const infoDisplay = document.getElementById('gameInfo');// 初始化画布和游戏状态
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let score = 0;
let speed = 0;展示效果
塞车
游戏说明
- 游戏目标：通过上下键移动
如何扩展
- 添加背景星空、轨道线等视觉元素。
- 实现音效（引擎声、碰撞声）。
- 优化移动端触控支持（如虚拟摇杆）。
这个游戏适合所有年龄段的人玩，可以锻炼记忆力和反应能力。代码结构清晰，适合初学者学习JavaScript事件处理和DOM操作。
