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

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

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

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

    • 首先修改我们的 index.html
    • 添加 main.css
    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.   return [dom, ctx];
    4. }

    为什么会知道是 HTMLCanvasElement ？

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

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

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

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

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

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

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

    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. }

    而我们的 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. }
    • 接下来我们添加绘制背景的函数

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

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

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

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

    1. let cvs_one: HTMLCanvasElement,
    3.     ctx_one: CanvasRenderingContext2D,
    4.     ctx_two: CanvasRenderingContext2D;
    6. let cvs_width: number,
    7.     cvs_height: number;
    9. const bgPic = new Image();
    11. function getCanvasAndContextById(id: string): [HTMLCanvasElement, CanvasRenderingContext2D] {
    12.   const dom = <HTMLCanvasElement>document.querySelector('#' + id);
    13.   const ctx = dom.getContext('2d');
    14.   return [dom, ctx];
    15. }
    17. function init() {
    18.   [cvs_one, ctx_one] = getCanvasAndContextById('one');
    19.   [cvs_two, ctx_two] = getCanvasAndContextById('two');
    21.   bgPic.src = 'assets/img/background.jpg';
    23.   cvs_width = cvs_one.width;
    24.   cvs_height = cvs_one.height;
    25. }
    27. export default init;
    29. 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. }

    重构搞定！