嗨，大家今天来给大伙儿分享一下我之前捣鼓的一个小玩意儿——用canvas做的小游戏。先说这玩意儿代码没咋整理，就是纯JavaScript，不过我觉得还挺适合刚接触canvas，想学点动画效果的朋友们看看的。
之前我就琢磨着，要不要写个系列教程，就讲讲怎么从零开始做个小游戏。一来，是想帮帮那些刚入门的朋友，少走点弯路；二来，也算是给自己做个看看哪里还能做得更
开工前的准备
在咱开始动手之前，你得先在你的HTML文件里加个这玩意儿：<canvas></canvas>。 这就跟搭戏台子似的，你得先有个地儿才能唱戏不是？
有“戏台子”，咱还得找个“角儿”来唱戏。在代码里，你得用个啥getElementById之类的方法，把你刚搭的那个canvas给拎出来。就像这样：
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
let canvas = *('myCanvas');
拎出来之后还没完，你还得给它找个“画笔”，这样才能在上面画东西。这“画笔”咋找？简单，用canvas对象的getContext("2d")方法就行。这就像你去文具店买支笔，准备开始画画一样。
let ctx = *('2d');
开始画起来
-
画个方块：比如说，你想画个方块，就用
fillRect(x, y, width, height)这个方法。x, y是方块左上角的坐标，width和height就是方块的宽和高。是不是挺简单的？ -
画个圆圈：画圆圈稍微麻烦点，得用
arc(x, y, radius, startAngle, endAngle, anticlockwise)这个方法。x, y是圆心的坐标，radius是半径，startAngle和endAngle是开始和结束的角度（用弧度表示），anticlockwise是说要不要逆时针画（true是逆时针，false是顺时针）。 -
给图形上色：想让你的图形好看点？那得给它上色！用
fillStyle属性设置填充颜色，用strokeStyle属性设置边框颜色。颜色可以用颜色名（比如"red"、"blue"），也可以用十六进制值（比如"#FF0000"、"#0000FF"）。
让它动起来
光画个静态的图形多没意思，咱得让它动起来才好玩！咋动？这就得用到动画。动画的原理很简单，就是不停地画新的图形，把旧的图形擦掉，这样看起来就像动起来一样。
一般来说，我们会用requestAnimationFrame()这个方法来实现动画。这个方法会告诉浏览器，你希望在下一次重绘之前执行某个函数。这样，你就可以在这个函数里更新图形的位置、颜色等等，然后重新画出来，就形成动画。
function animate() {
// 清除画布
*(0, 0, *, *);
// 更新图形的位置、颜色等
// 重新绘制图形
// 请求下一次重绘
requestAnimationFrame(animate);
animate(); // 启动动画
加上点互动
游戏嘛总得有点互动才好玩。你可以用JavaScript来监听键盘、鼠标的事件，然后在事件发生的时候，做一些相应的操作。比如，你可以让玩家用键盘控制一个小方块移动，或者用鼠标点击来发射子弹等等。
一些小技巧
-
碰撞检测： 游戏里经常会有碰撞检测，比如判断子弹有没有打中敌人，或者玩家有没有碰到障碍物。最简单的碰撞检测就是判断两个矩形有没有重叠。
-
精灵图：如果你的游戏里有很多小图形，可以把它们都画在一张大图上，然后每次只显示这张大图的一部分。这样可以减少图片加载的次数，提高游戏的性能。
-
游戏背景：游戏背景可以增加游戏的美观度。你可以用一张大图作为背景，也可以用多个小图来拼接成背景。
今天就先分享到这儿。做游戏这事儿，说难也不难，说简单也不简单，关键还是得多动手，多琢磨。希望我今天分享的这些东西，能对你有所帮助。下次有机会，再跟大家聊聊更深入的一些东西！
