- 先来康康效果图
我接下来将讲解相关配置和代码，源码链接放在最底下了，在GitHub上。
Explanation
1. tsconfig.json配置
{
"compilerOptions": {
"target": "ES2015",
"module": "ES2015",
"strict": true,
"noEmitOnError": true
}
}
此处是对编译选项进行配置
target: 我们将TS转译成JS的版本。module: 模块化的版本。strict: 所有相关的严格模式是否开启。noEmitOnError: 当出现错误时是否停止编译。
2. HTML & CSS 布局相关
- 先来看看我们整体的布局
<!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>Document</title>
</head>
<body scroll="no">
<!-- 创建游戏的主容器 -->
<div id="main">
<!-- 设置游戏舞台 -->
<div id="stage">
<!-- 设置蛇 -->
<div id="snack">
<!-- snack内部的div表示蛇的各部分 -->
<div></div>
</div>
<div id="food">
<!-- 设置食物的样式 -->
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- 设置游戏的积分牌 -->
<div id="scoreStage">
<div>SCORE:<span id="score">0</span></div>
<div>LEVEL:<span id="level">1</span></div>
</div>
</div>
</body>
</html>
- CSS代码
// 设置变量
@bgColor: #b7d4a8;
// 清除默认样式清除默认样式
* {
margin: 0;
padding: 0;
// 怪异模式
box-sizing: border-box;
}
body {
font: bold 20px "Courier";
width: 100%;
height: 100%;
overflow: hidden;
}
// 设置主窗口的样式
#main {
width: 360px;
height: 420px;
background-color: @bgColor;
margin: 100px auto;
border: 10px solid #000;
border-radius: 40px;
display: flex;
flex-direction: column;
align-items: center;
// 主轴对齐方式
justify-content: space-around;
}
#stage {
width: 304px;
height: 304px