今天心血来潮，想搞个简单的弓箭手小游戏网页版。以前没怎么正经做过游戏，就当练练手，顺便记录一下过程，给像我一样的新手朋友们分享分享。
准备工作
得有个大概的思路。我想要的很简单：一个弓箭手，能拉弓射箭，箭能飞出去，就差不多。不用太复杂，主要就是体验一下这个过程。
然后，我用个最基础的 HTML 结构，就一个 canvas 标签，待会画图就靠它。
就开始写代码。
画出弓箭手
我先画个小人，表示弓箭手。用 canvas 的 fillRect 方法，画几个矩形，拼成个人形。颜色随便涂个棕色，丑是丑点，但好歹能看出来是个小人。
弓箭嘛就更简单。弓用 arc 方法画个半圆，箭就是一条线，用 beginPath, moveTo, lineTo, stroke 这几个方法画的。
让弓箭手能拉弓
这一步稍微麻烦点。我用 addEventListener 监听鼠标的 mousedown, mousemove, mouseup 这几个事件。
鼠标点下去的时候，记录一下鼠标的位置。鼠标移动的时候，根据鼠标的位置计算箭的角度和拉弓的力度。力度越大，箭射出去就越远。这个计算就是个简单的数学问题，用鼠标移动的距离算一下就行。
鼠标松开的时候，就把箭射出去。
让箭飞起来
箭射出去之后，得让它动起来。我用 requestAnimationFrame 这个方法，它能让浏览器在每次刷新屏幕的时候，都执行我们指定的函数。在这个函数里，我改变箭的位置，然后重新画出来，这样箭就看起来像是在飞。
箭的飞行轨迹，我弄个简单的抛物线。就是每次更新箭的位置时，水平方向上匀速移动，竖直方向上加一个向下的加速度，模拟重力效果。挺简单的，不过看起来还像那么回事。
一些小修小补
到这里，基本功能就差不多。但还缺点玩起来不带劲。我又加点东西：
- 给箭加个简单的碰撞检测。就是判断箭的坐标是不是超出屏幕范围，超出就把箭删掉，不然箭会一直飞，飞到天涯海角。
- 加个计分功能。每次射箭，都根据箭飞的距离给个分数。虽然没啥用，但看着数字往上涨，感觉还是挺爽的。
完成！
到这，这个简陋的弓箭手小游戏就差不多完成。虽然画面很粗糙，功能也很简单，但是从头到尾自己做出来，还是挺有成就感的。以后有时间，再慢慢完善，比如加个靶子，加点音效啥的。这回的实践经历就分享到这里！希望对大家有帮助。