网页小游戏开发教程

最新推荐文章于 2026-04-18 10:29:44 发布

原创最新推荐文章于 2026-04-18 10:29:44 发布 · 1.7k 阅读

26 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #html

该文章已生成可运行项目，

网页小游戏开发教程

游戏开发概述

网页小游戏的开发主要涉及 HTML、CSS 和 JavaScript 三种技术。HTML 用于搭建页面结构，CSS 负责页面样式，而 JavaScript 则实现了游戏的交互逻辑和动态效果。

HTML 与 CSS 基础搭建

HTML 结构

首先创建一个简单的 HTML 页面，用于承载游戏元素：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页小游戏</title>
    <style>
        /* CSS 样式将在这里定义 */
    </style>
</head>
<body>
    <div class="message"><span>0</span></div>
    <div class="box"></div>
    <script>
        /* JavaScript 代码将在这里编写 */
    </script>
</body>
</html>

在这个 HTML 结构中，我们定义了一个用于显示计数信息的 <div> 和一个用于拖动操作的游戏盒子 <div>。

CSS 样式

为游戏元素添加基本的样式：

.box {
    width: 200px;
    height: 200px;
    background-color: #F50;
    position: fixed;
    top: calc(100% - 200px);
    left: calc(50% - 100px);
    z-index: 1000;
}

.circle {
    position: fixed;
    top: 0;
    border-radius: 50%;
}

.message {
    font-size: 200px;
    font-weight: bold;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.message span {
    color: #f00;
}

body {
    user-select: none;
}

游戏盒子（.box）被设置为橙色，固定在页面底部中央。
小球（.circle）初始时位于页面上方。
计数信息（.message）以大字体显示在页面中央。

JavaScript 游戏逻辑实现

基础变量与元素获取

在 JavaScript 中，首先获取页面中的关键元素，并进行变量初始化：

var box = document.querySelector('.box');
var span = document.querySelector('.message span');
var num = 0;
var sx = 0, sy = 0;
var x = box.offsetLeft, y = box.offsetTop;
var rx = box.offsetLeft, ry = box.offsetTop;
var isDown = false;

解释：

box：获取游戏盒子元素，用于后续的拖动操作。
span：获取显示计数的元素，用于更新计数显示。
num：初始化计数器为 0，用于记录接住的小球数量。
sx、sy：记录鼠标按下时的坐标，用于计算鼠标移动的距离。
x、y：记录游戏盒子当前位置。
rx、ry：记录鼠标松开后游戏盒子的位置。
isDown：布尔值，用于判断鼠标是否处于按下状态。

拖动功能实现

通过事件监听器实现游戏盒子的拖动功能：

// 鼠标按下事件
box.onmousedown = function(event) {
    sx = event.pageX;
    sy = event.pageY;
    isDown = true;
};

// 鼠标移动事件
document.onmousemove = function(event) {
    if (!isDown) return;
    var mx = event.pageX;
    var my = event.pageY;
    x = mx - sx + rx;
    y = my - sy + ry;
    box.style.left = x + 'px';
    box.style.top = y + 'px';
};

// 鼠标松开事件
document.onmouseup = function() {
    isDown = false;
    rx = x;
    ry = y;
};

解释：

鼠标按下事件：当鼠标在游戏盒子上按下时，记录鼠标按下的坐标 event.pageX 和 event.pageY，并设置 isDown 为 true，表示开始拖动。
鼠标移动事件：当鼠标移动时，如果 isDown 为 true，计算鼠标移动后的新位置 mx - sx + rx 和 my - sy + ry，并更新游戏盒子的位置。
鼠标松开事件：当鼠标松开时，设置 isDown 为 false，表示停止拖动，并更新游戏盒子的位置 rx 和 ry。

辅助函数

编写一些辅助函数以简化游戏开发：

// 获取随机尺寸
var getSize = function() {
    return Math.floor(Math.random() * 100 + 50);
};

// 获取随机颜色
var getColor = function() {
    var red = Math.floor(Math.random() * 256);
    var green = Math.floor(Math.random() * 256);
    var blue = Math.floor(Math.random() * 256);
    return `rgb(${red},${green},${blue})`;
};

// 获取随机水平位置
var getPos = function() {
    var min = 0;
    var max = window.innerWidth;
    var left = Math.floor(Math.random() * (max - min) + min);
    return left + getSize() >= window.innerWidth ? left - getSize() : left;
};

解释：

getSize：生成 50 到 150 之间的随机整数，作为小球的尺寸。
getColor：生成随机的 RGB 颜色值，为小球设置不同的颜色。
getPos：根据窗口宽度，随机生成小球的水平起始位置，并确保小球不会超出窗口右侧。

碰撞检测

碰撞检测是游戏的核心部分，用于判断小球是否被接住：

var bump = function(circle, box) {
    var cx_l = circle.offsetLeft;
    var cy_l = circle.offsetTop + circle.offsetHeight;
    var cx_r = cx_l + circle.offsetWidth;
    var cy_r = circle.offsetTop + circle.offsetHeight;

    var bx_l = box.offsetLeft;
    var by_l = box.offsetTop;
    var bx_r = bx_l + box.offsetWidth;
    var by_r = box.offsetTop;

    // 判断是否发生碰撞
    if (cx_l >= bx_l && cx_r <= bx_r) {
        if (cy_l >= by_l && cy_l <= by_l + box.offsetHeight / 2) {
            if (cy_l > by_l + circle.offsetHeight / 2) {
                circle.remove(); // 删除小球
                num += 1; // 增加计数
                span.innerText = num; // 更新显示
            }
        }
    }

    // 边角碰撞逻辑处理
    if ((cx_l < bx_l && cx_r >= bx_l) || (cx_l <= bx_r && cx_r > bx_r)) {
        if (cy_l >= by_l && cy_l <= by_l + box.offsetHeight / 2) {
            if (cy_l > by_l + circle.offsetHeight / 2) {
                circle.remove(); // 删除小球
                num += 1; // 增加计数
                span.innerText = num; // 更新显示
            }
        }
    }
};

解释：

获取小球和游戏盒子的坐标信息。
水平碰撞判断：检查小球的水平范围是否与游戏盒子的水平范围有重叠。
垂直碰撞判断：检查小球的垂直位置是否在游戏盒子顶部附近，并且小球底部已足够接近游戏盒子顶部。
如果发生碰撞，删除小球并增加计数器，更新显示。

创建小球元素

编写函数创建小球元素并使其下落：

var createEl = function() {
    var div = document.createElement('div');
    var size = getSize();
    var color = getColor();
    var left = getPos();

    div.className = 'circle';
    div.style.width = size + 'px';
    div.style.height = size + 'px';
    div.style.backgroundColor = color;
    div.style.left = left + 'px';
    div.style.top = -size + 'px'; // 初始位置在页面上方

    document.body.appendChild(div);

    div.timer = setInterval(function() {
        var cur = div.offsetTop;
        var speed = 5;

        if (cur > window.outerHeight) {
            clearInterval(div.timer); // 清除定时器
            div.remove(); // 删除小球
        }

        div.style.top = cur + speed + 'px'; // 小球下落
        bump(div, box); // 碰撞检测
    }, 30);
};

解释：

创建一个新的 div 元素，设置其为圆形小球。
应用随机尺寸、颜色和水平位置。
设置小球初始位置在页面上方。
使用定时器使小球以固定速度（5px/帧）下落。
在小球下落过程中持续进行碰撞检测。

游戏循环

通过递归函数和定时器控制小球的生成频率：

function loop(num) {
    if (num > 100) return 0; // 限制最多生成 100 个小球
    var time = Math.floor(Math.random() * 600 + 100); // 随机延迟时间
    setTimeout(function() {
        createEl(); // 创建一个小球
        loop(num + 1); // 递归调用，继续生成小球
    }, time);
}
loop(1); // 开始游戏循环

// 定期重新开始游戏循环
setInterval(function() {
    loop(1);
}, 100 * 500); // 每 50000 毫秒（50 秒）重新开始一次循环