html
<div class="main">
<div class="content">
<div class="gift">
{{selgift.text}}
</div>
<div class="username">
{{seluser.text}}
</div>
<ng-container *ngIf="isStart">
<div class="start" (click)="stop()" style="background-image: url('/assets/stop.png');">
</div>
</ng-container>
<ng-container *ngIf="!isStart">
<div class="start" (click)="start()" style="background-image: url('/assets/start.png');">
</div>
</ng-container>
</div>
<div class="background"></div>
</div>
ts
import { Component, HostListener } from '@angular/core';
import { Gift, GIFT_LIST } from './gift-list';
import { User, USER_LIST } from './user-list';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
allUser = USER_LIST;
allGift = GIFT_LIST;
last_seluser: User = USER_LIST[0];
seluser: User = USER_LIST[0];
luckUserList = [];
luckGiftList = [];
id;
isStart: boolean = false;
howManyPlay: Array<{
level: Number,
completed: boolean
}> = [{ level: 3, completed: false },
{ level: 2, completed: false },
{ level: 1, completed: false },
{ level: 4, completed: false }];
selgift: Gift = GIFT_LIST.find(i => i.level == this.howManyPlay[0].level);
@HostListener('document:keydown', ['$event'])
onkeydown(event) {
let keyCode = event.keyCode;
if (keyCode == 32) {
if (this.isStart) {
this.stop();
} else {
this.start();
}
}
}
start() {
this.isStart = true;
console.log(`剩余${this.allUser.length}人`)
console.log(this.allUser)
let level: Number = this.howManyPlay.find(item => item.completed == false).level;
let gift: Array<Gift> = this.allGift.filter(item => item.level == level && !item.completed);
this.selgift = gift[0];
if (this.allUser.length <= 0) {
alert("候选名单为空");
this.isStart = false;
return;
} else if (this.allUser.length == 1) {
this.seluser = this.allUser[0];
this.isStart = false;
alert("候选名单仅剩1人");
return;
}
this.id = setInterval(() => {
while (this.seluser.username == this.last_seluser.username) {
let index = Math.floor(Math.random() * this.allUser.length)
this.seluser = this.allUser[index];
}
this.last_seluser = this.seluser
console.log(this.last_seluser);
}, 100)
this.allGift.filter(item => item.level == level && !item.completed)[0].completed = true;
this.howManyPlay.find(item => item.level == level).completed = gift.length <= 1 ? true : false;
}
stop() {
this.isStart = false;
this.allUser = this.allUser.filter(u => u.username != this.seluser.username);
this.luckUserList.push(this.seluser.text);
console.log(this.luckUserList);
clearInterval(this.id);
}
}
scss
.main {
position: fixed;
width: 100%;
height: 100%;
min-width: 1200px;
background-color: #fafbed;
.background {
width: 100%;
height: 100%;
background-image: url("~/assets/background.png");
background-size: 100% 100%;
align-items: center;
}
.content {
position: absolute;
width: 40%;
height: 60%;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.gift {
position: absolute;
width: 480px;
height: 70px;
top: 17%;
left: calc(50% - 240px);
text-align: center;
font-size: 45px;
}
.username {
position: absolute;
width: 450px;
height: 100px;
top: 50%;
left: calc(50% - 225px);
text-align: center;
font-size: 80px;
}
.start {
position: absolute;
background-repeat: no-repeat;
background-size: contain;
width: 200px;
height: 75px;
bottom: 0;
left: calc(50% - 100px);
}
}
gift-list.ts
export interface Gift {
giftname: string,
text: string,
level: Number,
completed: boolean
}
export const GIFT_LIST: Array<Gift> = [
{
giftname: "walkTool",
text: "11",
level: 1,
completed: false
},
{
giftname: "kindsPot",
text: "21",
level: 2,
completed: false
},
{
giftname: "riceCooker",
text: "31",
level: 3,
completed: false
},
{
giftname: "breaker",
text: "32",
level: 3,
completed: false
},
{
giftname: "breaker2",
text: "33",
level: 3,
completed: false
},
]
user-list.ts
export interface User {
username: string,
text: string
}
export const USER_LIST: Array<User> = [
{
username: "zhangsan",
text: "张三"
},
{
username: "lisi",
text: "李四"
},
{
username: "wangwu",
text: "王五"
},
{
username: "jialiu",
text: "甲六"
},
]