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

结构文件

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

样式文件

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

开始文件

import './style/index.less'

import GameControl from './modules/GameControl';

new GameControl();