抽奖小游戏

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;  //第level级奖品  此轮结束就已抽完

  }

  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: "甲六"
    },
]