位置: 编程技术 - 正文

jquery之别踩白块游戏的简单实现(别踩白块世界纪录视频)

编辑:rootadmin

推荐整理分享jquery之别踩白块游戏的简单实现(别踩白块世界纪录视频),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:别踩白块世界纪录视频,别踩白块脚本,别踩白块儿小游戏联盟,别踩白块大全,别踩白块自定义歌曲,别踩白块大全,别踩白块儿小游戏联盟,别踩白块儿小游戏联盟,内容如对您有帮助,希望把文章链接给更多的朋友!

前端学习要告一段落了,也没机会写什么像样的东西,然后无意中想起某人以前给我玩了一下别踩白块的游戏,手残还被嘲讽了下,现在想起来觉得这游戏实现起来也不难,于是上星期用jquery写了一个别踩白块的小游戏,就像当初学python的时候一样写了一个。然后今天正好抽个时间写个博客纪录下,算是对前一段时间学习的总结,没有玩过的可以去下一个原版的来玩一下,游戏很简单,就是从不断下落的方块中点击黑快,如果点击到百块或者有黑块没被点击到,游戏就算结束。游戏实现起来不难,都是一些小知识点。当时写的时候,脑袋有点糊,有一bug看了半天没解决,后来第二天早上脑袋清醒的时一看就看出来,顺便在这里提醒自己一定不要在脑袋不清醒的时候写代码。好了说了这么多先来看一下效果图,这里别吐槽我的css样式设计就好。。。

  

一、游戏html页面

游戏的html界面非常简单,分为4部分,

得分标题栏,

游戏界面主题容器,开始的时候为一个div,然后用jquery动态生成黑白格子

开始暂停按钮一栏

游戏结束时候显示的模态框

下面是代码部分

二、css布局  

jquery之别踩白块游戏的简单实现(别踩白块世界纪录视频)

写完了html然后就是css,这里主要用到 absolute布局,然后需要注意的是就是游戏过程由于需要不停的生成一栏新div,所以div容器要设置overflow: hidden,这一点需要注意下,然后其他的知识点也就是absolute,relative如何布局,模态框如何实现并居中,都不难,下面看下代码就好

三、jquery实现 

游戏最核心的部分就是jquery实现了,主要的功能如下

&#;游戏的初始化&#;如何动态插入一行div和删除一行div&#;开始暂停按钮的事件绑定&#;游戏过程中点击百块和黑快的事件委托&#;游戏如何移动以及如何得分&#;如何自动增加白块下落速度&#;如何判定游戏结束

下面来看一下初始化代码的实现,初始化之前写了个函数,自动插入一行,并且在这一行4个div中某一个为随机的黑块供游戏中点击,剩下3个白块,怎么随机生成,怎么动态创建div这里需要点小技巧,具体看下面。生成一行div的函数完成后只需在初始化函数里面调用4次即可

初始化完成后,我们需要做的就是如何让界面动起来,这里写了一个函数,每次调用该函数的话,游戏内容会自动向下移动几px,然后将该函数传给定时器,就可以不断的向下滑动,不过这里需要注意,下落过程中,如果下落的距离超过一行后,需要重新插入一行,然后将超出的那一行删除,而且需要将偏移的距离恢复到原来的位置,如果需要加速白块下落的速度,只需将每次向下移动加大即可,游戏后面的自动加速也是基于此来做的。下面来看一下这部分的代码

之后就是写开始,暂停部分,这里主要是对计时器的使用,这里需要注意的是每次点击的时候,都要先判断定时器是否已经清除,否则这里会有bug,下面来直接看一下代码

写到这里,再就是看一下,每次点击的时候如何操作,是否得分,还是点错了游戏结束,下面来看一下代码,界面上有4*4个格子,需要事件委托,来判断是哪一个白块被点击,如果点击的是黑快,将其变为白块,并且加上一分即可,否则点错的话,游戏就结束 

下面来看一下如何计算得分的代码,以及如何实现自动的加速,比较简单就不多说了

最后来看一下,游戏结束的时候如何处理,游戏结束的话,先暂停游戏下落,然后弹出模态对话框,让用户选择返回,还是重新来过,重新来过的话,分数清零,游戏界面清空,然后初始化再在自动触发开始按钮,开始下一轮游戏,

到这里,基本整个游戏都算实现了,游戏不复杂,但是要完全运行起来,没有bug也不是那么简单,有兴趣的也可以去写写,如果上面代码有什么问题的话,可以向我提出来。

以上这篇jquery之别踩白块游戏的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持积木网。

基于CSS3和jQuery实现跟随鼠标方位的Hover特效 今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果。当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标

jQuery layui常用方法介绍 layer简介:layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操

jQuery常用的4种加载方式分析 原创 本文实例分析了jQuery常用的4种加载方式。分享给大家供大家参考,具体如下:1.页面加载之前执行,与嵌入的js加载方式一样:(function($){})(jquery)示例:(

标签: 别踩白块世界纪录视频

本文链接地址:https://www.jiuchutong.com/biancheng/385078.html 转载请保留说明!

上一篇:关于input全选反选恶心的异常情况(input checked选择)

下一篇:基于CSS3和jQuery实现跟随鼠标方位的Hover特效(jquery和css的区别)

  • 纳税人进口货物应当自海关填发税款
  • 季度应收账款周转天数是按多少天除
  • 简易计税项目税金要计入成本吗
  • 合并会计报表编制讲解视频
  • 失业养老保险如何办理
  • 回拨工费经费怎么做会计分录?
  • 外币报表折算差额在会计报表中应作为
  • 报关单上金额要和合同上一样吗
  • 我国的税收管理体制和方向
  • 营改增后非增值税应税项目包括哪些
  • 非居民企业出租不动产房产税
  • 小区物业费开票名称
  • 乐器的税率
  • 承包方给发包方付费
  • 出售固定资产未收款账务处理
  • 公司变更监事需要换营业执照吗?
  • 软件开发公司怎么选择
  • 软件固定资产还是无形资产
  • 快递有发票快递如何收费
  • 工商年报的纳税总额怎么填写
  • qq游戏怎么玩不了怎么回事
  • 鸿蒙系统与安卓对比
  • 债券利息收入的分录
  • 给员工买饮料
  • 预提费用利息会增加吗
  • 个人所得税跨年度能退吗
  • window显示我的电脑
  • 财务如何核对会计信息
  • 购货款先到支付后付款
  • enter an integer
  • 企业所得税纳税标准
  • 公司盈利怎么分配给股东
  • 一般纳税人的进项普票怎么做账
  • 图书发票怎么开
  • 认识数据库思维导图
  • php100 jquery教程
  • java代理类是什么
  • 汽油增值税专用发票几个点
  • 回购股票并注销影响所有者权益吗
  • windows7/windows10/windows11最强Audacity音频编辑播放器软件,免费下载
  • 节日购买什么礼物发放职工
  • dev怎么保存项目
  • Python中input输入多行文本
  • 未认证的进项税额会计分录
  • 经营范围广告业务能开什么发票
  • 企业所得税计提金额怎么算
  • 关于SQL Server安全控制的说法正确的是
  • sql2008混合模式
  • DB2专家王云谈商业智能BI
  • 买车哪些费用可以计入固定资产
  • 差额增值税发票和全额增值税发票
  • 无法收回的其他应收款可以税前扣除吗
  • 本年利润的会计分录怎么写
  • 财务会计应收票据
  • 出口退税红字冲减
  • 最新版的电子发票没有章
  • 上个月结转的流量下个月能用吗
  • 原材料采购未入库会计分录
  • 百旺红字专用发票怎么开
  • 汇兑损益是什么凭证类型
  • 购车怎么做会计分录
  • 主营业务收入是什么意思
  • 会计凭证销毁的地方
  • mysql根据时间查询最新一条数据
  • win7登录设置
  • centos6.6网络配置
  • linux中vi替换
  • win7到欢迎界面卡半天
  • jquery的实现原理
  • css设置表格隔行换色
  • 好用的shell终端
  • 什么叫屏蔽屏幕按键
  • html+css网站设计基础教程
  • Python下的慢
  • javascript里的yield
  • 保障性住房是否可以买卖
  • 国家税务总局商洛市税务局
  • 总公司与分公司签订承包协议
  • 医保电子凭证怎么激活
  • 海关进口增值税怎么认证抵扣
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设