Insect Catch Game:捉虫游戏

README.md

@@ -53,3 +53,5 @@
 - **day47:Testimonial Box Switcher:简介卡片**
 - **day48:Random Image Feed:随机图片+懒加载**
 - **day49:ToDoList:待办清单**
+- **day50:Insect Catch Game:捉虫游戏**
+- **收官！**

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^1.1.2",
+    "dayjs": "^1.11.6",
     "nanoid": "^4.0.0",
     "vue": "^3.2.37",
     "vue-lazyload": "^3.0.0-rc.2",

src/main.js

@@ -4,11 +4,14 @@ import "./styles/init.css"
 import App from "./App.vue"
 import "./mock"
 import VueLazyload from "vue-lazyload"
+import dayjs from "dayjs"
 
 // 设置title
 router.beforeEach((to, from, next) => {
   document.title = to.meta.title
   next()
 })
 const app = createApp(App)
+
+app.config.globalProperties.dayjs = dayjs
 app.use(router).use(VueLazyload).mount("#app")

src/router/index.js

@@ -5,7 +5,7 @@ export const router = createRouter({
   routes: [
     {
       path: "/",
-      redirect: "/day49",
+      redirect: "/day50",
     },
     {
       path: "/day01",
@@ -398,5 +398,13 @@ export const router = createRouter({
       },
       component: () => import("../views/Day49_ToDoList/Index.vue"),
     },
+    {
+      path: "/day50",
+      name: "day50",
+      meta: {
+        title: "Insect Catch Game",
+      },
+      component: () => import("../views/Day50_InsectCatchGame/Index.vue"),
+    },
   ],
 })

src/views/Day50_InsectCatchGame/Index.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="body">
+    <div :class="['screen', start ? 'up' : '']">
+      <h1>Catch The Insect</h1>
+      <button class="btn" id="start-btn" @click="start = true">Play Game</button>
+    </div>
+
+    <div :class="['screen', startgame ? 'up' : '']">
+      <h1>What is your "favorite" insect?</h1>
+      <ul class="insects-list">
+        <li v-for="insert in insectsList" :key="insert.id">
+          <button class="choose-insect-btn" @click="startGame(insert)">
+            <p>{{ insert.name }}</p>
+            <img :src="insert.src" :alt="insert.alt" />
+          </button>
+        </li>
+      </ul>
+    </div>
+
+    <div class="screen game-container" ref="gameContainer">
+      <h3 id="time" class="time">{{ increaseTime }}</h3>
+      <h3 id="score" class="score">Score: {{ score }}</h3>
+      <h5 id="message" class="message" v-if="visible">
+        Are you annnoyed yet? <br />
+        You are playing an impossible game!!
+      </h5>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { nanoid } from "nanoid";
+let timer
+const start = ref(false)
+const startgame = ref(false)
+const visible = ref(false)
+const seconds = ref(0)
+const score = ref(0)
+const curInsect = ref()
+const gameContainer = ref()
+const insectsList = ref([
+  { id: nanoid(), insert: "Fly", src: "http://pngimg.com/uploads/fly/fly_PNG3946.png", alt: "fly" },
+  { id: nanoid(), insert: "Mosquito", src: "http://pngimg.com/uploads/mosquito/mosquito_PNG18175.png", alt: "mosquito" },
+  { id: nanoid(), insert: "Spider", src: "http://pngimg.com/uploads/spider/spider_PNG12.png", alt: "spider" },
+  { id: nanoid(), insert: "Roach", src: "http://pngimg.com/uploads/roach/roach_PNG12163.png", alt: "roach" },
+])
+
+
+const startGame = (insert) => {
+  startgame.value = true
+  curInsect.value = insert
+  setTimeout(createInsect, 1000)
+  timer = setInterval(() => {
+    seconds.value++
+  }, 1000)
+}
+
+const increaseTime = computed(() => {
+  let m = Math.floor(seconds.value / 60)
+  let s = seconds.value % 60
+  m = m < 10 ? `0${m}` : m
+  s = s < 10 ? `0${s}` : s
+  return `Time: ${m}:${s}`
+})
+
+const createInsect = () => {
+  const insect = document.createElement("div")
+  insect.classList.add("insect")
+  const { x, y } = getRandomLocation()
+  insect.style.top = `${y}px`
+  insect.style.left = `${x}px`
+  insect.innerHTML = `<img src="${curInsect.value.src}" alt="${curInsect.value.alt
+    }" style="transform: rotate(${Math.random() * 360}deg)" />`
+
+  insect.addEventListener("click", catchInsect)
+
+  gameContainer.value.appendChild(insect)
+}
+
+const getRandomLocation = () => {
+  const width = window.innerWidth
+  const height = window.innerHeight
+  const x = Math.random() * (width - 200) + 100
+  const y = Math.random() * (height - 200) + 100
+  return { x, y }
+}
+
+const catchInsect = (e) => {
+  let item = e.currentTarget
+  score.value++
+  item.classList.add("caught")
+  setTimeout(() => item.remove(), 2000)
+  addInsects()
+}
+
+const addInsects = () => {
+  setTimeout(createInsect, 1000)
+  setTimeout(createInsect, 1500)
+}
+
+watch(score, (val) => {
+  console.log(val)
+  if (val > 19) {
+    visible.value = true
+  }
+})
+
+onUnmounted(() => {
+  clearInterval(timer)
+})
+
+
+</script>
+
+<style lang="scss">
+@import "./index.scss"
+</style>

src/views/Day50_InsectCatchGame/index.scss

@@ -0,0 +1,143 @@
+@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
+
+.body {
+  background-color: #516dff;
+  color: #fff;
+  font-family: 'Press Start 2P', sans-serif;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+  margin: 0;
+  text-align: center;
+
+  a {
+    color: #fff;
+  }
+
+  h1 {
+    line-height: 1.4;
+  }
+
+  .btn {
+    border: 0;
+    background-color: #fff;
+    color: #516dff;
+    padding: 15px 20px;
+    font-family: inherit;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      opacity: .9;
+    }
+  }
+
+  .screen {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    width: 100vw;
+    transition: margin 0.5s ease-out;
+
+    &.up {
+      margin-top: -100vh;
+    }
+
+    .insects-list {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      list-style-type: none;
+      padding: 0;
+
+      li {
+        margin: 10px;
+
+        .choose-insect-btn {
+          background-color: transparent;
+          border: 2px solid #fff;
+          color: #fff;
+          cursor: pointer;
+          font-family: inherit;
+          width: 150px;
+          height: 150px;
+
+          &:hover {
+            background-color: #fff;
+            color: #516dff;
+          }
+
+          &:active {
+
+            background-color: rgba(255, 255, 255, 0.7);
+          }
+
+          img {
+            width: 100px;
+            height: 100px;
+            object-fit: contain;
+          }
+        }
+      }
+    }
+
+    &.game-container {
+      position: relative;
+
+      .time,
+      .score {
+        position: absolute;
+        top: 20px;
+      }
+
+      .time {
+        left: 20px;
+      }
+
+      .score {
+        right: 20px;
+      }
+
+      .message {
+        line-height: 1.7;
+        background-color: rgba(0, 0, 0, 0.5);
+        width: 100%;
+        padding: 20px;
+        z-index: 100;
+        text-align: center;
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translate(-50%, 150%);
+        transition: transform 0.4s ease-in;
+        opacity: 1;
+      }
+    }
+  }
+
+
+
+  .insect {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100px;
+    height: 100px;
+    position: absolute;
+    transform: translate(-50%, -50%) scale(1);
+    transition: transform 0.3s ease-in-out;
+
+    &.caught {
+
+      transform: translate(-50%, -50%) scale(0);
+    }
+
+    img {
+      width: 100px;
+      height: 100px;
+    }
+  }
+}