首页 / HTML / 如何实现网页版别踩白块的游戏（代码示例）

如何实现网页版别踩白块的游戏（代码示例）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了如何实现网页版别踩白块的游戏（代码示例），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7333字，纯文字阅读大概需要11分钟。

内容图文

本篇文章给大家带来的内容是如何使用如何实现网页版别踩白块的游戏（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

自己最近一直想做个小项目，但是自己代码水平太烂了，做不了大系统，索性利用毕生所学写个小游戏，哈哈哈
别踩白块这个游戏相信很多人都在手机上玩过，今天我们就来做一个网页版的，先上一张游戏效果图：

如何实现网页版别踩白块的游戏（代码示例） - 文章图片

不同于移动端采用手指触碰，网页版需要我们用鼠标点击黑块，黑块才会消失。刷新页面即可以开始游戏，这个小游戏最重要的部分代码，初学者也能很快看懂。YES~

在开始之前，让我们简单分析下整个游戏的流程：一定的速度下移，点击黑块，黑块消失，新的黑块在普通游戏玩家眼中，应该是游戏开始，黑块以块不断向下移动，若黑块触底则游戏结束；而以我们来说，可以将每一个黑块和白块抽象成一个个的数据结构，黑块的消失和出现其实就是数据结构的创造和销毁，我们来看一张游戏的流程图，对于要编写的功能有一个大概的了解:

如何实现网页版别踩白块的游戏（代码示例） - 文章图片

页面布局

可以用 div+css 布局来实现别踩白块的静态效果展示，直接上 HTML 代码，我来简要说下 HTML 思路，将主界面分解成一个4×4的大矩形格子，每一个方块代表其中一个小的矩形格，其中每一行的四个白块中有一个黑块，每一行中黑块位于那一列是随机生成的，但是我们这里现在是静态页面就自己确定了，然后通过 css 控制样式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>别踩白块</title>
    <style type="text/css">
    </style>
</head>
<body>
    <div id="main">
        <div id="con">
            <div class="row">
                <div class="cell"></div>/*白块*/
                <div class="cell black"></div>/*黑块*/
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="row">
                <div class="cell"></div>
                <div class="cell black"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="row">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell black"></div>
                <div class="cell"></div>
            </div>
            <div class="row">
                <div class="cell black"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
        </div>
    </div>
</body>
<script>
</script>
</html>

游戏初始化

根据前面的 HTML 部分我们可以知道，每个 <div class=”cell”> 就代表一个白块，<div class=”cell black”> 就代表一个黑块，每点击一个黑块消失其实是删除了一个 <div class=”row”> ，然后从上面添加一个新的 <div class=”row”> 。所以我们首先要通过 js 来控制 <div class=”row”> 的创造和生成（记得删除在编写静态页面时候指定生成的4个 div.row）。具体方法如下：

//创建div, 参数className是其类名
    function creatediv(className){
        var div = document.createElement('div');
        div.className = className;
        return div;
    }

    // 创造一个<div class="row">并且有四个子节点<div class="cell">
    function createrow(){
        var con = $('con');
        var row = creatediv('row'); //创建div className=row
        var arr = creatcell(); //定义div cell的类名,其中一个为cell black

        con.appendChild(row); // 添加row为con的子节点

        for(var i = 0; i < 4; i++){
            row.appendChild(creatediv(arr[i])); //添加row的子节点 cell
        }

        if(con.firstChild == null){
            con.appendChild(row);
        }else{
            con.insertBefore(row, con.firstChild);
        }
    }

    //删除div#con的子节点中最后那个<div class="row">    
    function delrow(){
            var con = $('con');
            if(con.childNodes.length == 6) {
                   con.removeChild(con.lastChild);
               }
        }    

    //创建一个类名的数组，其中一个为cell black, 其余为cell
    function creatcell(){
        var temp = ['cell', 'cell', 'cell', 'cell',];
        var i = Math.floor(Math.random()*4);//随机生成黑块的位置
        temp[i] = 'cell black';
        return temp;
    }

让黑块动起来

在可以通过 js 来创造和销毁 div 后，我们就要让黑块动起来，这个时候我们就用到了之前css提到的设定 <div id=”con”> 隐藏了一行的 <div id=”row”>，我们通过 js 的 DOM 操作使其向下方移动，并设置定时器每30毫秒移动一次，这样就实现了黑块的平滑移动，在黑块移动的同时，我们要判断黑块是否已经触底，触底则游戏失败，停止调用 move()，触底后调用函数 fail() 游戏失败，具体方法如下：

//使黑块向下移动    
    function move(){
        var con = $('con');
        var top = parseInt(window.getComputedStyle(con, null)['top']);

        if(speed + top > 0){
            top = 0;
        }else{
            top += speed;
        }            
        con.style.top = top + 'px';

        if(top == 0){
            createrow();
            con.style.top = '-100px';
            delrow();
        }else if(top == (-100 + speed)){
            var rows = con.childNodes;
            if((rows.length == 5) && (rows[rows.length-1].pass !== 1) ){
                fail();
            }
        }
    }

    function fail(){
            clearInterval(clock);
            confirm('你的最终得分为 ' + parseInt($('score').innerHTML) );
        }
点击黑块事件

让黑块动起来之后呢，就要考虑用户有没有点击到黑块，用户若点击到黑块我们要让所在那一行消失，那么就需要一个 judge 方法，具体如下：

//判断用户是否点击到了黑块，
function judge(ev){
    if (ev.target.className.indexOf('black') != -1) {
        ev.target.className = 'cell';
        ev.target.parentNode.pass = 1; //定义属性pass，表明此行row的黑块已经被点击
        score();
    }
}

这一步，几个核心的功能点都已经实现了，剩下来的就是将这些方法组合起来，组成完整的逻辑关系。

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>别踩白块</title>
    <style type="text/css">
        #score{
            text-align: center;}

        h2 {
            text-align: center;    }

        div{
            margin: 0 auto;
            width: 100px;
            height: 100px;}

        #main {
            width: 400px;
            height: 400px;
            background: white;
            border: 2px solid gray;
            margin: 0 auto;
            position: relative;
            overflow: hidden;}

        #con {
            width: 100%;
            height: 400px;
            position: relative;
            top: -100px;
            border-collapse:collapse;}

        .row{
            height: 100px;
            width: 100%;}

        .cell{
            height: 100px;
            width: 100px;
            float: left;}

        .black {
            background: black;}
    </style>
</head>
<body>

    <h2>score</h2>
    <h2 id="score">0</h2>
    <div id="main">
        <div id="con"></div>
    </div>
</body>
<script>
    var clock = null;
    var state = 0;
    var speed = 4;

        /*
        *    初始化 init
        */
        function init(){
            for(var i=0; i<4; i++){
                createrow();
            }

            // 添加onclick事件
            $('main').onclick = function(ev){
                judge(ev);
            }

            // 定时器 每30毫秒调用一次move()
                clock = window.setInterval('move()', 30);
        }

        // 判断是否点击黑块
        function judge(ev){
            if (ev.target.className.indexOf('black') != -1) {
                ev.target.className = 'cell';
                ev.target.parentNode.pass = 1; //定义属性pass，表明此行row的黑块已经被点击
                score();
            }
        }

        // 游戏结束
        function fail(){
            clearInterval(clock);
            confirm('你的最终得分为 ' + parseInt($('score').innerHTML) );
        }

        // 创建div, className是其类名
        function creatediv(className){
            var div = document.createElement('div');
            div.className = className;
            return div;
        }

        // 创造一个<div class="row">并且有四个子节点<div class="cell">
        function createrow(){
            var con = $('con');
            var row = creatediv('row'); //创建div className=row
            var arr = creatcell(); //定义div cell的类名,其中一个为cell black

            con.appendChild(row); // 添加row为con的子节点

            for(var i = 0; i < 4; i++){
                row.appendChild(creatediv(arr[i])); //添加row的子节点 cell
            }

            if(con.firstChild == null){
                con.appendChild(row);
            }else{
                con.insertBefore(row, con.firstChild);
            }
        }

        // 根据id来get DOM元素
        function $(id) {
            return document.getElementById(id);
        }

        // 创建一个类名的数组，其中一个为cell black, 其余为cell
        function creatcell(){
            var temp = ['cell', 'cell', 'cell', 'cell',];
            var i = Math.floor(Math.random()*4);
            temp[i] = 'cell black';
            return temp;
        }

        //让黑块动起来
        function move(){
            var con = $('con');
            var top = parseInt(window.getComputedStyle(con, null)['top']);

            if(speed + top > 0){
                top = 0;
            }else{
                top += speed;
            }            
            con.style.top = top + 'px';

            if(top == 0){
                createrow();
                con.style.top = '-100px';
                delrow();
            }else if(top == (-100 + speed)){
                var rows = con.childNodes;
                if((rows.length == 5) && (rows[rows.length-1].pass !== 1) ){
                    fail();
                }
            }
        }

        // 加速函数
        function speedup(){
            speed += 2;
            if(speed == 20){
                alert('你超神了');
            }
        }

        //删除某行
        function delrow(){
            var con = $('con');
            if(con.childNodes.length == 6) {
                   con.removeChild(con.lastChild);
               }
        }    

        // 记分
        function score(){
            var newscore = parseInt($('score').innerHTML) + 1;
            $('score').innerHTML = newscore;
            if(newscore % 10 == 0){
                speedup();
            }
        }

    init();
</script>
</html>

内容总结

以上是互联网集市为您收集整理的如何实现网页版别踩白块的游戏（代码示例）全部内容，希望文章能够帮你解决如何实现网页版别踩白块的游戏（代码示例）所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/391097.html

来源：【匿名】

【上一篇】前端开发中要如何注释语句？注释的三种方法（介绍）【下一篇】PHP 和 HTML

更多 ►

【如何实现网页版别踩白块的游戏（代码示例）】教程文章相关的互联网学习教程文章

超级炫酷的HTML5Canvas网络画板代码示例详解【图】

超级炫酷的HTML5 Canvas网络画板代码示例详解在今天的HTML教程里，我们要学习一下如何使用HTML5 Canvas实现一个超酷而又简单的网络画板功能。在这个教程中，我们可以选择笔刷的类型、笔刷的大小以及笔刷的颜色，当然作为画板还需要很多功能，这里只是最基本的绘制功能，大家可以自己实现类似矩形、椭圆等复杂元素的绘制。你也可以再这里查看DEMO演示下面我们来简单地分析一下实现这个HTML5网页画板的原理及代码，代码由HTML以及Jav...

如何使用HTML和CSS在图像上添加文字？（代码示例）【图】

本篇文章我们将向您介绍如何使用 HTML和CSS在图像上添加文字，内容很详细。话不多说，我们直接进入正题~1、用HTML和CSS表达的好处不是“图像本身写入文字”，而是“通过HTML和CSS在图像上配置文字”这一点有以下的好处。（推荐教程：CSS视频教程）即使放大，字符也不会模糊它也在搜索引擎中阅读（适用于SEO）你可以选择字母响应式设计允许您调整字体大小（您可以执行类似智能手机显示屏中的小写字母...）2、如何在图像上放置文字第...

php利用xpath解析html的代码示例

本篇文章给大家带来的内容是关于php利用xpath解析html的代码示例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。实例1$xml = simplexml_load_file(https://forums.eveonline.com); $names = $xml->xpath("html/body/p/p/form/p/p/p/p/p[*]/p/p/table//tr/td[@class=topicViews]"); foreach($names as $name) { echo $name . "<br/>"; }实例2$url = http://www.baidu.com; $ch = curl_init(); curl_setopt($c...

php正则过滤html标签、空格、换行符等的代码示例

/** desc：正则过滤html标签、空格、换行符等 link：bbs.it-home.org date：2013/2/23*/$str=preg_replace("/\s+/", " ", $str); //过滤多余回车$str=preg_replace("/$str=preg_replace("//si","",$str); //注释$str=preg_replace("//si","",$str); //过滤DOCTYPE$str=preg_replace("//si","",$str); //过滤html标签$str=preg_replace("//si","",$str); //过滤head标签$str=preg_replace("//si","",$str); //过滤meta标签$str=p...

提取html标签的php代码示例

提取html标签的php代码示例 <?php /** * 函数: tags * 功能: 从文件中提取html标签 * * 入口: * $filename 文件名 * $tag 标签名 * 返回: * 数组,每项为: * tagName String * Text String * Attrs Array * * 示例: * print_r(tags("test1.htm","a")); * print_r("http://localhost/index.htm","img"); * */</p> <p>function tags($filename,$tag) { $buffer = join("",file($filename)); $buffer = eregi_replace("\r\n","",$buffe...

分析PHP生成html文件的具体代码示例_PHP教程

学习PHP生成html文件1,下面使用模版的一个方法! < ?php $fp = fopen ("templets.html","a"); if ($fp){ $fup = fread ($fp,filesize ("templets.html")); $fp2 = fopen ("html.shtml","w"); if ($fwrite ($fp2,$fup)){ $fclose ($fp); $fcolse ($fp2); die ("写入模板成功"); } else { fclose ($fp); die ("写入模板失败!"); } } ?> ...

如何使用nodejs分离html文件里的js和css（代码示例）【图】

本篇文章给大家带来的内容是关于如何使用nodejs分离html文件里的js和css（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。摘要：本文要实现的内容，使用nodejs 对文件的增删改查，演示的例子-》分离出一个html 文件里面的script 和style 里面的内容，然后单独生成js文件和css 文件。中间处理异步的api-》async/await , Promise项目托管：extract-js-css , 欢迎star直接上代码：// extract-js-css ...

在HTML中插入JavaScript代码的示例_基础知识

在HTML文档中的任何地方可包括JavaScript代码。但也有以下的最佳方法来包含JavaScript在HTML文件。在 ... 部分. 在 ... 部分. 在... 和... 部分. 脚本和外部文件，然后包括在... </ head>部分。在下面的章节中，我们将看到如何可以包含JavaScript方式的不同：在JavaScript的... </ head>部分：如果你想在一些事件上运行一个脚本，当用户点击某个地方，如，那么应该脚本的头部，如下所示：这将产生以下结果：JavaScript在...

在HTML中插入JavaScript代码的示例

在HTML文档中的任何地方可包括JavaScript代码。但也有以下的最佳方法来包含JavaScript在HTML文件。在 <head>...</head> 部分. 在 <body>...</body> 部分. 在<body>...</body> 和<head>...</head> 部分. 脚本和外部文件，然后包括在<head>... </ head>部分。在下面的章节中，我们将看到如何可以包含JavaScript方式的不同：在JavaScript的<head>... </ head>部分：如果你想在一些事件上运行一个脚本，当用户点击某个...

GridView生成的HTML代码示例对比

代码如下:<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="tablecss"> <Columns> <asp:TemplateField HeaderText="编号" HeaderStyle-CssClass="aaa" ItemStyle-CssClass="bbb"> <ItemTemplate> <%#Eval("id") %> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="姓名" HeaderStyle-CssClass="aaa" ItemStyle-CssClass="bbb"> <ItemTemplate> <%#Eval("name") %> </Ite...

移动端H5中百度地图的click事件的介绍（代码示例）【图】

本篇文章给大家带来的内容是关于移动端H5中百度地图的click事件的介绍（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。根据百度地图官方解释，在移动端 H5 页面中可监听下面这 4 个事件:touchstart, touchmove, touchend, longpress而如果地图上监听了 click 事件，在移动端是不会执行这个事件里面的代码的。我之前做一个需求时，给地图监听了 touchend 事件，不曾想当我拖动地图时，也执行了 touch...

HTML5如何使用SVG（代码示例）【图】

本篇文章给大家带来的内容是关于HTML5如何使用SVG（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。代码优化永远是程序员亘古不变的需求，而合理的利用SVG图片来代替部分PNG/JPG等格式的图片则是前端优化重要的一环，既然是优化，那我们先来看看SVG图片都有哪些优势：SVG 可被非常多的工具读取和修改（比如记事本）SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。SVG 是可伸缩的SVG 图像...

HTML5Canvas绘图之drawImage()方法的详细介绍（代码示例）【图】

本篇文章给大家带来的内容是关于HTML5 Canvas绘图之drawImage() 方法的详细介绍（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。是一个新的HTML元素，这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。1、最常见的在canvas上画图的方法是使用Image对象。所支持的来源图片格式依赖于浏览器的支持，然而，一些典型的图片格式...

移动端页面头部固定定位的绝对定位实现（代码示例）【图】

本篇文章给大家带来的内容是关于移动端页面头部固定定位的绝对定位实现，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。在移动端进行开发时，通常整个页面的头部会固定一个区域，比如下图淘宝中的头部。这个区域无论怎么划屏都是可见的。在PC端，我们可以使用position:fixed来实现。但是由于position:fixed存在一定的兼容性问题，而且移动端的视口较多，这个固定究竟是相对于哪个视口，很容易搞错。因此，通常都...

Electron页内查找模块介绍（代码示例）【图】

本篇文章给大家带来的内容是关于Electron页内查找模块介绍（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。实现Electron app页内按关键字查找匹配文本的功能特征依赖于Electron的findInPage API支持使用者灵活配置UI界面支持区分大小写当用户输入时自动查找查找输入框文本隔离，不会被匹配到支持以下Electron版本 ^1.8.7, ^2.0.0, ^3.0.0, ^4.0.0支持以下平台 Windows, Linux, Mac演示默认UI定制化U...

HTML - 技术教程分类

HTML 教程 HTML 简介 HTML 编辑器 HTML 基础 HTML 元素 HTML 属性 HTML 标题 HTML 段落 HTML 文本格式化 HTML 链接 HTML 头部 HTML CSS HTML 图像 HTML 表格 HTML 列表 HTML 区块 HTML 布局 HTML 表单 HTML 框架 HTML 颜色 HTML 颜色名 HTML 颜色值 HTML 脚本 HTML 字符实体 HTML URL HTML 速查列表 HTML 总结 XHTML 简介 HTML 媒体(Media) HTML 插件 HTML 实例 HTML 标签列表（功能排序） HTML 属性 HTML 事件 HTML 画布 HTML 音频/视频 HTML 颜色名 HTML 字符集 HTML ASCII HTML ISO-8859-1 HTML 符号 HTML 语言代码 html 全部

HTML - 最热教程

html5代码如何实现进度条功能？（示例）javascript中html字符串转化为jquerydo...HTML5实战与剖析之CSS选择器——getEle...html5中设置或返回音频/视频是否应该被...HTML5获取设备信息 jQuery打印指定区域Html页面并自动分页...jQuery+HTML5+CSS3制作支持响应式布局时...JS+HTML5实现上传图片预览效果完整实例...php删除html标签和标签内的内容的方法总...XMLHttpRequest中responseText如何获取...

首页 / HTML / 如何实现网页版别踩白块的游戏（代码示例）

如何实现网页版别踩白块的游戏（代码示例）

内容导读

内容图文

内容总结

内容备注

内容手机端

【如何实现网页版别踩白块的游戏（代码示例）】教程文章相关的互联网学习教程文章

HTML - 技术教程分类

HTML - 最新教程

HTML - 最热教程