网页小游戏开发教程

。

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 秒）重新开始一次循环

解释：

定义递归函数 loop 控制小球生成频率。使用 setTimeout 延迟一定时间后生成一个小球，并递归调用自身，直到达到设定的上限（100 个小球）。使用 setInterval 定期调用 loop 函数，使游戏持续产生小球，保持游戏的连贯性。

总结

通过以上步骤，我们成功实现了一个简单的网页小游戏。玩家可以通过拖动游戏盒子来接住下落的小球，计数器会记录接住的小球数量。希望这个教程能帮助你理解网页游戏开发的基本流程和逻辑实现。

补充说明

在实际开发中，你可以进一步优化和扩展这个游戏，例如：

添加游戏开始和结束界面。实现得分系统和等级提升。添加音效和动画效果。支持触摸操作，使游戏在移动设备上更易玩。

这些改进可以使游戏更具吸引力和可玩性。鼓励你尝试这些扩展功能，提升你的编程技能和创造力。