JS实现别踩白块游戏：DOM与数组操作的实战

136 浏览量更新于2024-08-30 收藏 112KB PDF 举报

本文档详细介绍了如何使用JavaScript实现一款别踩白块儿小游戏程序，该程序主要利用DOM操作和数组管理来设计游戏逻辑。作者首先遇到的问题是源代码缺乏注释，导致理解困难，因此他决定从头开始自建游戏。程序的核心思路如下： 1. **HTML结构**： - 使用`<html>`、`<head>`和`<body>`标签创建基础结构，定义一个名为`gameZone`的`<div>`用于包含游戏区域，以及一个内部的`<div>`元素`boardb`，初始时两者都设置为绝对定位。 2. **CSS样式**： - 使用CSS的盒模型重置，确保所有元素的边距和内边距为0，使用`box-sizing:border-box`使盒子的尺寸包括边框。 - 设置`gameZone`的样式，使其宽度为302px，高度为602px，有1px绿色边框，居中显示，同时设置overflow为hidden，防止内容溢出。 3. **小方块与黑块**： - 通过`.square`和`.squareBlack`类定义每个小方块，宽度和高度均为75px*100px，其中黑色小方块(`.squareBlack`)设置为黑色背景。 4. **JavaScript逻辑**： - **全局变量**：定义`loc`变量为600，表示黑块的初始落点。 - **关键函数**： - 初始化函数：设置游戏的基本结构，包括黑块的数量和位置，可能还包括游戏的起始状态和计时器。 - 渲染函数：负责动态更新游戏区的布局，每次循环时随机生成新的黑块位置，同时将当前黑块的位置存储到数组中。 - 用户交互函数：监听用户的点击事件，当用户点击时，检查点击位置是否与数组中的黑块位置匹配，如果不匹配则游戏结束或切换新的游戏状态。 - 更新函数：处理游戏的滚动和动画效果，确保黑块按照预期的规律下落。 5. **亮点**： - 作者认为亮点在于将每个操作板的黑块位置存储在数组中，并在用户点击时通过`array.pop()`方法对比当前位置，这种方法提高了游戏的可编程性和复用性。开发者可以通过阅读提供的GitHub链接下载HTML和JS代码，这些代码无需服务器支持，可以直接在本地运行体验游戏。整个过程展示了JavaScript在动态网页开发中的灵活性和功能强大，尤其是在处理复杂的用户交互和数据管理方面。

javascript实现别踩白块儿小游戏程序实现别踩白块儿小游戏程序

最近有朋友找我用JS帮忙仿做一个别踩白块的小游戏程序，但他给的源代码较麻烦，而且没有注释，理解起来很无力，我就

以自己的想法自己做了这个小游戏，主要是应用JS对DOM和数组的操作。

程序思路：如图：将游戏区域的CSS设置为相对定位、溢出隐藏;两块“游戏板”上分别排布着24块方格，黑色每行随机产生一

个，“游戏板”向下滚动并交替显示，将每个操作板的黑块位置存入数组，每次点击时将数组pop出来进行比对（我觉得亮点在

这……）。

这里是游戏的GitHub地址，大家可以到里点击中部菜单最右边的的Download ZIP按钮下载到桌面一试，HTML和JS，无需服

务器。

下载地址

以下是具体实现，关键部分有注释。

HTML部分:

<!DOCTYPE html>

<html>

<body>

<div id="gameZone"><div id="boardb" style="position: absolute;top: 0px;"></div></div>//初始化一个boardb,使ab同时存在

</body>

</html>

CSS部分：

复制代码代码如下:*{margin: 0px;padding: 0px;box-sizing: border-box;} //简单的reset一下,并用box-sizing设置盒子尺寸将边

框也计算进去,便于后面计算小方块位置

#gameZone{width: 302px;height: 602px;border: 1px solid green;margin: 20px auto;position: relative;overflow: hidden;} //游戏

区域，多两个像素是为了除去边框外还有足够的300*600的空间

.square{width: 75px;height: 100px;float: left;border: 1px solid black;}

.squareBlack{width: 75px;height: 100px;border: 1px solid black;float: left;background: black;}//每个小方块为75*100，并且设

置黑色小方块的背景色。

JS部分：

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38633967

粉丝: 7
资源: 930

JS实现别踩白块游戏：DOM与数组操作的实战

Javascript别踩白块儿（钢琴块儿）小游戏实现代码

HTML5与JS做的微信小游戏（源码）（包含：打飞机，消消乐，密室逃脱，熊出

javascript实现2048小游戏_V1.0.0

JavaScript实现别踩白块儿小游戏程序的设计与实现

使用JavaScript实现别踩白块儿小游戏代码解析

基于JavaScript实现微信小程序用户授权功能

html+js别踩白块儿

别踩白块Javascript代码

html小游戏别踩白块

HBuilder别踩白块源码

最新资源