html+css+js趣味小游戏~HexGL赛车竞速（附源码）

软件技术NINI2025-06-02 14:16

下面是一个简单的记忆卡片配对游戏的完整代码，使用HTML、CSS和JavaScript实现：

html

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

css 复制代码

        body { margin: 0; overflow: hidden; background: #000; }
        canvas { display: block; background: #111; }

JavaScript

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操作。