来写个贪吃蛇小游戏吧（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

相关阅读:
.NET 8 中的 WPF File Dialog 改进
vue简单源码手写,实现基本的模板解析,v-text,v-html,v-on:click,@click基本语法指令
Vue2+Vue3
2024年3月第15届蓝桥杯青少组STEMA考试C++中高级真题试卷
SpringMVC项目请求(请求映射路径)
网络安全进阶学习第十九课——CTF之密码学
重生奇迹MU玛雅宝石的获取方法
WeChat小程序开发：基础笔记（二）
java计算机毕业设计Web企业客户管理系统源码+mysql数据库+系统+lw文档+部署
leecode#用Read4读取n个字符#相交链表

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