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