【vue课程设计】vue课程设计--随机小游戏游戏设计

1、引言

 

设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决

2、作品介绍

随机小游戏游戏设计系统采用vue，javascript技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。

2.1、作品简介方面 

随机小游戏游戏设计系统采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选

2.2、作品二次开发工具

此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用），java，python等相关作业使用自己常使用的工具亦可完成相关二次开发。

2.3、作品技术介绍

html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。 使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计

vue作品技术方面：使用vue技术开发的网站，涉及常见的vue指令，如v-for，v-if，v-show，v-html等的使用，包含watch，计算属性等常见功能的开发，以及组件的使用，使用vue相关全家桶的使用，运用了v-router来作为路由，完全符合常见的网站开发技术。同时也会使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。

3、作品介绍

【coding加油站】vue程序设计---屏幕随机挑选游戏

相关图片：

相关代码：

<template>
  <div id="app" @click="click">
    <div id="desc" v-if="!bStarted">
      <div class="pp title">The Shy</div>
      <div class="pp">
        😄大家将一个手指按到屏幕上任何位置, 系统随机挑选一个shy shy的Ta,
        随机决定是谁喝酒、取外卖、洗碗等等
      </div>

      <div class="nigeerhuo tab-icon">&#xe6f7;</div>
    </div>

    <main>
      <div class="loaders">
        <div class="loader">
          <div class="ball-pulse">
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
      </div>
    </main>

    <div
      ref="countDownContainer"
      id="count-down-container"
      v-show="bShowCountDown"
    >
      {{ countDownIndex }}
    </div>

    <template v-for="ball in balls">
      <Ball :color="ball.color || 'orange'" :x="ball.x" :y="ball.y" :key="ball.x"></Ball>
    </template>

    <template v-for="(ball, index) in ballsV2">
      <Ball2
      :key="index"
        :ref="'ball-' + index"
        :x="ball.x"
        :y="ball.y"
        :main-color="ball.color"
        :zi="ball.zi"
        :ball="ball"
      ></Ball2>
    </template>

    <button v-if="bEnd" id="reload" @click.stop="reload()">再来一次</button>
  </div>
</template>

<script>
import Ball from "./components/Ball";
import Ball2 from "./components/Ball2";
import { sleep } from "./common";

export default {
  name: "app",
  components: {
    Ball,
    Ball2,
  },
  data() {
    return {
      balls: [],
      ballsV2: [],
      ziList: [
        "炸鲜奶",
        "面条",
        "宽面",
        "水饺",
        "馄饨",
        "土豆肉丝",
        "番茄炒蛋",
        "佛跳墙",
        "炸串",
        "火锅",
        "羊肉",
        "牛肉",
        "苹果",
      ],
      usedZiList: [],
      colors: ["#4285f4", "#A7A7A7", "#fbbc05", "#769cdb", "#45ad61"],
      usedColors: [],
      bStarted: false,
      bShowCountDown: false,
      bCountDownOver: null,
      countDownIndexInit: 3,
      countDownIndex: 3,
      countDownInterval: null,
      randomChooseIndex: 0,
      defaultBounceColor: "#F46445",
      maxSupportUsers: 12,

      changeMS: 1000,
      initChangeMS: 1000,
      minChangeMS: 200,
      minChangeMSLastMS: 3000,
      changeMSX: 0,
      sleepMS: 40,

      bEnd: false,
      intervalsWaitClear: [],
    };
  },
  created() {},
  mounted() {
    let style = document.createElement("style");
    style.innerHTML = `#count-down-container{line-height:${
      window.innerHeight
    }px;}`;
    document.body.appendChild(style);
  },
  watch: {
    countDownIndex(newVal, oldVal) {
      if (newVal <= 0) {
        this.randomChoose();
        this.modifyChangMS();
        this.finalSelect();
      }
    },
    bEnd(newVal, oldVal) {
      if (this.bEnd) {
        this.theshy();
      }
    },
  },
  methods: {
    reload() {
      window.location.reload();
    },
    theshy() {
      let ball = this.ballsV2[this.randomChooseIndex];
      this.ballsV2 = [ball];
      this.bounceBall(ball, true);
    },
    finalSelect() {
      let len = this.ballsV2.length;
      setTimeout(() => {
        this.bEnd = true;
        this.clear();
      }, (len * 1.2 + len * Math.random()) * 1000);
    },
    clear() {
      this.intervalsWaitClear.forEach((i) => clearInterval(i));
    },
    modifyChangMS() {
      let x = 0;
      let interval = setInterval(() => {
        x += 50;
        if (x <= 3000) {
          this.changeMS =
            (-(this.initChangeMS - this.minChangeMS) / 3000) * x +
            this.initChangeMS;
        } else if (x > 3000 && x < 6000) {
        } else {
          this.changeMS += 5 + Math.random() * 10;
        }
      }, 50);
      this.intervalsWaitClear.push(interval);
    },
    addBall(x, y) {
      this.balls.push({
        x,
        y,
        name: "x",
        color: "#ea4436",
      });
    },
    randomColor() {
      let i = 0;
      let max = 50;
      while (true) {
        let randomIndex = Math.floor(Math.random() * this.colors.length);
        let chooseColor = this.colors[randomIndex];
        if (this.usedColors.indexOf(chooseColor) === -1) {
          this.usedColors.push(chooseColor);
          return chooseColor;
        }

        if (i++ > max) {
          return chooseColor;
        }
      }
    },
    randomZI() {
      while (true) {
        let randomIndex = Math.floor(Math.random() * this.ziList.length);
        let zi = this.ziList[randomIndex];
        if (this.usedZiList.indexOf(zi) === -1) {
          this.usedZiList.push(zi);
          return zi;
        }
      }
    },
    addBallV2(x, y) {
      let color = this.randomColor();
      let zi = this.randomZI();
      this.ballsV2.push({
        x,
        y,
        color,
        zi,
      });
    },

    countDown() {
      if (this.countDownInterval) return;
      this.bShowCountDown = true;
      this.bCountDownOver = false;

      this.countDownInterval = setInterval(() => {
        this.countDownIndex -= 1;
        if (this.countDownIndex <= 0) {
          clearInterval(this.countDownInterval);
          this.bCountDownOver = true;
          this.countDownInterval = null;
          this.bShowCountDown = false;
        }
      }, 1000);
    },
    click(ev) {
      if (this.ballsV2.length > this.maxSupportUsers) {
        return;
      }
      if (this.bCountDownOver === true) return;

      this.bStarted = true;
      this.countDownIndex = this.countDownIndexInit;

      let { clientX, clientY } = ev;
      // this.addBall(clientX, clientY);
      this.addBallV2(clientX, clientY);
      this.countDown();
    },
    bounceBall(ball, bBounce) {
      if (bBounce) {
        ball.bounceColor = this.defaultBounceColor;
      } else {
        ball.bounceColor = null;
      }
    },
    async randomChoose() {
      this.randomChooseIndex = Math.floor(Math.random() * this.ballsV2.length);
      while (true) {
        if (this.bEnd) {
          break;
        }
        let ball = this.ballsV2[this.randomChooseIndex];

        this.bounceBall(ball, true);
        console.log(`sleep ${this.changeMS}`);
        await sleep(this.changeMS);

        if (this.bEnd) {
          break;
        }

        this.randomChooseIndex =
          (this.randomChooseIndex + 1) % this.ballsV2.length;
        this.bounceBall(ball, false);
      }
    },
    mousedown(ev) {
      console.log("", ev);
    },
    mouseup(ev) {
      console.log(ev);
    },
  },
};
</script>

<style>
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  color: #333;
}

html,
body {
  width: 100%;
  height: 100%;
  position: fixed;
}

.tab-icon {
  font-size: 100px;
  color: #aaa;
  margin-top: 100px;
}
#info {
  position: fixed;
  left: 0;
  bottom: 0;
  font-size: 12px;
  color: #aaa;
  padding: 5px;
}
#info a {
  color: #aaa;
}

#desc {
  width: 80%;
  margin: 20% auto;
  text-align: center;
}
#desc .pp {
  margin: 10px;
  color: #999;
}
#desc .title {
  font-size: 30px;
  font-weight: bold;
}

#app {
  width: 100%;
  height: 100%;
}

.loader {
  box-sizing: border-box;
  display: -ms-flexbox;
  display: flex;
}

#reload {
  width: 150px;
  padding: 10px;
  background-color: #409eff;
  color: white;
  position: fixed;
  left: 50%;
  bottom: 20%;
  transform: translateX(-50%);
  text-align: center;
  font-weight: 500;
  border: 1px solid #409eff;
  border-radius: 4px;
}

#count-down-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 180px;
  color: #f3f3f3;
}
</style>