来写个贪吃蛇小游戏吧（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基于ssm的奶牛场电子自动化管理系统
SkiaSharp 之 WPF 自绘投篮小游戏（案例版）
重学C++重构你的C++知识体系升级版学习笔记
畜牧猪舍养殖成功管理效率提高的背后原因
c# .net6 Task 多线程介绍
【无标题】
神经网络控制法的工作原理,什么是神经网络控制
解析富有童趣的人工智能早教机器人
「学习笔记」组合计数与中国剩余定理
Apache Shiro 漏洞复现

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