位置: 编程技术 - 正文

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的区别)

  • 什么是反避税税率
  • 诚信纳税的含义是什么
  • 有形资产租赁服务的税率
  • 汇算清缴要退税怎么做凭证呢
  • 火车票可以抵扣多少增值税
  • 财务会计制度备案操作流程
  • 去年开的专票今年可以作废吗
  • 增值税抵扣可以跨月吗
  • 服装纳税税率
  • 应收账款和应付账款对冲会计分录
  • 可供出售金融资产是指什么
  • 同一控制下企业合并取得的长期股权投资
  • 金融服务征税范围包括哪些
  • 住房公积金在个税中如何扣除
  • 上年度重复结转会计分录
  • 可转换债券发行主体
  • 非独立核算不用做核算吗
  • 个人去税局开劳务费需要注意什么
  • 消费税的纳税环节可能有
  • 季初是什么意思
  • 建筑公司材料费属于什么科目
  • 长期股权投资的交易费用计入哪里
  • 代开专票交的城建税怎么申报附加税
  • 个人所得税的税收标准
  • 物物交换增值税处理
  • 商标公司转让给个人提供什么?
  • 冲暂估成本会计分录怎么做
  • 印花税滞纳金应计入什么
  • 公司增资扩股需要考略公司资产吗
  • PHP:mb_strtolower()的用法_mbstring函数
  • 现金发放的餐补算工资么
  • win11安装程序提示非管理员账号
  • 文件夹删除需要管理员权限怎么弄
  • 销售不动产分期收款怎么确认收入
  • 三防手机厂商
  • php单例模式例子
  • 在建工程盘盈计入什么
  • 同一控制下企业合并发生的审计费用计入
  • t typescript
  • 摊销期在一年以内的费用
  • php深度分析
  • 二元运算例子
  • faster rcnn详解
  • thinkphp模型作用
  • 车保险费中的车险是什么
  • 公司向股东个人借款的会计分录
  • 什么是变动成本率
  • 开具红字发票资料清单
  • 反写必须15号之前吗
  • 财务费用的具体内容
  • 属于长期险种的是
  • 二分查找和折半查找一样吗
  • mysql中用户和权限的作用
  • 公司签发银行承兑汇票的行为属于什么
  • 公司两个股东变更为一个股东,需要交税么
  • 外币报表折算差额可以转损益吗
  • 发票未及时开,但是双方会计已经做帐,怎么办?
  • 混凝土增值税发票税率
  • 预收账款如何做账务处理
  • 单位缴纳工会经费有什么用
  • 营业利润为负数表示什么
  • 分公司和总公司在一个地方
  • 会计中原始凭证是什么意思
  • mac上mysql安装
  • sqlserver按时间查询
  • mysql日期字段
  • windows8.1如何分区
  • bois开启usb功能
  • win7无法运行
  • vista和win10
  • squid详细
  • linux怎样过滤一个关键字
  • servers.mcs
  • 黑白棋手机游戏
  • Android游戏开发教程
  • 用python三角形
  • bash脚本加密
  • 三消游戏在线
  • python 批量ping
  • javascript基础
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设