TypeScript学习笔记（三）——贪吃蛇

最新推荐文章于 2023-05-19 22:57:59 发布

杨乐多dreamer

最新推荐文章于 2023-05-19 22:57:59 发布

阅读量458

点赞数

分类专栏： typescript 文章标签： typescript 学习 javascript

本文链接：https://blog.csdn.net/qq_44743216/article/details/125032912

版权

配置文件

1、将之前写好的package.json、webpack.config.js、tsconfig.json 复制到当前目录下

2、使用 npm i 初始化环境

3、在src目录下新建 index.html 和 index.ts

4、安装工具：npm i -D less less-loader css-loader style-loader

5、修改相关配置文件：

（1）webpack.config.js：

	// 指定webpack打包时要使用的模块
    module:{
   
        // 指定要加载(loader)的规则
        rules:[
        	......
        	// 设置less文件的处理
            {
   
                test:/\.less$/,
                use:[
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ]
            }
        ]
    },

为了使css样式能够兼容各个浏览器，还要使用 postcss：npm i -D postcss postcss-loader postcss-preset-env

            // 设置less文件的处理
            {
   
                test:/\.less$/,
                use:[
                    "style-loader",
                    "css-loader",
                    {
   
                        loader:"postcss-loader",
                        options:{
   
                            postOptions:{
   
                                plugins:[
                                    [
                                        "postcss-preset-env",
                                        {
   
                                            browsers:'last 2 versions'
                                        }
                                    ]
                                ]
                            }
                        }
                    },
                    "less-loader"
                ]
            }

这样会自动把样式处理成各个浏览器可兼容的样式
在这里插入图片描述

实现基本样式

1、index.html

<body>
    <!-- 创建游戏的主容器 -->
    <div id="main">
        <!-- 设置游戏的舞台 -->
        <div id="stage">
            <!-- 设置蛇 -->
            <div id="snake">
                <!-- 设置蛇身体的各部分（由多个方块组成） -->
                <div></div>
            </div>
            <!-- 设置食物 -->
            <div id="food">
                <!-- 添加4个小div来设置食物的形状 -->
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>               
        </div>
        <!-- 设置游戏的记分牌 -->
        <div id="score-pannel">
            <div>
                SCORE:<span id="score">0</span>
            </div>
            <div>
                LEVEL:<span id="level">1</span>
            </div>
        </div>
    </div>
<script src="./index.js"></script>
</body>

2、index.less

// 设置变量
@bg-color:#b7d4a8;

// 清除默认样式
*{
   
    margin: 0;
    padding: 0;
    // 改变盒子模型的计算方式
    box-sizing: border-box;
}

body{
   
    font: bold 20px "Courier";
}

// 设置主窗口的样式
#main{
   
    width: 360px;
    height: 420px;
    // 背景颜色
    background-color: @bg-color;
    // 居中
    margin: 100px auto;
    border: 10px solid black;
    // 圆角
    border-radius: 40px;
    // 弹性盒
    display: flex;
    // 主轴方向
    flex-flow: column;
    // 侧轴的对齐方式
    align-items: center;
    // 主轴的对齐方式
    justify-content<

最低0.47元/天解锁文章

杨乐多dreamer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TypeScript学习笔记（三）——贪吃蛇

配置文件1、将之前写好的package.json、webpack.config.js、tsconfig.json 复制到当前目录下2、使用 npm i 初始化环境3、在src目录下新建 index.html 和 index.ts4、安装工具：npm i -D less less-loader css-loader style-loader5、修改相关配置文件：（1）webpack.config.js： // 指定webpack打包时要使用的模块 module:{ //
复制链接

扫一扫