50 天学习 50 个项目 - HTMLCSS and JavaScript

day50-Insect Catch Game（捉虫游戏）

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Catch The Insect</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <!-- 第一屏 -->
    <div class="screen">
        <h1>消灭昆虫游戏</h1>
        <button class="btn" id="start-btn">开始</button></button>
    </div>
    <!-- 第二屏 -->
    <div class="screen">
        <h1>你"最想消灭"的昆虫是什么?</h1>
        <ul class="insects-list">
            <li>
                <button class="choose-insect-btn">
                    <p>苍蝇</p>
                    <img src="http://pngimg.com/uploads/fly/fly_PNG3946.png" alt="fly">
                </button>
            </li>
            <li>
                <button class="choose-insect-btn">
                    <p>蚊子</p>
                    <img src="http://pngimg.com/uploads/mosquito/mosquito_PNG18175.png" alt="mosquito" />
                </button>
            </li>
            <li>
                <button class="choose-insect-btn">
                    <p>蜘蛛</p>
                    <img src="http://pngimg.com/uploads/spider/spider_PNG12.png" alt="spider" />
                </button>
            </li>
            <li>
                <button class="choose-insect-btn">
                    <p>蟑螂</p>
                    <img src="http://pngimg.com/uploads/roach/roach_PNG12163.png" alt="roach" />
                </button>
            </li>
        </ul>
    </div>
    <!-- 第三屏 -->
    <div class="screen game-container" id="game-container">
        <h3 id="time" class="time">时间: 00:00</h3>
        <h3 id="score" class="score">得分: 0</h3>
        <h5 id="message" class="message">
            你生气了吗? <br>
            你在玩一个不可能的游戏!!
        </h5>
    </div>

    <script src="script.js"></script>
</body>

</html>

style.css

@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');

* {
    box-sizing: border-box;
}

body {
    background-color: #516dff;
    color: #fff;
    font-family: 'Press Start 2P', sans-serif;
    height: 100vh;
    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: 0;
}

.btn:hover {
    opacity: 0.9;
}

/* 每块屏 */
.screen {
    /* 子元素竖直居中 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    transition: margin 0.5s ease-out;
}

/* 向上隐藏 */
.screen.up {
    margin-top: -100vh;
}

/* 第二屏 昆虫容器 */
.insects-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style-type: none;
    padding: 0;
}

.insects-list li {
    margin: 10px;
}

/* 每一项昆虫 */
.choose-insect-btn {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    width: 150px;
    height: 150px;
}

.choose-insect-btn:hover {
    background-color: #fff;
    color: aqua;
}

.choose-insect-btn:active {
    background-color: rgba(255, 255, 255, 0.7);
}

/* 图片 */
.choose-insect-btn 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;
    /* 隐藏 */
    opacity: 0;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -150%);
    transition: transform 0.4s ease-in;
}

/* 显示 */
.message.visible {
    transform: translate(-50%, 150%);
    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;
}

/* 被抓住 隐藏 */
.insect.caught {
    transform: translate(-50%, -50%) scale(0);
}

/* 昆虫图片 */
.insect img {
    width: 100px;
    height: 100px;
}

script.js

// 重点 flex position transform: translate(-50%, -50%) scale(0); transition 函数
// setTimeout setInterval
// 1.获取元素节点
const screens = document.querySelectorAll('.screen');//三块屏
const choose_insect_btns = document.querySelectorAll('.choose-insect-btn');//选择昆虫按钮们
const start_btn = document.getElementById('start-btn')//开始按钮
const game_container = document.getElementById('game-container')//第三屏
const timeEl = document.getElementById('time')//时间
const scoreEl = document.getElementById('score')//分数
const message = document.getElementById('message')//结束语
let seconds = 0//秒
let score = 0
let selected_insect = {}//存储选中的昆虫项
let timer = 0 //记录时间的间歇期
// 2.绑定点击 事件 第一屏向上移动，隐藏
start_btn.addEventListener('click', () => screens[0].classList.add('up'))
// 遍历所有昆虫，绑定点击事件
choose_insect_btns.forEach(btn => {
    btn.addEventListener('click', () => {
        const img = btn.querySelector('img')
        const src = img.getAttribute('src')
        const alt = img.getAttribute('alt')
        // 存储当前的昆虫选项
        selected_insect = { src, alt }
        // 第二屏向上移动，隐藏
        screens[1].classList.add('up')
        // 一秒后，创建一个昆虫
        setTimeout(createInsect, 1000)
        // 开始游戏
        startGame()
    })
})
// 函数 开始游戏
function startGame() {
    // 开启间歇期 每过一秒记录时间
    timer =setInterval(increaseTime, 1000)
}
// 函数，记录时间
function increaseTime() {
    let m = Math.floor(seconds / 60)
    let s = seconds % 60
    m = m < 10 ? `0${m}` : m
    s = s < 10 ? `0${s}` : s
    timeEl.innerHTML = `Time: ${m}:${s}`
    seconds++
}
// 函数：在第三屏中创建昆虫
function 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="${selected_insect.src}" alt="${selected_insect.alt}" style="transform: rotate(${Math.random() * 360}deg)" />`
    // 点击，即触发捕捉昆虫
    insect.addEventListener('click', catchInsect)
    // 显示昆虫
    game_container.appendChild(insect)
}
// 函数：随机获取位置
function 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 }
}
// 函数：捕捉昆虫
function catchInsect() {
    // 分数+
    increaseScore()
    // 隐藏
    this.classList.add('caught')
    // 移除昆虫
    setTimeout(() => this.remove(), 2000)
    // 添加昆虫
    addInsects()
}
// 函数：添加昆虫，再次开启两个定时器，即捕捉成功1只之后，创建两只昆虫。源源不断
function addInsects() {
    setTimeout(createInsect, 1000)
    setTimeout(createInsect, 1500)
}
// 函数：分数增加
function increaseScore() {
    score++
    // 大于19分。游戏结束。结束语显示
    if (score > 19) {
        clearInterval(timer)
        message.classList.add('visible')
    }
    scoreEl.innerHTML = `Score: ${score}`
}