Angular4 自制打地鼠游戏

前端工程师新手一枚，之前一直做些小设计，以及静态页面的编写工作。刚刚接触 Angular 没有多久，四个月前对于 Javascript也只是会写 alert 之流，现在进步算是很大，下面是自制的打地鼠游戏，是可以升级关卡的哦，希望大神临幸，千万别拍砖。

最后的成品是这样的，这是第四关：

HTML:

<div class="paddingv10 bg-white borderb text-center">
    <span><button (click)="gameStartFn()" class="fixWidth">Start</button></span>
    <span>Score: <em>{{score.scoreTotal}}</em></span>
    <span>Hit Rate: <em>{{score.hitRate}}%</em></span>
    <span>Time Left: <em>{{time.timeLeft}}</em></span>
    <span><button (click)="gameOverFn('failed')" class="fixWidth">End</button></span>
</div>
<div class="moleContent clear">

    <div>
        <ul class="moleField clear">
            <li *ngFor="let fd of field; let i = index;">
                <div *ngFor="let random of mole.randomDisplay">
                    <div *ngIf="i == random" class="mole" id="mole" (click)="hitFn(i)" [ngClass]="{ 'moleClicked': i == mole.clickedMole }"> </div>
                </div>
            </li>
        </ul>
    </div>

</div>
<div *ngIf="gameOver.isOver">
    <div class="mask">
        <div class="maskInner">
            Game Over! <br/>
            <button (click)="gameStartFn('restart')" class="flexWidth">Restart Game</button>
        </div>
    </div>
</div>
<div *ngIf="gameOver.isPassAll">
    <div class="mask">
        <div class="maskInner">
            Conguratulations! You passed all the barries! <br/>
            <button (click)="gameStartFn('restart')" class="flexWidth">Restart Game</button>
        </div>
    </div>
</div>

CSS:

* {
    padding: 0;
    margin: 0;
    border: 0;
}
body {
    background-color: #dedede;
}
button {
    height: 26px;
    line-height: 26px;
    background-color:blueviolet;
    color: #fff;
}
button.fixWidth {
    width: 80px;
}
button.flexWidth {
    padding: 0 10px;
}
button:hover {
    cursor: pointer;
}
.paddingv10 {
    padding-top: 10px;
    padding-bottom: 10px;
}
.paddingt10 {
    padding-top: 10px;
}
.paddingb10 {
    padding-bottom: 10px;
}
.paddingr30 {
    padding-right: 30px;
}
.marginr10 {
    margin-right: 10px;
}
.marginl10 {
    margin-left: 10px;
}
.borderb {
    border-bottom: solid 1px #cccccc;
}
.clear {
    clear: both;
}
.clear:before {
    content: '';
    display: block;
    clear: both;
}
.clear:after {
    content: '';
    display: block;
    clear: both;
}
.bg-white {
    background-color: #fff;
}
.bg-gray {
    background-color: #ccc !important;
}
.text-center {
    text-align: center;
}
.text-black {
    color: #333;
}
.text-red {
    color: lightcoral;
}
.fs-26 {
    font-size: 26px;
}
.mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
    font-size: 26px;
    color: orange;
    font-weight: bolder;
    text-align: center;
    padding-top: 100px;
}

.moleContent {
    width: 1020px;
    margin: 0 auto;
}
.moleField {
    width: 500px;
    margin: 10px auto 0;
}
.moleField:hover {
    cursor: -webkit-grabbing;
}
.moleField li {
    float: left;
    width: 100px;
    height: 100px;
    background-color: gold;
    list-style-type: none;
    border: 1px #dedede solid;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}
.moleField li.score {
    animation: scoreAnimation .5s;
    position: absolute;
    bottom: 500px;
    left: 50%;
    opacity: 0;
}
.mole {
    width: 50px;
    height: 50px;
    background-color: #ccc;
    border-radius: 50%;
    position: absolute;
    left: 26px;
    top: 30px;
    animation: moleDisplay 1s;
}
.mole:before, .mole:after  {
    content: '';
    width: 50%;
    height: 50%;
    background-color: #ccc;
    border-radius: 50%;
    position: absolute;
    top: -20%;
    left: -20%;
}
.mole:after {
    left: 70%;
}
.mole.tranparent {
    opacity: 1;
}
@keyframes moleDisplay {
    0% { top: 200px; }
    50% { top: 30px; }
    100% { top: 30px; }
}
.moleClicked {
    animation: moleClickingAnimation .5s;
    opacity: 0;
}
.moleClicked:before {
    animation: moleClickingLeftEar .5s;
    opacity: 0;
    top: -200%;
    left: -200%;
}
.moleClicked:after {
    animation: moleClickingRightEar .5s;
    opacity: 0;
    top: -200%;
    left: 250%;
}
@keyframes moleClickingAnimation {
   0% { opacity: 1;  }
   100% { opacity: 0; }
}
@keyframes moleClickingLeftEar {
    0% { opacity: 1; top: -20%; left: -20%;  }
   100% { opacity: 0; top: -200%; left: -200%;  }
}
@keyframes moleClickingRightEar {
    0% { opacity: 1; top: -20%; left: 70%; }
   100% { opacity: 0; top: -200%; left: 250%; }
}

TS:

import { Component, OnInit } from '@angular/core';

@Component({
    templateUrl: './whacMole.component.html',
    styleUrls: ['./whacMole.component.css']
})

export class WhacMoleComponent implements OnInit {
    private barrier: number = 1; // 关卡数
    private maxBarrier: number;  // 最大关卡数，可以不设置
    private field: Array<any> = [];  // 田地格子
    private columnNum: number;  // 田地的行数和列数
    private time: any;
    private mole: any;
    private score: any;
    private timeCounting: any;
    private disploayMoling: any;
    private gameOver: any = { isOver: false, isPassAll: false };

    constructor(){ }

    ngOnInit(){
        this.initData();
    }

    initData(){
        this.gameOver.isOver = false;
        this.gameOver.isPassAll = false;
        this.columnNum = this.barrier * 5;
        this.time = { timeTotal: 30, timeLeft: 0, autoDisplaySpacing: 3 };
        this.time.timeLeft = this.time.timeTotal;
        this.mole = { randomDisplay: undefined, clickedMole: undefined, moleShowed: 0 };
        this.score = { scoreTotal: 0, hitRate: 0, hitCount: 0};
        this.field = [];
        for(let i = 0; i < this.columnNum; i++) {
            this.field.push( { id: i, clicked: false });
        }
    }

    timeCountFn(){
        // 每一秒调用一次函数倒计时
        this.timeCounting = setInterval(() => {
            this.time.timeLeft--;
            if (this.time.timeLeft <= 0){
                this.gameStopFn();
            }
         }, 1000);
    }
    displayMoleFn(num){
        // 根据不同的关卡，每一关传入的参数不同，地鼠出现的频率也不同
        this.disploayMoling = setInterval(() => {
            this.mole.clickedMole = undefined;
            this.mole.randomDisplay = [];
            let temRandomDisplay = [];

            // 随机生成老鼠出现的位置
            for(let i = 0; i < this.barrier; i++){
                this.mole.randomDisplay[i] = Math.round(Math.random() * (this.field.length - 1) );
            }
            // 随机出现老鼠去重
            for(let i = 0; i < this.mole.randomDisplay.length; i++){
                if(temRandomDisplay.indexOf(this.mole.randomDisplay[i]) == -1){
                    temRandomDisplay.push(this.mole.randomDisplay[i]);
                }
            }
            this.mole.moleShowed = this.mole.moleShowed + temRandomDisplay.length;
            // 重置为未点击状态
            for(let i = 0; i < this.field.length; i++){
                this.field[i].clicked = false;
            }
            // 刷新击打百分比
            this.hitRateFn();
        }, num*1000);
    }
    hitFn(num) {
        // 计算击中数量
        if(this.field[num].clicked == true){
            return;
        }
        this.score.hitCount++;
        this.score.scoreTotal = this.score.hitCount * 10;
        this.mole.clickedMole = num;
        this.field[num].clicked = true;
        this.hitRateFn();
    }
    hitRateFn(){
        // 计算击中率
        let hitRate = this.score.hitCount / this.mole.moleShowed;
        this.score.hitRate = Math.floor(hitRate * 100);
    }

    gameStartFn(flag: string){
        // 开始游戏
        if(flag == 'restart') {
            this.barrier = 1;
        }
        this.initData();
        this.timeCountFn();
        this.displayMoleFn(this.time.autoDisplaySpacing);
    }
    gameStopFn(){
        // 游戏结束
        clearInterval(this.timeCounting);
        clearInterval(this.disploayMoling);

        // 如果击中率大于60%，可以选择进入下一关；否则，直接game over
        if(this.score.hitRate > 60 ) {
            let confirmResult = confirm('Section ' + this.barrier + ' is stopping! \n Your total score is ' + this.score.scoreTotal + '\n Your hit rate is ' + this.score.hitRate + '\n Would you like to go on to next section?');
            if(confirmResult){
                this.barrier++;
                if(this.barrier > this.maxBarrier){
                    this.gameOverFn('allpass');

                } else {
                    this.initData();
                    this.gameStartFn('continue');
                }
            } else {
                this.gameOverFn('failed');
            }
        } else {
            this.gameOverFn('failed');
        }
    }
    gameOverFn(flag: string){
        // 游戏结束
        clearInterval(this.timeCounting);
        clearInterval(this.disploayMoling);
        if(flag == 'failed') {
            this.gameOver.isOver = true;
            this.gameOver.isPassAll = false;
        } else if (flag == 'allpass'){
            this.gameOver.isOver = false;
            this.gameOver.isPassAll = true;
        }
    }

}