在前端开发中，Canvas 是一个非常强大的工具，可以用来实现各种图形和动画效果。本文将介绍如何使用 Canvas 实现经典游戏《吃豆鱼》的效果，涉及到如下内容：
- 绘制游戏场景
- 实现小球移动和吃豆子的效果
- 监听键盘事件，控制小球的移动方向
- 碰撞检测，判断小球是否碰到了墙壁或豆子
绘制游戏场景
首先我们需要在 HTML 页面中创建一个 <canvas> 元素，并通过 JavaScript 获取到它的上下文对象。
<canvas id="game" width="400" height="400"></canvas>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');然后我们需要绘制游戏场景，包括墙壁和豆子。这里我们使用二维数组来表示游戏地图，其中 0 表示空白区域，1 表示墙壁，2 表示豆子。根据地图的数据，我们可以绘制出相应的图形。
-- -------------------- ---- -------
----- --- - -
--- -- -- -- -- -- -- -- -- ---
--- -- -- -- -- -- -- -- -- ---
--- -- -- -- -- -- -- -- -- ---
--- -- -- -- -- -- -- -- -- ---
--- -- -- -- -- -- -- -- -- ---
--- -- -- -- -- -- -- -- -- ---
--- -- -- -- -- -- -- -- -- ---
--- -- -- -- -- -- -- -- -- ---
--- -- -- -- -- -- -- -- -- ---
--
----- --------- - -------
----- -------- - -------
-------- ----------- -
--- ---- - - -- - - ----------- ---- -
--- ---- - - -- - - -------------- ---- -
-- ---------- --- -- -
------------- - ----------
-------------- - --- - - --- --- ----
- ---- -- ---------- --- -- -
------------- - ---------
----------------
--------- - -- - --- - - -- - --- -- -- - - ---------
-----------
-
-
-
-
------------以上代码会在 Canvas 中绘制出如下场景：
实现小球移动和吃豆子的效果
接下来，我们需要实现小球的移动和吃豆子的效果。首先我们需要定义小球的初始位置和大小。
-- -------------------- ---- ------- ----- -------- - --- --- ----- - --- --- ----- - --- -------- ---------- - ------------- - ------- ---------------- -------------- ------ --------- -- - - --------- ----------- - -----------
然后我们可以使用 requestAnimationFrame 函数来让小球移动。每一
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1246