1. // webpack
  2. const path = require("path")
  4. module.exports = {
  5.   entry: './src/index.ts',
  6.   output: {
  7.     path: path.resolve(__dirname, "dist"),
  8.     filename: 'bundle.js'
  9.   },
  10.   module: {
  11.     rules: [
  12.       {
  13.         test: /\.ts$/,
  14.         use: [/* {
  15.           loader: 'babel-loader',
  16.           options: {
  17.             // 设置预定义的环境
  18.             presrts: [
  19.               [
  20.                 // 指定环境插件
  21.                 '@babel/preset-env',
  22.                 // 配置信息
  23.                 {
  24.                   // 要兼容的目标浏览器
  25.                   targets: {
  26.                     "chrome":"88"
  27.                   },
  28.                   // 指定corejs的版本
  29.                   "corejs": "3",
  30.                   // 使用corejs的方式“usage”表示按需加载
  31.                   "useBuiltIns":"usage"
  32.                 }
  33.               ]
  34.             ]
  35.           }
  36.         }, */
  37.           'ts-loader'],
  38.         exclude: /node-modules/
  39.       },
  40.       // 设置less文件的处理
  41.       {
  42.         test: /\.less$/,
  43.         use: [
  44.           'style-loader',
  45.           'css-loader',
  46.           {
  47.             loader: 'postcss-loader',
  48.             options: {
  49.               postcssOptions: {
  50.                 plugins: [
  51.                   [
  52.                     'postcss-preset-env',
  53.                     {
  54.                       browsers:'last 2 versions'
  55.                     }
  56.                   ]
  57.                 ]
  58.               }
  59.             }
  60.           },
  61.           'less-loader'
  62.         ]
  63.       }
  64.     ]
  65.   }
  66. }

结构文件

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>贪吃蛇</title>
  9. </head>
  11. <body>
  12.   <!-- 创建游戏的主容器 -->
  13.   <div id="main">
  14.     <!-- 设置游戏的舞台 -->
  15.     <div id="stage">
  16.       <!-- 设置蛇 -->
  17.       <div id="snake">
  18.         <div></div>
  19.       </div>
  21.       <!-- 设置食物 -->
  22.       <div id="food">
  23.         <div></div>
  24.         <div></div>
  25.         <div></div>
  26.         <div></div>
  27.       </div>
  28.     </div>
  30.     <!-- 设置游戏的积分牌 -->
  31.     <div id="score-panel">
  32.       <div>
  33.         SCORE: <span id="score">0</span>
  34.       </div>
  35.       <div>
  36.         level: <span id="level">1</span>
  37.       </div>
  38.     </div>
  39.   </div>
  41.   <script src="./bundle.js"></script>
  42. </body>
  44. </html>

样式文件

  1. // index.less
  2. // 设置变量
  3. @bg-color:#b7d4a8;
  5. // 清除默认样式
  6. *{
  7.   margin: 0;
  8.   padding: 0;
  9.   // 改变盒子模型的计算方式
  10.   box-sizing: border-box;
  11. }
  13. body{
  14.   font: bold 20px "Courier";
  15. }
  17. // 设置主窗口的样式
  18. #main{
  19.   width: 360px;
  20.   height: 420px;
  21.   background-color: @bg-color;
  22.   margin: 100px auto;
  23.   border: 10px solid black;
  24.   border-radius: 40px;
  26.   display: flex;
  27.   flex-flow: column;
  28.   align-items: center;
  29.   justify-content: space-around;
  31.   // 游戏舞台
  32.   #stage{
  33.     width: 304px;
  34.     height: 304px;
  35.     border: 2px solid black;
  36.     position: relative;
  38.     // 设置蛇的样式
  39.     #snake {
  40.       &>div{
  41.         width: 10px;
  42.         height: 10px;
  43.         background-color: #000;
  44.         border: 1px solid @bg-color;
  45.         position: absolute;
  46.       }
  47.     }
  49.     // 设置食物
  50.     #food{
  51.       position: absolute;
  52.       width: 10px;
  53.       height: 10px;
  54.       left: 40px;
  55.       top: 100px;
  56.       display: flex;
  57.       flex-flow: row wrap;
  58.       justify-content: space-between;
  59.       align-content: space-between;
  61.       &>div{
  62.         width: 4px;
  63.         height: 4px;
  64.         background-color: black;
  65.         transform: rotate(45deg);
  66.       }
  67.     }
  68.   }
  70.   // 记分牌
  71.   #score-panel{
  72.     width: 300px;
  73.     display: flex;
  74.     justify-content: space-between;
  75.   }
  76. }

开始文件

import './style/index.less'

import GameControl from './modules/GameControl';

new GameControl();