投稿获客
广告
广告 广告 广告
广告 广告 广告 广告
广告 █ 推荐【菠萝云】香港16G内存99元 【CDNCloud】极速、安全可靠的加速体验 广告位联系QQ：253000106 【UStat】免费网站统计平台 SSL证书低至2折 单域名36元起 免费测试！海总一手APK免杀处理 广告位联系QQ：253000106 CDN 服务器 反炸 劫持 域名屏蔽 【UStat】专业网站统计平台 域名注册：海量域名快速注册 安卓免杀 谷歌报毒 封装 苹果签名 广告位联系QQ：253000106 【域名被劫持污染如何处理】 安卓免杀★超级签★封装★谷歌屏蔽 广告位联系QQ：253000106

*本站广告为第三方投放，如发生纠纷，请向本站索取第三方联系方式沟通

  1. 创想鸟首页
  2. 好文分享

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

程序猿 • • 好文分享 • 阅读 0

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

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

1503693920-5b98835f9b538_articlex.gif

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

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

1186007412-5b98837f46499_articlex.png

页面布局

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

        别踩白块            
        
            
                
/*白块*/                
/*黑块*/

游戏初始化

根据前面的 HTML 部分我们可以知道，每个

就代表一个白块，

就代表一个黑块，每点击一个黑块消失其实是删除了一个

，然后从上面添加一个新的

。所以我们首先要通过 js 来控制

的创造和生成（记得删除在编写静态页面时候指定生成的4个 div.row）。具体方法如下：

//创建div, 参数className是其类名    function creatediv(className){        var div = document.createElement('div');        div.className = className;        return div;    }    // 创造一个
并且有四个子节点
    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的子节点中最后那个
        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提到的设定

隐藏了一行的

，我们通过 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();    }}

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

完整代码

        别踩白块            #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;}        
score
    
0
    
        
    
    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;        }        // 创造一个
并且有四个子节点
        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  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();

相关推荐：

Javascript小游戏之别踩白块儿实例

HTML5网页版黑白子五子棋游戏的示例代码分享

以上就是如何实现网页版别踩白块的游戏 （代码示例）的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1547052.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

382.6K 文章
0 评论
1 粉丝
这个人很懒，什么都没有留下～
上一篇 2025年12月21日 18:46:54
下一篇 2025年12月21日 18:47:07

相关推荐

  • html中是如何引入css样式？以及link与@import的区别（代码实例）

    在前端网站的开发过程中，我们都是要用到css样式的，css样式可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。那么这些css样式的文件或者代码是如何导入到html中的？本章就给大家带来html中是如何引入css样式文件？以及link与@import的区别（代码实例），让大家了解…

    程序猿的头像 程序猿
    2025年12月21日 • 好文分享
    000

  • html中图片显示方式—–img与background的区别

    本章给大家介绍html中图片显示方式—–img与background的区别，让大家可以了解在html中让图片显示的两种方法的区别。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 一、从解析机制看 img属于html标签，background是css方法。一个页…

    程序猿的头像 程序猿
    好文分享 2025年12月21日
    000

  • html中iframe是如何使用的？

    本章给大家介绍在html中iframe是如何使用的，让大家可以了解html中iframe的用法。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 有人说，iframe是能耗最高的一个元素，尽量减少使用；也有人说，iframe的安全性太差，尽量减少使用。虽然他们说的是真的，但是ifram…

    程序猿的头像 程序猿
    好文分享 2025年12月21日
    000

  • 如何区分HTML和XHTML？HTML和XHTML的区别在哪？

    本章给大家介绍如何区分html和xhtml？html和xhtml的区别在哪？有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 什么是XHTML？ XHTML是用XML语言重写了HTML，也可以理解为XHTML是HTML的过渡语言，它比HTML语言更严谨，基本语言都还是沿用HTML的标签…

    程序猿的头像 程序猿
    好文分享 2025年12月21日
    000
  • canvas 学习 3---画坐标系 好文分享

    canvas 学习 3—画坐标系

    无论您是新手，还是老手，本教程都值得一读。 网格#c1{border:1px solid black;}window.onload = function(){var oCanvas = document.getElementById(‘c1’)var gd = oCanvas.getContext(…

    程序猿的头像 程序猿
    2025年12月21日
    000

  • Go元素的关键字所在–chan通道

    html validate是指html验证。它是通过与标准html规则进行比较的方式，分析html文档、标记出错误和非标准代码的处理过程。web页面使用html进行渲染，而html本身采用了html规范作为其规则和标准。通过验证html代码穿越多重浏览器标准！ chan chan又称之为通道，形式类…

    程序猿的头像 程序猿
    好文分享 2025年12月21日
    000
  • 前端开发中要如何注释语句？注释的三种方法（介绍） 好文分享

    前端开发中要如何注释语句？注释的三种方法（介绍）

    在前端开发中，往往为了一些原因（比如：代码说明，标注等等），需要用到注释语句。那么到底要怎样注释注释语句，注释语句的一些注意事项是什么？本章给大家带来前端开发中要如何注释语句？注释的三种方法（介绍）。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 一、HTML 标签  1.定义： 注…

    程序猿的头像 程序猿
    2025年12月21日
    000

  • html5与传统html的区别，有哪些新增的和废除的元素？

    这篇文章围绕html展开，主要讲了html5与传统html的区别，以及一些html5新增的元素和废除的元素，有需要的小伙伴可以参考一下，希望对你有帮助。 一. HTML5语法的改变 该知识点所说变化指的是基于HTML4基础上所定义的改变，主要有如下： 1、HTML5的文件扩展符(.html或.htm…

    程序猿的头像 程序猿
    好文分享 2025年12月21日
    000
  • html中big标签如何使用？html big标签的使用实例 好文分享

    html中big标签如何使用？html big标签的使用实例

    html中的big标签的使用情况，big标签都知道是一个基础的放大标签，但是我们都在什么元素中加过big标签呢，今天这篇文章讲述了在几个元素中加big标签的详情，现在就开始阅读本篇文章吧 首先我们需要知道html big标签的使用说明： HTML big标签是定义比普通文本大一点的标签，我们在很多时…

    程序猿的头像 程序猿
    2025年12月21日
    000
  • HTML段落元素中怎么设置空格？HTML空格的设置总结 好文分享

    HTML段落元素中怎么设置空格？HTML空格的设置总结

    html汇总的段落元素想要留点空格，但是直接打空格符号肯定是行不通的，因为浏览器只会显示一个空格，不管你点多少空格都是一样，但是今天的这个空格符 能或许能帮你这些忙，最后还有三个空格符的排名情况。让我们一起来看这篇文章吧 首先我们先看看html段落元素中是怎么设置空格的： 大家都知道在HTML一个段…

    程序猿的头像 程序猿
    2025年12月21日
    000
  • html中的锚点和页面跳转 好文分享

    html中的锚点和页面跳转

    一、页面内跳转的锚点设置页面内的跳转需要两步：方法一：①：设置一个锚点链接去找喵星人；（注意：href属性的属性值最前面要加#）②：在页面中需要的位置设置锚点；（注意：a标签中要写一个name属性，属性值要与①中的href的属性值一样，不加#）标签中按需填写必要的文字，一般不写内容方法二：①：同方法…

    程序猿的头像 程序猿
    2025年12月21日
    000
  • 图片懒加载是什么意思？图片懒加载的实现方法 好文分享

    图片懒加载是什么意思？图片懒加载的实现方法

    本篇文章给大家带来的内容是关于图片懒加载是什么意思？图片懒加载的实现方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 所谓懒加载，是为了提高网页的打开的速度，获得更好用户体验的一种手段。其选择的重要的部分先加载，次要的部分需要的时候再加载。比如一个电商网站，首屏通常有很多的数据，…

    程序猿的头像 程序猿
    2025年12月21日
    000

  • 浏览器中5种常用的事件解析

    本篇文章给大家带来的内容是关于浏览器中常用的事件解析，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 表单事件 键盘事件 当 , 的值发生变化时触发。此外，打开 contenteditable 属性的元素，只要值发生变化，也会触发 input 事件。input 事件的一个特点，就是会…

    程序猿的头像 程序猿
    好文分享 2025年12月21日
    000
  • 深入理解HTML中label的作用和使用方法（附代码） 好文分享

    深入理解HTML中label的作用和使用方法（附代码）

    在工作中经常会用到表单布局，在表单布局中会遇到label标签，有很多新手在学习中可能会忽视了label标签，也有些人对label标签一知半解，那接下来就和大家聊聊label标签是什么意思？label标签什么用处？ 在表单布局中会遇到label标签的使用，其实label没有任何样式效果，有触发对应表单…

    程序猿的头像 程序猿
    2025年12月21日
    000
  • html small标签的如何使用？HTML small标签的用法总结 好文分享

    html small标签的如何使用？HTML small标签的用法总结

    html中不使用css样式来使文本变小，很多人都忘了这一种元素，small标签它的功能就是能在大部分元素中使用，并让被small标签选中的文本比正常的文本小一个字号，这就是small标签，接下来我们看看下面这篇关于small标签使用实例的文章吧 首先我们来看一个HTML small标签使用的实例： …

    程序猿的头像 程序猿
    2025年12月21日
    000

  • html怎样设置背景颜色？HTML背景颜色代码详细分析

    本篇文章使用了html的代码和css样式的代码为大家展示了如何设置html的背景颜色，后面还有如何设置背景图片的介绍。希望对大家有所帮助，现在我们一起来看这篇文章吧 首先我们先来看看关于HTML设置背景颜色： 我们首先设置一个背景颜色，把背景颜色设在body标签中我们来看看效果： PHP中文网这是P…

    程序猿的头像 程序猿
    2025年12月21日 • 好文分享
    000

  • 一篇文章让你看懂HTML基本规则和网页结构

    如果你不致力于成为美工的话，那么作为开发人员，可以读懂html、必要时能进行简单修改即可。下面跟着我的思路，保证一篇文让你看懂html，当然，再看的过程中，最好自己动手试试，这样理解就更深了。 1、html基本规则 我的网页………………………..…………………. 几乎所有的网页都是按照这个格式来的，…

    程序猿的头像 程序猿
    好文分享 2025年12月21日
    000
  • HTML简单介绍 好文分享

    HTML简单介绍

    本章给大家带来html简单介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 一、HTML是什么？　　　　　　　　 HTML语言用于描述网页    HTML是指超文本标记语言：Hyper Text Markup Language    HTML不是一种编程语言，而是一种标记语言，标…

    程序猿的头像 程序猿
    2025年12月21日
    000
  • css+html实现模拟百度首页（附代码） 好文分享

    css+html实现模拟百度首页（附代码）

    本篇文章给大家带来的内容是关于css+html实现模拟百度首页（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 代码如下： Title #biaoqian{ float: right; margin: 10px; } #d2,#d3,#d4,#d5,#d6,#d7,#d8,…

    程序猿的头像 程序猿
    2025年12月21日
    000
  • html input标签的属性有哪些？input标签的用法总结（附实例） 好文分享

    html input标签的属性有哪些？input标签的用法总结（附实例）

    本篇文章主要的向大家介绍了关于html input标签的属性，还有关于html input标签的具体的用法总结。让我们一起来看看html input标签有哪些用法吧 首先先来说说html input标签的属性： 1.type：该属性是input标签里唯一的必须输入的属性，当然，也可以不填，默认为ty…

    程序猿的头像 程序猿
    2025年12月21日
    000

发表回复

登录后才能评论
关注微信