下载图片资源

    将图片资源放到 asset/img 下面。

    在项目里面我们可能用到 requestAnimationFrame ，关于兼容，大家请查看 目前 requestAnimationFrame 兼容性

    为了语义化，规范化，大家可以参考以下规范。

    写出一份优雅的代码，是每一位工程师的责任。

    • 首先修改我们的 index.html
    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Luvdisc</title>
    6.   <link rel="stylesheet" href="assets/css/main.css" />
    7. </head>
    8. <body>
    10. <!--
    11.   HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
    12.   class
    13.   id 、 name
    14.   data-*
    15.   src、for、 type、 href
    16.   title、alt
    17.   aria-*、 role
    18. -->
    20.   <section class="wrapper">
    21.     <figure class="canvas-container">
    22.       <canvas class="canvas-item" id="one" width="800" height="600"></canvas>
    23.       <canvas class="canvas-item" id="two" width="800" height="600"></canvas>
    24.     </figure>
    25.   </section>
    26.   <script async src="bundle.js"></script>
    27. </body>
    28. </html>
    • 添加 main.css
    1. /*
    3. CSS书写顺序
    5. 1.位置属性(position, top, right, z-index, display, float等)
    7. 2.大小(width, height, padding, margin)
    9. 3.文字系列(font, line-height, letter-spacing, color- text-align等)
    11. 4.背景(background, border等)
    13. 5.其他(animation, transition等)
    15. */
    17. .wrapper{
    18.   width: 800px;
    19.   height: 600px;
    20.   padding-top: 10px;
    21.   margin: 0 auto;
    22. }
    24. .canvas-container{
    25.   position: relative;
    27.   width: 800px;
    28.   height: 600px;
    29.   margin: 0;
    30. }
    32. canvas.canvas-item{
    33.   position: absolute;
    34.   top: 0;
    35.   right: 0;
    36.   bottom: 0;
    37.   left: 0;
    38. }
    40. canvas#one{
    41.   z-index: 1;
    42. }
    44. canvas#two{
    45.   z-index: 0;
    46. }

    首先我们封装获取一个获取 DOM 和 context 的函数

    1. function getCanvasAndContextById(id: string): [HTMLCanvasElement, CanvasRenderingContext2D] {
    2.   const dom = <HTMLCanvasElement>document.querySelector('#' + id);
    3.   const ctx = dom.getContext('2d');
    4.   return [dom, ctx];
    5. }

    为什么会知道是 HTMLCanvasElement ？

    把鼠标移动到 document.querySelector 上面，按 F12，跳转到原生定义文件里面，搜索 canvas 就可以搜索得到，因为是 HTMLEelemnt 实例，所以必然有 Element 单词在里面。

    而这个 CanvasRenderingContext2D ，直接查看 dom.getContext 的返回值类型即可知道。

    这里的返回值我们用了元组的解构。

    所以获取我们应该这样解构，并且放在了 window.onload 函数里面，报错 DOM 加载完成之后再执行代码。

    1. window.onload = () => {
    2.   const [cvs_one, ctx_one] = getCanvasAndContextById('one');
    3.   const [cvs_two, ctx_two] = getCanvasAndContextById('two');
    4. }

    我们设置的 #one 的 z-index 层级比较高，所以我们会在 one 这一层上面绘制一些 UI、结构之类的逻辑，而 two 则是绘制背景。

    • 接下来我们要用到 requestAnimationFrame 来优化 Web 动画性能

    大家可以看一下这一篇文章 requestAnimationFrame简介 。

    我们知道游戏的运行，是需要浏览器不停的重新绘制的，所以说一定有一个循环，在不停的重绘。

    2. let lastTime: number = Date.now(), // 记录上一次绘制的时间
    3.     deltaTime: number = 0; // requestAnimationFrame 执行完成所用的时间 = 当前时间 - 上一次绘制的世界
    5. function gameLoop() {
    6.   const now = Date.now()
    7.   deltaTime = now - lastTime;
    8.   lastTime = now;
    10.   console.log(deltaTime);
    11.   requestAnimationFrame(gameLoop);
    13. }

    这里有一个 deltaTime 来记录一下每一次requestAnimationFrame的时间

    而我们的 DOM 实例和 Context 是需要在其他函数里面使用的，所以说，我们必须拿到外面来，但是又必须等 DOM 完成之后再获取。

    所有我们小小的修改一下之前的代码

    1. function getCanvasAndContextById(id: string): [HTMLCanvasElement, CanvasRenderingContext2D] {
    2.   const dom = <HTMLCanvasElement>document.querySelector('#' + id);
    3.   const ctx = dom.getContext('2d');
    4.   return [dom, ctx];
    5. }
    7. let cvs_one: HTMLCanvasElement,
    8.     cvs_two: HTMLCanvasElement,
    9.     ctx_one: CanvasRenderingContext2D,
    10.     ctx_two: CanvasRenderingContext2D;
    12. let lastTime: number = Date.now(), // 记录上一次绘制的时间
    13.     deltaTime: number = 0; // requestAnimationFrame 执行完成所用的时间 = 当前时间 - 上一次绘制的世界
    16. window.onload = () => {
    17.   init();
    18.   gameLoop();
    20. }
    22. function init() {
    23.   [cvs_one, ctx_one] = getCanvasAndContextById('one');
    24.   [cvs_two, ctx_two] = getCanvasAndContextById('two');
    27. }
    29. function gameLoop() {
    30.   const now = Date.now()
    31.   deltaTime = now - lastTime;
    32.   lastTime = now;
    34.   console.log(deltaTime);
    35.   requestAnimationFrame(gameLoop);
    36. }
    • 接下来我们添加绘制背景的函数

    因为背景是处于游戏中，所以我们要把它写到游戏循环里面。

    1. const bgPic = new Image();
    3. function init() {
    4.   [cvs_one, ctx_one] = getCanvasAndContextById('one');
    5.   [cvs_two, ctx_two] = getCanvasAndContextById('two');
    7.   bgPic.src = 'assets/img/background.jpg';
    9.   cvs_width = cvs_one.width;
    10.   cvs_height = cvs_one.height;
    11. }
    13. function gameLoop() {
    14.   const now = Date.now()
    15.   deltaTime = now - lastTime;
    16.   lastTime = now;
    18.   console.log(deltaTime);
    20.   drawBackbround()
    22.   requestAnimationFrame(gameLoop);
    23. }
    25. function drawBackbround() {
    26.   ctx_two.drawImage(bgPic, 0, 0, cvs_width, cvs_height)
    27. }

    现在你应该可以看到一个背景图片了。

    这样的代码看起来非常的乱，现在我们该来想一想如何重构了。

    首先我们理清逻辑，初始化 Init -> 游戏循环 ，目前来说就这么2个逻辑，所以，我们把这 2 个函数分成 2 个文件。

    分别创建 init.ts 、game-loop.ts 文件

    1. // init.ts
    2. let cvs_one: HTMLCanvasElement,
    3.     cvs_two: HTMLCanvasElement,
    4.     ctx_one: CanvasRenderingContext2D,
    5.     ctx_two: CanvasRenderingContext2D;
    7. let cvs_width: number,
    8.     cvs_height: number;
    10. const bgPic = new Image();
    12. function getCanvasAndContextById(id: string): [HTMLCanvasElement, CanvasRenderingContext2D] {
    13.   const dom = <HTMLCanvasElement>document.querySelector('#' + id);
    14.   const ctx = dom.getContext('2d');
    15.   return [dom, ctx];
    16. }
    18. function init() {
    19.   [cvs_one, ctx_one] = getCanvasAndContextById('one');
    20.   [cvs_two, ctx_two] = getCanvasAndContextById('two');
    22.   bgPic.src = 'assets/img/background.jpg';
    24.   cvs_width = cvs_one.width;
    25.   cvs_height = cvs_one.height;
    26. }
    28. export default init;
    30. export { bgPic, cvs_width , cvs_height, ctx_two };
    1. // game-loop.ts
    2. import { bgPic, cvs_width , cvs_height, ctx_two } from "./init";
    5. let lastTime: number = Date.now(), // 记录上一次绘制的时间
    6.     deltaTime: number = 0; // requestAnimationFrame 执行完成所用的时间 = 当前时间 - 上一次绘制的世界
    8. function gameLoop() {
    9.   const now = Date.now()
    10.   deltaTime = now - lastTime;
    11.   lastTime = now;
    13.   console.log(deltaTime);
    15.   drawBackbround()
    17.   requestAnimationFrame(gameLoop);
    18. }
    21. function drawBackbround() {
    22.   ctx_two.drawImage(bgPic, 0, 0, cvs_width, cvs_height)
    23. }
    25. export default gameLoop;
    1. // main.ts
    3. import gameLoop from "./game-loop";
    4. import init from "./init";
    7. window.onload = () => {
    8.   init();
    9.   gameLoop();
    10. }

    重构搞定！