使用 HTML、CSS 和 Vanilla Javascript 设计点击鼠标游戏(1)

📌 相关文章

📜 使用 HTML、CSS 和 Vanilla Javascript 设计点击鼠标游戏(1)

📅 最后修改于: 2023-12-03 15:22:12.218000 🧑 作者: Mango

使用 HTML、CSS 和 Vanilla Javascript 设计点击鼠标游戏

简介

本文将介绍如何使用 HTML、CSS 和 Vanilla Javascript 设计一个点击鼠标游戏，通过阅读本文你将学会如何创建 HTML 结构、应用 CSS 样式和使用 Javascript 脚本实现点击鼠标游戏的核心功能。

HTML 结构

我们的点击鼠标游戏需要用到以下 HTML 元素：

根元素 html
头部元素 head
- 字符编码 meta 标签
- 标题 title 标签
- 链接 link 标签
身体元素 body
- 游戏板 div 元素
  - 计分板 div 元素
  - 游戏区域 div 元素
    - 地鼠 div 元素

以下是完整的 HTML 结构：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>点击鼠标游戏</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="game">
            <div class="score">得分：0</div>
            <div class="area">
                <div class="mole"></div>
            </div>
        </div>
        <script src="script.js"></script>
    </body>
</html>

CSS 样式

我们需要为游戏板、计分板、游戏区域和地鼠等元素设置样式。以下是示例 CSS 样式：

.game {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    position: relative;
}

.score {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 30px;
}

.area {
    width: 100%;
    height: 250px;
    position: relative;
    overflow: hidden;
}

.mole {
    width: 50px;
    height: 50px;
    background: #000;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

Javascript 实现

使用 Javascript 实现的核心功能是让地鼠随机出现在游戏区域，并在点击时加分。以下是示例 Javascript 代码：

const mole = document.querySelector('.mole');
const score = document.querySelector('.score');

let timerId = null;
let count = 0;

function randomTime(min, max) {
    return Math.round(Math.random() * (max - min) + min);
}

function randomPosition() {
    const area = document.querySelector('.area');
    const areaWidth = area.offsetWidth;
    const areaHeight = area.offsetHeight;
    const moleWidth = mole.offsetWidth;
    const moleHeight = mole.offsetHeight;

    const top = Math.round(Math.random() * (areaHeight - moleHeight));
    const left = Math.round(Math.random() * (areaWidth - moleWidth));

    return [top, left];
}

function showMole() {
    const [top, left] = randomPosition();

    mole.style.top = top + 'px';
    mole.style.left = left + 'px';
    mole.classList.add('visible');

    timerId = setTimeout(() => {
        mole.classList.remove('visible');
        showMole();
    }, randomTime(1000, 2000));
}

function countScore() {
    count++;
    score.textContent = '得分：' + count;
}

mole.addEventListener('click', countScore);

showMole();

结语

通过本文的介绍，你学会了使用 HTML、CSS 和 Vanilla Javascript 设计一个点击鼠标游戏的方法，希望能对你的编程学习有所帮助！