来写个贪吃蛇小游戏吧（TypeScript版本）

先来康康效果图

我接下来将讲解相关配置和代码，源码链接放在最底下了，在GitHub上。

Explanation

1. tsconfig.json配置

{
   
    "compilerOptions": {
   
        "target": "ES2015",
        "module": "ES2015",
        "strict": true,
        "noEmitOnError": true 
    }
}
1
2
3
4
5
6
7
8
9
10

此处是对编译选项进行配置

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>Documenttitle>
head>
<body scroll="no">
    
    <div id="main">
        
        <div id="stage">
            
            <div id="snack">
                
                <div>div>
            div>
            <div id="food">
                
                <div>div>
                <div>div>
                <div>div>
                <div>div>
            div>
        div>
        
        <div id="scoreStage">
            <div>SCORE:<span id="score">0span>div>
            <div>LEVEL:<span id="level">1span>div>
        div>
    div>
body>
html>
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

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

相关阅读:
实验一. Java编程基础
第十四届蓝桥杯模拟赛第二期部分题答案（C++代码）
2015年亚太杯APMCM数学建模大赛A题海上丝绸之路发展战略的影响求解全过程文档及程序
OpenSSH升级版本（7.4升级到8.9）
CSS flex使用详解
[附源码]java毕业设计红河旅游信息服务系统论文
常见的加密方式都有哪些
同样Java后端开发三年，朋友已经涨薪到了30k，而我才刚到12K。必须承认多背背八股文确实有奇效！
RabbitMQ（五）【AMQP协议】
SqlServer_idea连接问题

原文地址：https://blog.csdn.net/weixin_60789461/article/details/126652699