前端工程师新手一枚,之前一直做些小设计,以及静态页面的编写工作。刚刚接触 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;
}
} }

  

  

Angular4 自制打地鼠游戏的更多相关文章

  1. iOS版打地鼠游戏源码

    打地鼠游戏源码,游戏是一款多关卡基于cocos2d的iPad打地鼠游戏源码,这也是一款高质量的打地鼠游戏源码,可以拥有逐步上升的关卡的设置,大家可以在关卡时设置一些商业化的模式来盈利的,非常完美的一款 ...

  2. 无聊的人用JS实现了一个简单的打地鼠游戏

    直入正题,用JS实现一个简单的打地鼠游戏 因为功能比较简单就直接裸奔JS了,先看看效果图,或者 在线玩玩 吧 如果点击颜色比较深的那个(俗称坏老鼠),将扣分50:如果点击颜色比较浅的那个(俗称好老鼠) ...

  3. 打地鼠游戏iOS源码项目

    打地鼠游戏源码,游戏是一款多关卡基于cocos2d的iPad打地鼠游戏源码,这也是一款高质量的打地鼠游戏源码,可以拥有逐步上升的关卡的设置,大家可以在关卡时设置一些商业化的模式来盈利的,非常完美的一款 ...

  4. 团队项目——打地鼠游戏(SPEC)系统性能评估测试

    1.SPEC测试的目标: 本轮测试的目的是测试打地鼠游戏的需求以及确保每个需求都能得到满足的方法.编写此需求说明书是为了使用户和开发人员对所开发的系统有一致的理解.通过阅读此说明书,开发人员可以了解当 ...

  5. 自制javascript游戏-点燃火绳

    自制javascript游戏-点燃火绳 这是一款多关卡的游戏,目录有21个地图,游戏采纯原生 js库JY编写,所以编写得很简单迅速,这款游戏的思路来源于,一个人撸管太多,手会不会连鼠标也拿不稳,为了验 ...

  6. 打地鼠游戏ios源码

    打地鼠游戏源码,游戏是一款多关卡基于cocos2d的iPad打地鼠游戏源码,这也是一款高质量的打地鼠游戏源码,可以拥有逐步上升的关卡的设置,大家可以在关卡时设置一些商业化的模式来盈利的,非常完美的一款 ...

  7. Android打地鼠游戏源码带道具购买的Android游戏开发

    这是一款基于安卓的打地鼠游戏,界面简洁,有level模式打地鼠和无尽模式打地鼠两种游戏模式,并可以通过商店使用金币进行道具的购买,道具可以让你更容易通关:同时金币可以在游戏通关的时候获取.工程中有较为 ...

  8. 打地鼠游戏iOS源代码项目

    打地鼠游戏源代码,游戏是一款多关卡基于cocos2d的iPad打地鼠游戏源代码.这也是一款高质量的打地鼠游戏源代码.能够拥有逐步上升的关卡的设置,大家能够在关卡时设置一些商业化的模式来盈利的,很完美的 ...

  9. Android 多线程 打地鼠游戏

    前言:最近比较喜欢多线程了,看到了一些线程案例,这里总结一下打地鼠游戏的整个过程. 1.首先是主活动要加载的布局,我一般就喜欢早点把这个写上,这样就好在主活动中玩弄这些控件了.闲话不多说,一个Fram ...

随机推荐

  1. asp:FileUpload 上次图片

    <asp:FileUpload ID="FileUpload附件" runat="server" Width="200px" /> ...

  2. spring boot(9)-mybatis关联映射

    一对多 查询type表的某一条数据,并且要同时查出所有typeid与之配置的user,最终要得到一个以下类型的Type对象 public class Type { String id; String ...

  3. 关于 未在本地计算机上注册“VFPOLEDB.1” 的解决方案

    在很古老的时候猿们会使用 Microsoft Visual FoxPro(即Dbf)的数据库,用于对数据的存储,和Access类似,而且两者可以互转,可以把它当成数据文件,如Access数据(MDB) ...

  4. JSP中forEach和forTokens循环的用法

    <%@page import="java.util.*"%> <%@ page language="java" contentType=&qu ...

  5. MySQL Bug导致异常宕机的分析流程

    原文链接:http://click.aliyun.com/m/42521/ 摘要: 本文主要通过一个bug来记录一下如何分析一个MySQL bug的崩溃信息. 版本:Percona 5.7.17-11 ...

  6. Flask 的馈赠

    我们在之前用过装饰器  但是在装饰很多函数的时候  那么这些函数的名字都是装饰器内部函数的名字了怎么办呢? django中有functools进行保留你的函数名字保存 flask也可以使用functo ...

  7. 用UIScrollView产生视差效果

    用UIScrollView产生视差效果 效果: 高级效果: 源码: MoreInfoView.h  +  MoreInfoView.m // // MoreInfoView.h // YXCell / ...

  8. CSS一个属性,让图片后的文字垂直居中,效果看得见

    困扰我多年的疑难,终于解决了.哈哈哈,太爽了 背景 页面经常遇到,图片后面的文字显示在图片的中间部位,也就是说文字图片垂直居中. <div class="banner"> ...

  9. python_web应用雏型

    python_web应用雏型 Web应用程序顾名思义,就是一种可以通过Web访问的应用程序, Web应用的最大特点是用户只需要有网络和浏览器,不需要再安装其他软件就可顺利通过web访问到程序. WEB ...

  10. windows下PyCharm安装及使用

    一.首先安装pycharm,可以参考这篇文章:http://www.jianshu.com/p/042324342bf4 1.win10_X64,其他Win版本也可以. 2.PyCharm版本:Pro ...