在前面的文章中,我们学习了 JavaScript 的面向对象理论和基本的语法知识,这些都是非常好的基础。这篇文章中我们将进行一次实战演练,练习如何构造 JavaScript 对象,最终你会得到一个色彩缤纷的结果!
Prerequisites: | Basic computer literacy, a basic understanding of HTML and CSS, familiarity with JavaScript basics (see First steps and Building blocks) and OOJS basics (see Introduction to objects). |
Objective: | To get some practice with using objects and object-oriented techniques in a real world context. |
Let's bounce some balls
在这篇文章中我们将写一个”bouncing balls“的实例。我们的小球会在屏幕上弹跳,当它们碰到彼此时会变色。最终会像这样:
这个实例将会利用 Canvas API 来在屏幕上画小球, 还会用到 requestAnimationFrame API 来使整个画面动起来 — 你不需要知道关于这些 API 的知识, 然后我们希望你完成这个练习之后你会有兴趣探索这些知识。这个过程中我们会用到一些非常小巧的东西,会向你展示一些技巧比如小球从墙上跳下来,比如检查它们是否撞到了对方 (otherwise known as collision detection).
让我们开始吧
首先, 将这些文件 index.html
, style.css
, and main.js
复制到本地. 这些文件分别包括以下内容:
- 一个非常简单的 HTML 文档,包括一个
元素, 一个
元素来画小球,还有一些元素将 CSS 和 JavaScript 运用到我们的 HTML 中。 - 一些非常简单的样式,主要是运用到
元素上,摆脱了滚动条和页面边缘的空白(从而看起来非常简洁)
- 一些 JavaScript 用来设置
第一部分的代码先这样:
var canvas = document.querySelector('canvas');var ctx = canvas.getContext('2d');var width = canvas.width = window.innerWidth;var height = canvas.height = window.innerHeight;
这个脚本使用变量代指了
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。