人家用ts看电影，我用ts玩贪食蛇！
站长
· 阅读数 10
界面展示
环境搭建
- 小游戏的第一步就是地图和基础资源搭建了
- 这里包括HTML代码全部都是由ts进行注入的。
//引入less布局
import "./public/style/index.less";
//修改页面title
document.title = "贪吃蛇";
//声明函数 将px转为rem
function getPosition(position: number) {
let size = getComputedStyle(window.document.documentElement)["fontSize"];
return position/ parseInt(size.replace(/px/, ""));
}
//获取body注入主体
let body: HTMLElement = document.body;
//一格为0.5rem
body.innerHTML += `
<!--- 主窗口 --->
<div class="outWin">
<div class="win">
<div class="snake"></div>
</div>
<div class="foot">
<p class="score">SCORE
<p id="score"></p>
<p class="level">
LEVEL
<p id="level"></p>
</p>
</div>
</div>`;
积分和等级类
- 在这里我定义了两个参数一个是积分，一个是等级，
- 同时对他们进行setter来控制数据修改的同时修改dom
//定义积分类
class ScoreLevel {
_score: number;
_level: number;
constructor() {
this.score = 0;
this.level = 1;
}
set score(value: number) {
this._score = value;
let score: HTMLElement = document.querySelector("#score");
score.innerText = this._score.toString();
if (this._score == this._level * 5) {
this._score = 0;
this.level = this._level +=1;
}
}
set level(value: number) {
this._level = value;
let level: HTMLElement = document.querySelector("#level");
level.innerText = this._level.toString();
}
addScore() {
this.score = this._score + 1;
}
}
Food类
- 这里使用了getter来获取food的x和y。
- 在构造函数中完成了对food的初始化。
//定义food类
class Food {
element: HTMLElement;
constructor() {
let win = document.querySelector(".win");
let food=document.createElement("div")
food.innerHTML=`
<div></div>
<div></div>
<div></div>
<div></div>`
food.className="food"
win.appendChild(food);
this.element = document.querySelector(".food");
//最大9.5rem 最小0px
this.element.style.left = `${Math.random() * 9.5}rem`;
this.element.style.top = `${Math.random() * 9.5}rem`;
}
get X() {
return getPosition(this.element.offsetLeft);
}
get Y() {
return getPosition(this.element.offsetTop);
}
}
snake类
- Snake类主要有一个body list组成。
- 其所有函数都是为了获取body list或修改body的数据。
- 并且snake类也同样在造函数中完成了对snake的初始化。
//snake类
class Snake {
bodyList:HTMLElement[];
constructor() {
let snake = document.querySelector(".snake");
let head = document.createElement("div");
this.bodyList=[];
head.className = "head";
this.bodyList.push(head);
head.style.top="0";
head.style.left="0";
snake.appendChild(head);
this.addBody();
}
get headX() {
return getPosition(this.bodyList[0].offsetLeft);
}
set headX(value:number){
this.bodyList[0].style.left=this.headX+value+"rem"
}
get headY() {
return getPosition(this.bodyList[0].offsetTop);
}
set headY(value:number){
this.bodyList[0].style.top=this.headY+value+"rem"
}
addBody() {
let body:HTMLElement = document.createElement("div");
body.className = "body";
this.bodyList.push(body);
let snake = document.querySelector(".snake");
snake.append(body);
}
}
游戏控制类
- 这个类也是最重要的一个类。
- 主要作用是监视键键盘事件，并在键盘事件中根据键盘按键。来进行x值和y值的函数调用。 3.在调用中监视Head的x值和y值是否越界或是否与food重叠
//GameControl
class GameControl {
snake: Snake;
food: Food;
scoreLevel: ScoreLevel;
timerX:any
timerY:any
audio:HTMLAudioElement
constructor() {
this.food = new Food();
this.scoreLevel = new ScoreLevel();
this.snake = new Snake();
this.audio=document.querySelector("audio")
document.addEventListener("keydown", this.keyDown.bind(this))
}
keyDown(event: KeyboardEvent) {
let key = event.key;
switch (key) {
case "ArrowUp":
this.moveY(-0.5);
break;
case "ArrowDown":
this.moveY(0.5);
break;
case "ArrowLeft":
this.moveX(-0.5);
break;
case "ArrowRight":
this.moveX(0.5);
break;
}
}
moveX(num:number){
this.gameTest();
clearInterval(this.timerY)
clearInterval(this.timerX)
this.timerX=setInterval(()=>{
this.snake.headX=num;
this.gameTest();
this.moveBody();
},240-20*this.scoreLevel._level)
}
moveY(num:number){
clearInterval(this.timerY)
clearInterval(this.timerX)
this.timerY=setInterval(()=>{
this.snake.headY=num;
this.gameTest();
this.moveBody();
},240-20*this.scoreLevel._level)
}
moveBody(){
for(let i=this.snake.bodyList.length-1;i>0;i--){
this.snake.bodyList[i].style.left= this.snake.bodyList[i-1].style.left
this.snake.bodyList[i].style.top= this.snake.bodyList[i-1].style.top
}
}
getFood(){
if(Math.abs(this.snake.headX-this.food.X)<0.5&&Math.abs(this.snake.headY-this.food.Y)<0.5){
this.scoreLevel.addScore()
this.food.element.remove();
this.food=new Food()
this.snake.addBody()
}
}
async outWin(){
if(this.snake.headX<0||this.snake.headX>9.5||this.snake.headY<0||this.snake.headY>10){
await this.audio.play();
window.alert("GameOver")
window.location.reload();
clearInterval(this.timerX)
clearInterval(this.timerY)
}
}
gameTest(){
this.getFood();
this.outWin();
}
}
难点解析与思考
- 整体的逻辑都非常简单。
- 唯一的难点是在控制蛇身体移动的函数
- 这里采用了for循环，用遍历的形式前一项div的位置给予后一项div
less代码
@media screen and(max-device-width:600px){
html{
font-size:12px;
}
}
@media screen and(min-device-width:600px) and (max-device-width:1200px) {
html{
font-size:24px;
}
}
@media screen and(min-device-width:1200px) and (max-device-width:1800px) {
html{
font-size:36px;
}
}
@media screen and (min-device-width:1800px) {
html{
font-size:42px;
}
}
body{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.outWin{
border-radius: 3px;
background-color: rgb(139, 190, 139);
height:14rem;
width:12rem;
border:0.3rem black solid;
padding: 0.3rem;
display: flex;
flex-direction: column;
align-items: center;
.win{
height:10rem;
width:10rem;
border:0.1rem black solid;
position: relative;
.snake{
// position: absolute;
&> div{
position: absolute;
width: 0.25rem;
height: 0.25rem;
background-color: black;
}
}
}
.foot{
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-around;
align-items: flex-end;
p{
display: flex;
flex-direction: row;
}
}
}
@keyframes foodFlashing {
from {opacity: 0;}
to {opacity: 1;}
}
.food{
width:0.25rem;
height: 0.25rem;
position:absolute;
display: flex;
flex-direction: row;
margin:0.15rem;
animation: foodFlashing 1s infinite;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
div{
background-color: black;
width: 0.1rem;
height:0.1rem;
border-radius: 5%;
}
}