玩游戏学前端-贪吃蛇-ES6模块化

前端开发 评论

贪吃蛇-ES6模块化

在后续内容中，我们逐渐在游戏面板上绘制蛇和食物，将会涉及到 javascript DOM技术、ES6中的模块化、箭头函数等知识，所以我们先简单地把要用到的知识点了解和应用。如果需要全面了解，请移步相关官方文档。或者与我私聊，嘿嘿！

游戏核心逻辑模块化: 使用ES6模块化

现代浏览器基本上都支持ES6模块化(有关ES6的基础知识，可参考阮一峰老师ECMAScript 6入门), 首先我们创建一个main.js文件，这个文件是游戏的入口，只需要在HTML页面上引入main.js，main.js文件内的逻辑先不管，可以先创建一个空文件。关键代码如下:

1
<script src="main.js" defer type="module" ></script>

defer(延期，推迟) defer属性的意思是HTML页面渲染完成,同时页面中其它脚本也执行完成后脚本文件才会执行, 如果有多个脚本文件都声明了defer, 这些脚本的加载顺序会按照它们在HTML页面上出现的顺序

async(异步) 声明了这个属性的JS脚本一旦下载完成就会立即执行, 如果多个脚本文件都声明了async, 那么它并不能保证按出现的顺序加载

type=”module” 表示让浏览器知晓这是一个ES6模块

模块化在Java中有import，nodejs中也有require, python中有import, 在ES6之前，我在前端开发中会使用CommonJS、requireJS、seaJS等进行模块化, Javascript终于不用第三方插件也可以模块化了，意外地开心，但必须强调一点，使用它还需要浏览器支持才行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇游戏</title>
    <style>
         
       body {
           height: 100vh;
           width: 100vw;
           display: flex;
           flex-direction: row;
           justify-content: left;
           align-items: center;
           margin: 0;
           background-color: black;
       }

       #game-board {
            background-color: rgb(250, 245, 245);
            width: 100vmin;
            height: 100vmin;
            display: grid;
            grid-template-rows: repeat(50, 1fr);
            grid-template-columns: repeat(50, 1fr);
        }

        #settings {
            display: grid;
        }
    </style>
    <script src="main.js" defer type="module"></script>

</head>
<body>
    <div id="game-board">
    </div>
	<div id="settings">
    </div>
</body>
</html>

下面创建一个snake.js蛇模块和food.js食物模块， 暂时仅在里边定义update和draw函数, update函数实现蛇的变化逻辑， 比如蛇的移动方向以及它的长度变化; draw函数实现蛇的绘制。 food.js类似

snake.js

1
2
3
4
5
6
7
function update() {
	console.log('更新蛇')
}
function draw() {
	console.log('绘制蛇')
}
export {update, draw}

food.js

1
2
3
4
5
6
7
function update() {
	console.log('更新食物')
}
function draw() {
	console.log('绘制食物')
}
export {update, draw}

上面两个文件都用到了export关键词，用于导出模块中的内容

main.js实现，会用到之前文章中讲到的window.requestAnimationFrame,游戏界面需要不断更新并重绘 , 先使用import 导入snake.js, food.js, 这两个文件和main.js是在同一个目录下， 导入时使用 as 给出一个别名以便在main.js中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//引入 snake.js 和 food.js模块内容 
import {update as updateSnake, draw as drawSnake} from './snake.js'
import {update as updateFood, draw as drawFood} from './food.js'

function main(currentTime) {
    //再次请求动画帧
    window.requestAnimationFrame(main)
	//调用本模块中的update和draw函数
    update()
    draw()
}
//请求动画帧
window.requestAnimationFrame(main)

//因为有蛇和食物需要更新，所以定义了update函数，在函数内部调用另外两个模块的函数
function update() {
    updateSnake()
    updateFood()
}
//因为有蛇和食物需要绘制，所以定义了draw函数，在函数内部调用另外两个模块的函数
function draw() {
    drawSnake()
    drawFood()
}

可以将这些代码整合到vscode开发工具中，再运行index.html文件，在浏览器控制台查看效果。 下一篇我们看如何使用DOM绘制蛇和食物。

哼哈七龙岛主架构师 & 开发者 & 技术分享

个人简介。