前言
这个项目是参考尚硅谷TypeScript教程写的，自己做了一些改进，目的是为了练习TypeScript的写法，学会用TS的思维去写代码。
1 项目界面搭建
-
html结构
<body> <!--创建游戏的主容器 --> <div id="main"> <!-- 设置游戏的舞台 --> <div id="stage"> <!-- 设置蛇 --> <div id="snake"> <!-- snake内部的div 表示蛇的各部分--> <div></div> </div> <!-- 设置食物 --> <div id="food"> <!-- 设置四个小div来设置食物的样式 --> <div></div> <div></div> <div></div> <div></div> </div> </div> <!-- 设置计分盘 --> <div id="score-panel"> <div> SCORE:<span id="score">0</span> </div> <div> level:<span id="level">1</span> </div> </div> </div> </body -
less结构
//设置变量 @bg-color:#b7d4a8; //清除默认样式 *{ padding: 0; margin: 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:20px; //开启弹性盒模式 display: flex; //设置主轴方向，自上而下 flex-flow: column; //设置主轴的对齐方向 justify-content: space-around; //设置侧轴的对齐方式 align-items: center; //游戏的舞台 #stage{ width:304px; height:304px; border: 2px solid black; //开启相对定位 position: relative; //设置蛇的样式 注意这里设置的是snake里面的div的样式 #snake{ &>div{ width: 10px; height: 10px; background-color: black; // margin-right: 2px; //这里为蛇的身体设置一个边框，目的是为了让蛇的每一段分开， //由于边框的背景颜色和舞台的背景颜色一样，所以我们看到的蛇是一段段的 border: 1px solid @bg-color; //开启绝对定位,因为蛇的移动要有参照物 position: absolute; } //蛇头是红色的，便于区分 &>div:first-child{ background-color: red; } } #food{ width: 10px; height: 10px; //background-color: rgb(167, 37, 37); // border: 1px solid @bg-color; position: absolute; left: 40px; top:100px; display: flex; //设置横轴为主轴，warp表示自动换行 flex-flow: row wrap; justify-content: space-between; align-content: space-between; &>div{ width
最低0.47元/天 解锁文章
4545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
