JavaScript：如何重新创建；动画化你的名字；我的教训？

Codecademy网站有一个用户可以学习的课程。几个月来，我一直在努力重现这个结果，但我所做的一切都没有让我接近我想要的

---

下面是本课程中使用的HTML和JavaScript（此处链接：）。这是可行的，尽管只是在我的网站上

JavaScript: 注1：此版本的JS与原始版本略有不同

注2：此JavaScript的文件名为

main.js

var red = [359, 100, 29.8];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];
var bluefield = [199, 100, 22.9];

var myName = "Bluefield";
var letterColors = [bluefield,red];
var bubbleShape = "square";

drawName(myName, letterColors);
bounceName();
bounceBubbles();

HTML（全文）： 注意：我直到今天（2014年8月6日）才看到这个HTML

HTML（在“body”标记中）：

链接的外部资源（重要！）：

• （来自原始课程的HTML）

---

我在这里成功地实现了：

诀窍是添加jQuery，然后将外部库添加到HTML的

，如下所示：

<canvas id="myCanvas"></canvas>
<script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js"></script>

---

尝试在蓝色和红色之间留出空格：

var letterColors=[蓝色，红色]

对我来说，这是唯一的问题。
打开浏览器中的JavaScript控制台。您将看到一个错误。缺少函数。此代码需要更多javascript库。查看页面，他们使用的是alphabet.js、bubbles.js和jquery，您只包含了字母表，我想我应该得到这些。谢谢你的回答！：）以下是供将来参考的最终“基本结果”：
var red = [359, 100, 29.8];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];
var bluefield = [199, 100, 22.9];

var myName = "Bluefield";
var letterColors = [bluefield,red];
var bubbleShape = "square";

drawName(myName, letterColors);
bounceName();
bounceBubbles();

<canvas id="myCanvas"></canvas>

<canvas id="myCanvas"></canvas>
<script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js"></script>