最后
四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~
祝大家都能收获大厂offer~
篇幅有限，仅展示部分内容
// test指定的是规则生效的文件
test: /.ts$/,
// 要使用的loader
use: [
// 配置babel
{
// 指定加载器
loader:“babel-loader”,
// 设置babel
options: {
// 设置预定义的环境
presets:[
[
// 指定环境的插件
“@babel/preset-env”,
// 配置信息
{
// 要兼容的目标浏览器
targets:{
“chrome”:“58”,
“ie”:“11”
},
// 指定corejs的版本
“corejs”:“3”,
// 使用corejs的方式 “usage” 表示按需加载
“useBuiltIns”:“usage”
}
]
]
}
},
‘ts-loader’
],
// 要排除的文件
exclude: /node-modules/
},
// 设置less文件的处理
{
test: /.less$/,
use:[
“style-loader”,
“css-loader”,
// 引入postcss
{
loader: “postcss-loader”,
options: {
postcssOptions:{
plugins:[
[
“postcss-preset-env”,
{
browsers: ‘last 2 versions’
}
]
]
}
}
},
“less-loader”
]
}
]
},
// 配置Webpack插件
plugins: [
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
// title: “这是一个自定义的title”
template: “./src/index.html”
}),
],
// 用来设置引用模块
resolve: {
extensions: [‘.ts’, ‘.js’]
},
mode:‘development’
};
-
新建
src文件夹，创建index.ts和index.html -
src文件夹内，新增modules文件夹和style文件夹
2.编写结构和样式
src/index.html
src/style/index.less
//设置颜色变量
@bg-color:#b7d4a8;
- {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#main {
display: flex;
flex-flow: column;
align-items: center;
justify-content: space-around;
margin: 0 auto;
width: 360px;
height: 420px;
border: 10px solid #000;
background-color: @bg-color;
border-radius: 30px;
#stage{
position: relative;
width: 304px;
height: 304px;
border: 2px solid #000;
#snake{
&>div{
position: absolute;
width: 10px;
height: 10px;
background-color: #000;
border: 1px solid @bg-color;
}
}
&>#food{
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-content: space-between;
position: absolute;
top: 10px;
left: 10px;
width: 10px;
height: 10px;
&>div{
width: 4px;
height: 4px;
background: #000;
transform: rotate(45deg);
}
}
}
#score-panel{
width: 300px;
display: flex;
align-items: center;
justify-content: space-between;
}
}
body {
font:bold 20px “Courier”;
}
3.模块化
src/modules/Food.ts
class Food{
element:HTMLElement;
constructor(){
//this.element=document.getElementById(‘food’) as HTMLElement
this.element=document.getElementById(‘food’)!;
}
get X() {
return this.element.offsetLeft
}
get Y() {
return this.element.offsetTop
}
change() {
this.element.style.left=Math.ceil(Math.random()*29)*10+‘px’;
this.element.style.top=Math.ceil(Math.random()*29)*10+‘px’;
}
}
export default Food;
src/modules/ScorePanel.ts
class ScorePanel{
score:number=0;
level:number=1;
scoreEle:HTMLElement;
levelEle:HTMLElement;
maxLevel:number;
upScore:number;
constructor(maxLevel:number=10,upScore:number=10){
this.scoreEle= document.getElementById(‘score’)!;
this.levelEle= document.getElementById(‘level’)!;
this.maxLevel=maxLevel;
this.upScore = upScore;
}
addScore(){
this.score++;
this.scoreEle.innerHTML = this.score + ‘’;
if(this.score % this.upScore === 0){
this.levelUp();
}
}
levelUp(){
if(this.level<this.maxLevel){
this.levelEle.innerHTML = ++this.level + ‘’;
}
}
}
export default ScorePanel;
src/modules/Snake.ts
class Snake{
head:HTMLElement;
bodies:HTMLCollection;
element:HTMLElement;
constructor(){
this.element = document.getElementById(‘snake’)!;
this.head = document.querySelector(‘#snake>div’)!;
this.bodies=this.element.getElementsByTagName(‘div’)!;
}
public get X(){
return this.head.offsetLeft;
}
public get Y(){
return this.head.offsetTop;
}
set X(value:number){
if(this.X === value){
return;
}
if(value<0 || value>290){
throw new Error(‘蛇撞墙了！！’)
}
//是否掉头
if(this.bodies[1]&&(this.bodies[1] as HTMLElement).offsetLeft === value){
if(value>this.X){
//左走向右调头
value -= 20
}else{
value += 20
}
}
//移动身体
this.moveBody();
//移动蛇头
this.head.style.left = value + ‘px’;
this.checkHeadBody();
}
set Y(value:number){
if(this.Y === value){
return
}
if(value<0 || value>290){
throw new Error(‘蛇撞墙了！！’)
}
//是否掉头
if(this.bodies[1]&&(this.bodies[1] as HTMLElement).offsetTop === value){
if(value>this.Y){
//左走向右调头
value -= 20
}else{
value += 20
}
}
this.moveBody();
this.head.style.top = value + ‘px’;
this.checkHeadBody();
}
addBody(){
this.element.insertAdjacentElement(‘beforeend’,document.createElement(‘div’))
}
moveBody(){
//将后面身体的位置改为前面身体的位置，先改后面的位置，
//后面的位置依附前面的位置
for(let i = this.bodies.length-1;i>0;i–){
let X = (this.bodies[i-1] as HTMLElement).offsetLeft;
let Y = (this.bodies[i-1] as HTMLElement).offsetTop;
结尾
正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。
以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
);
this.head.style.top = value + ‘px’;
this.checkHeadBody();
}
addBody(){
this.element.insertAdjacentElement(‘beforeend’,document.createElement(‘div’))
}
moveBody(){
//将后面身体的位置改为前面身体的位置，先改后面的位置，
//后面的位置依附前面的位置
for(let i = this.bodies.length-1;i>0;i–){
let X = (this.bodies[i-1] as HTMLElement).offsetLeft;
let Y = (this.bodies[i-1] as HTMLElement).offsetTop;
结尾
正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。
以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-uWZgFtwd-1715861848687)]
3918
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
