Electron 游戏开发实战：从零构建复古打砖块（Canvas + Vanilla JS）
1. 为什么选择Electron开发复古打砖块游戏
第一次接触Electron是在2016年，当时我正在开发一个跨平台的桌面应用。Electron最吸引我的地方在于它能让前端开发者用熟悉的Web技术栈（HTML、CSS、JavaScript）来构建桌面应用。对于复古打砖块这类2D小游戏来说，Electron简直是量身定制的解决方案。
传统游戏开发通常需要学习专门的游戏引擎，比如Unity或Unreal。但如果你已经掌握了前端开发技能，用Electron+Canvas开发游戏可以省去大量学习成本。我实测下来，从零开始构建一个基础版的打砖块游戏，熟练的话2小时就能完成核心功能。
Electron的另一个优势是跨平台打包。你只需要写一套代码，就能生成Windows、macOS和Linux三个平台的可执行文件。记得2018年我参与过一个教育类游戏项目，用Electron打包后直接分发到学校的不同电脑上，学生们打开就能玩，完全不需要安装额外运行环境。
2. 项目结构与初始化
2.1 创建基础项目
先初始化项目结构，这是我推荐的标准目录布局：
breakout-game/ ├── main.js # Electron主进程 ├── preload.js # 预加载脚本 ├── index.html # 游戏主界面 ├── package.json └── assets/ # 资源文件 └── sounds/ # 音效初始化package.json很简单：
mkdir breakout-game cd breakout-game npm init -y npm install electron --save-dev2.2 配置主进程
main.js是Electron应用的入口文件，这里有个坑我踩过：窗口尺寸最好设为固定值，否则不同分辨率下游戏体验会不一致。这是我的配置：
const { app, BrowserWindow } = require('electron') const path = require('path') function createWindow() { const win = new BrowserWindow({ width: 800, // 固定宽度 height: 600, // 固定高度 resizable: false, // 禁止调整窗口大小 webPreferences: { preload: path.join(__dirname, 'preload.js'), contextIsolation: true } }) win.loadFile('index.html') win.setMenu(null) // 隐藏菜单栏 } app.whenReady().then(createWindow)3. 游戏核心逻辑实现
3.1 Canvas基础设置
在index.html中，我们先设置好Canvas画布。这里有个性能优化技巧：给Canvas添加will-change属性可以提升渲染性能。
<canvas id="gameCanvas" width="760" height="500" style="will-change: transform;"> </canvas>JavaScript部分初始化画布上下文：
const canvas = document.getElementById('gameCanvas') const ctx = canvas.getContext('2d') // 高清屏适配 function resizeCanvas() { const scale = window.devicePixelRatio canvas.width = 760 * scale canvas.height = 500 * scale ctx.scale(scale, scale) } window.addEventListener('resize', resizeCanvas) resizeCanvas()3.2 游戏对象定义
定义游戏中的三个核心对象：挡板、小球和砖块。我建议使用对象字面量而不是类，这样代码更简洁：
// 挡板 const paddle = { width: 100, height: 15, x: canvas.width / 2 - 50, speed: 8, color: '#4CAF50' } // 小球 const ball = { x: canvas.width / 2, y: canvas.height - 30, radius: 8, dx: 4, dy: -4, color: '#FFFFFF' } // 砖块 const brick = { rowCount: 5, colCount: 10, width: 70, height: 20, padding: 10, offsetTop: 50, offsetLeft: 30, colors: ['#FF5252', '#FFEB3B', '#4CAF50', '#2196F3'] }3.3 碰撞检测实现
碰撞检测是游戏的核心逻辑，这里我优化了原始算法，增加了击打位置影响反弹角度的效果：
function checkCollisions() { // 墙壁碰撞 if(ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) { ball.dx = -ball.dx } // 顶部碰撞 if(ball.y - ball.radius < 0) { ball.dy = -ball.dy } // 挡板碰撞 if( ball.y + ball.radius > canvas.height - paddle.height && ball.x > paddle.x && ball.x < paddle.x + paddle.width ) { // 根据击打位置调整角度 const hitPos = (ball.x - (paddle.x + paddle.width/2)) / (paddle.width/2) ball.dx = hitPos * 5 // 控制反弹力度 ball.dy = -Math.abs(ball.dy) } // 砖块碰撞 for(let r = 0; r < brick.rowCount; r++) { for(let c = 0; c < brick.colCount; c++) { const b = bricks[r][c] if(b.status === 1) { if( ball.x + ball.radius > b.x && ball.x - ball.radius < b.x + brick.width && ball.y + ball.radius > b.y && ball.y - ball.radius < b.y + brick.height ) { ball.dy = -ball.dy b.status = 0 score += 10 updateScore() // 检查是否通关 if(score === brick.rowCount * brick.colCount * 10) { showMessage('You Win!') } } } } } }4. 游戏打包与分发
4.1 添加打包脚本
在package.json中添加打包命令：
{ "scripts": { "start": "electron .", "package-win": "electron-packager . Breakout --platform=win32 --arch=x64 --out=dist", "package-mac": "electron-packager . Breakout --platform=darwin --arch=x64 --out=dist", "package-linux": "electron-packager . Breakout --platform=linux --arch=x64 --out=dist" } }安装打包工具：
npm install electron-packager --save-dev4.2 优化打包体积
Electron应用体积较大是常见问题，通过以下方法可以适当减小体积：
- 使用electron-builder代替electron-packager
- 启用压缩：
--asar - 排除无用文件：在package.json中添加
"files": ["*.js", "assets/"]
我的优化后打包命令：
electron-packager . Breakout --platform=win32 --arch=x64 --out=dist --asar --overwrite --prune5. 游戏功能扩展建议
基础版本完成后，可以考虑添加这些增强功能：
- 音效系统：使用Web Audio API添加击打音效
const hitSound = new Audio('assets/sounds/hit.wav') hitSound.volume = 0.3 // 碰撞时播放 hitSound.currentTime = 0 hitSound.play()- 多关卡系统：通过修改砖块布局实现
const levels = [ { rows: 3, cols: 8, colorScheme: ['red','blue'] }, { rows: 5, cols: 10, colorScheme: ['yellow','green'] } ]- 本地存储：使用Electron的IPC通信保存最高分
// preload.js const { ipcRenderer } = require('electron') window.saveHighScore = (score) => ipcRenderer.send('save-score', score)- 粒子效果：砖块击碎时添加爆炸动画
function createParticles(x, y, color) { for(let i = 0; i < 10; i++) { particles.push({ x, y, size: Math.random() * 3 + 1, color, speedX: Math.random() * 6 - 3, speedY: Math.random() * 6 - 3, life: 30 }) } }6. 常见问题与解决方案
在开发过程中，我遇到过几个典型问题：
- 游戏卡顿：原因是没使用requestAnimationFrame。解决方法：
function gameLoop() { ctx.clearRect(0, 0, canvas.width, canvas.height) // 绘制逻辑... requestAnimationFrame(gameLoop) }- 键盘响应延迟：改用keydown/keyup事件缓存状态：
const keys = {} window.addEventListener('keydown', e => keys[e.key] = true) window.addEventListener('keyup', e => keys[e.key] = false) function handleInput() { if(keys['ArrowLeft']) paddle.x -= paddle.speed if(keys['ArrowRight']) paddle.x += paddle.speed }- 高分屏显示模糊：需要根据devicePixelRatio调整Canvas尺寸：
const scale = window.devicePixelRatio canvas.width = 760 * scale canvas.height = 500 * scale ctx.scale(scale, scale)- 打包后资源加载失败：使用path.join处理资源路径：
win.loadFile(path.join(__dirname, 'index.html'))开发这类小游戏最有趣的地方在于，你可以不断添加新功能来挑战自己。上周我刚给这个游戏加了个"子弹时间"特效，当小球接近挡板时时间会变慢，这只需要在游戏循环中简单修改deltaTime值就能实现。