原生JS实现别踩白块小游戏（二）-html知识-PHP中文网

原生JS实现别踩白块小游戏（二）

藏色散人

发布： 2018-12-25 12:00:22

原创

7345人浏览过

原生js实现别踩白块小游戏的方法，我们在前面的文章中已经给大家简单的分享介绍过了。那么对于此游戏的具体实现思路，可能有部分朋友还不太清楚。

原生JS实现别踩白块小游戏（二）

下面我们就结合别踩白块小游戏的源代码，给大家逐步详细介绍具体的实现方法。

源代码参考：《原生JS实现别踩白块小游戏（一）》

首先我们带大家了解下，游戏源代码中HTML整体的框架结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>别踩白块小游戏</title>
</head>
<style...>
<body>
<div class="box">
    <div id="cont">
        <div id="go">
            <span>点击开始</span>
        </div>
        <div id="main"></div>

    </div>
    <div id="count"></div>
</div>
</body>
<script...>
</html>

登录后复制

上述代码中，body中创建了一个大的div（box）,在这个div中，包含了两个小div（id为cont和id为count），“cont”部分是包含游戏动画的内容，“count”部分则是用于游戏计数显示。

“count”部分如下所示：