前端小白奥利给（一）
??duang~讲解视频链接放这里啦
B站：JavaScriptGame教程-前端小白奥利给(一)讲解
??你好，我是小何，终于等到你了！【前端小白奥利给】系列文章将教会，有一定基础的你，做一个纯JavaScript游戏，我把这个游戏也命名为【前端小白奥利给】。学会基本原理和实现方法后，希望你能够发挥自己天马行空的想象力，设计并实现专属于你的第一个JavaScript游戏！Let's Go！
??本小讲将带你学习实现整个游戏的基本工具+核心原理，并且现学现用，带着你实现一个简单示例。
??首先，你需要具备以下基础知识，若存在知识盲区，请点击链接进行学习。
??1.基础知识储备
HTML语法和基本结构
W3CschoolHTML教程
CSS语法和基本结构
W3CschoolCSS教程
JavaScript语法和基本结构
W3CschoolJavaScript教程
会用VScode写代码
玩转VScode专栏及“黑宝书”
遇到新的语法和结构会使用MDN等手册进行查询+学习
MDN web docs
??然后，了解以下知识点。对于大部分初级学习者，可能是第一次接触这些知识。我把这些新的知识（主要为web API方面知识点）总结成了一个个小工具。如果你不能完全理解它们的语义和用法，你可以把它们想象为带有特定功能的小工具，当我们需要实现某种需求时，把它们从工具箱拿出来即可。
??2.新知识点
2.1事件监听器（带箭头）
JS代码
功能
监听相关操作（点击键盘上某键）或变化（HTML文档加载完毕、函数内某些值的变化），以触发相应事件并执行
详细文档
MDN: document.addEventListener()
2.2 交互（键盘）监听器
JS代码
2
3
4
5
6
7
8
9
10
11
12
13
14
switch(e.keyCode){
case 37:/*??*/
if();
break;
case 39:/*??*/
if();
break;
}
}
document.addEventListener("keydown", example);功能
switch块，确定触发键盘上相应键后发生响应
document.addEventListener("keydown",functionname), 监听，且调用触发函数的条件为，键盘上相应键被按下
详细文档
MDN: document.addEventListener
2.3间隔调用器
JS代码
2
3
callexample=setInterval(example,sometime);
clearInterval(callexample);功能
setInterval()，每隔一段时间，调用某函数
clearInterval(), 终止setInterval??
详细文档
MDN: setInterval()
MDN: clearInterval()
2.4定时器（带箭头）
JS代码
2
3
4
5
6
7
or
function example(){}
callexample=setTimeout(example,sometime);
clearsetTimeout(callexample);功能
隔一段时间，调用某函数，定时触发
详细文档
MDN: setTimeout()
2.5网格生成器
HTML部分
HTML代码
2
3
4
5
……
<div></div>
……
</div>功能
在一个大div（格子）中间嵌入225个小div（格子）
详细文档
W3C: div用法
CSS部分
CSS代码
2
3
4
5
6
7
8
9
10
11
12
13
14
15
display:flex;
flex-wrap:wrap;
width:450px;
height:450px;
margin:auto;
background:#ffe6eb;
}
.grid div{
width:30px;
height:30px;
}功能
display:flex, 将父级元素(div)变成一个伸缩盒容器
flex-wrap:wrap, 指定伸缩盒内元素多行显示
详细文档
MDN: flex
MDN: flex-wrap
JS部分
JS代码
2
3
4
/*编号0~224
squares[0];
squares[224];功能
document.querySelectorAll(""),选择相应的CSS元素
详细文档
MDN: document.querySelectorAll("")
2.6换装器
CSS部分
CSS代码
2
3
4
5
6
background-color:red;
}
.clotheNameTwo{
background-color:blue;
}
JS部分
JS代码
2
3
squares[25].classList.remove("clotheNameOne");
squares[224].classList.add("clotheNameTwo");功能
element.classList.add(""), 给元素添加相应css属性
element.classList.remove(""), 移除元素的相应css属性
详细文档
MDN: element.classsList
??以下是实现整个游戏的核心原理。你可以看到，掌握并合理地运用上面的小工具，就可以做出来一个完整的游戏。
??3.核心原理
利用网格生成器，生成一个15x15的网格(width=450px,height=450px)
将这个整体记作数组squares,每一个小网格(width=30px,height=30px)都有自己的序号
利用换装器，为小网格“穿上”或者“脱下”新衣(相应的class属性)，以使网格发生动态变化
利用间隔调用器或定时器使得网格每隔一段时间发生动态变化
利用交互(键盘)监听器，实现相应按下某键（????），出现动态变化的功能
??工欲善其事，必先利其器。别急着实现一个完整的游戏，先完成下面的简单示例。简单示例的HTML+CSS+JavaScript完整代码我已经给出。这个简单示例里运用了本游戏的核心原理+“小工具”，呈现的效果如下
??4.代码简单示例-HTML部分
代码
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Front-end Beginners Fighting!</title>
<link rel="stylesheet" href="style.css" />
<script src="app.js" charset="UTF-8"></script>
</head>
<body>
<div class="grid">
… <div></div> ……
</div>
</body>
</html>功能
创建了一个大div块，其内包含了225个小div块
??5.代码简单示例-CSS部分
代码
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
display: flex;
flex-wrap: wrap;
width: 450px;
height: 450px;
margin: auto;
background: #ffe6eb;
}
.grid div {
width: 30px;
height: 30px;
}
.beginner {
background-color: cornflowerblue;
}
.disturbFactor {
background-color: darkorange;
}功能
将大div块变成一个伸缩盒子，确定其内小div块排布方式为多行排布
确定大div块和小div的大小，生成一个15x15的网格
??6.代码简单示例-JS部分
代码
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
const squares = document.querySelectorAll(".grid div");
let beginnerIndex = 217;
let width = 15;
let leftboundary = 210;
let rightboundary = 224;
squares[beginnerIndex].classList.add("beginner");
function disturbFactorMove() {
let disturbFactorOneIndex = 7;
squares[disturbFactorOneIndex].classList.add("disturbFactor");
function disturbFactorOneMove() {
squares[disturbFactorOneIndex].classList.remove("disturbFactor");
disturbFactorOneIndex += width;
squares[disturbFactorOneIndex].classList.add("disturbFactor");
}
disturbFactorOneMoveInterval = setInterval(disturbFactorOneMove, 300);
}
disturbFactorMoveInterval = setInterval(disturbFactorMove, 4500);
function beginnerMove(e) {
squares[beginnerIndex].classList.remove("beginner");
switch (e.keyCode) {
case 37:
if (beginnerIndex !== leftboundary) beginnerIndex -= 1;
break;
case 39:
if (beginnerIndex !== rightboundary) beginnerIndex += 1;
break;
}
squares[beginnerIndex].classList.add("beginner");
}
document.addEventListener("keydown", beginnerMove);
});功能
squares，建立squares数组，以给网格中各个小格编号
function disturbFactorMove(){}+disturbFactorMoveInterval,使得干扰因素每隔一段时间开始从7号格子处下落
function disturbFactorOneMove(){}+disturbFactorOneMoveInterval,控制干扰因素以一定速度下落
function beginnerMove(e){}+document.addEventListener,按下键盘????控制前端小白移动
??我们下篇文章见哦~
