位置: 编程技术 - 正文

javascript实现别踩白块儿小游戏程序(js实现fizzbuzz)

编辑:rootadmin

推荐整理分享javascript实现别踩白块儿小游戏程序(js实现fizzbuzz),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript编写,js实现dialog,用js实现类的方法,javascript怎么弄,javascript怎么弄,javascript怎么弄,js实现dialog,javascript怎么弄,内容如对您有帮助,希望把文章链接给更多的朋友!

最近有朋友找我用JS帮忙仿做一个别踩白块的小游戏程序,但他给的源代码较麻烦,而且没有注释,理解起来很无力,我就以自己的想法自己做了这个小游戏,主要是应用JS对DOM和数组的操作。

程序思路:如图:将游戏区域的CSS设置为相对定位、溢出隐藏;两块“游戏板”上分别排布着块方格,黑色每行随机产生一个,“游戏板”向下滚动并交替显示,将每个操作板的黑块位置存入数组,每次点击时将数组pop出来进行比对(我觉得亮点在这……)。

这里是游戏的GitHub地址,大家可以到里点击中部菜单最右边的的Download ZIP按钮下载到桌面一试,HTML和JS,无需服务器。

下载地址

以下是具体实现,关键部分有注释。

HTML部分:

CSS部分:

JS部分:

这里分函数介绍:

javascript实现别踩白块儿小游戏程序(js实现fizzbuzz)

全局变量初始化

//用闭包函数使每次创建的游戏板的ID为boarda与boardb,其实用一个全局变量也行,不过为了有点逼格。。。

每次点击判定结果的函数

产生大框中小黑框位置的随机数,每次创建游戏板时调用此函数,根据产生数定义小黑块的位置

每次调用在游戏区域的上方生成一个待往下滚动的游戏板,并将其黑色的部分的数字PUSH进locArr中

找到脚本中存在的两个游戏板,使其往下滚动

将主体调用写在window.onload函数里,使得页面的游戏区域加载完成后再调用函数。

游戏扩展:

增加页面UI:因为一开始的HTML特别简单,所以UI也很好修改,设置按钮,点击触发开始函数。

改变游戏难度:修改setInterval的值,也可以对judge函数内的间隔数目进行修改,或将下落加速的表达式优化一下。

增加比分排行等:用ajax连接服务器,在游戏结束后将结果写入数据库,并引用数据中的排行榜。

改为街机模式:去除定时,修改judge函数,使其每次点击游戏板下落一个小方格的高度。设置总数,开始计时,结束计时。

js实现简单计算器 参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出:1:本来打算

js 右侧浮动层效果实现代码(跟随滚动) 实现代码一、!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""htmlheadmetahttp-equiv="Content-Type"content="text/html;charset=gb"/title无标题文档/title!--***********开始********

Bootstrap每天必学之表格 本文主要讲解的是表格,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的各种列表的展示,有时候也会因为用户或者老板的需求

标签: js实现fizzbuzz

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

上一篇:分享经典的JavaScript开发技巧(javascripr)

下一篇:js实现简单计算器(如何用js实现一个简单的计算器)

  • 个税汇算清缴怎么把全年一次性奖金并入综合所得
  • 企业所得税年报补报
  • 专利银行卡汇款流程
  • 怎么在电子税务局添加银行账户
  • 监理行业增值税税率多少
  • 生产成本月末转到哪里
  • 建安企业企业所得税核定
  • 在建工程工伤保险
  • 预计负债收回的会计分录
  • 安全费用支出范围包括
  • 银行收取的利息要交税吗
  • 商场积分兑换现金怎么用
  • 企业允许加计扣除的研发费用主要包括哪些?
  • 金税盘抵减税款分录
  • 发放股票股利后的未分配利润怎么算
  • 中小企业划分标准
  • 员工福利费用会计怎么做
  • 低值易耗品与固定资产有相同的特征,表现在哪里?
  • 生产企业成本会计科目
  • 项目工程会计账务处理
  • php数组根据值排序
  • 获取url的参数有哪些方法
  • 计算机怎么设置长亮
  • php面向对象是什么意思
  • 工业企业会计核算的特点
  • 在资本相对充足的情况下,为什么还要进一步引进外资
  • 水培吊兰的养殖周期
  • 运输发票的抵扣税率
  • 拉姆绍在哪里
  • 存货非正常损失进项税额转出
  • 中科院院士2023增选
  • 中小企业所得税优惠政策2022
  • php时间转换成时间戳
  • vue自定义指令生命周期
  • 英雄联盟轮转模式2020时间表
  • _ html
  • mkdir命令怎么用
  • discuz论坛无法登录
  • 收到个人所得税汇算清缴短信
  • 残保金的滞纳金怎么算
  • 工程施工企业收入1750万,利润怎么算
  • 有哪些企业项目
  • 已认证抵扣的发票如何红字信息表
  • 企业所得税缴纳模式
  • 融资租赁资产承租人的账务处理
  • 借贷不平衡是什么意思
  • 限售股上市流通是好还是坏
  • 财务负责人和办税员可以是一个吗
  • 股东退股如何清算
  • 咨询服务费开票税率
  • 稽查人员是干嘛的
  • 房地产会计核算科目
  • sql convert函数使用小结
  • win8.1使用技巧
  • win10 9月更新 问题
  • fedora安装xorg
  • Winpack.exe - Winpack是什么进程
  • 教大家一些实用的技巧方法
  • win7系统防火墙无法关闭
  • win7u盘没有安全选项卡
  • win7系统如何隐藏盘符
  • 卡带测评
  • 图文详解地理图册电子版
  • 飞行歌曲
  • django项目中遇到的难点
  • 机械革命系统重装官方教程
  • unity配置安卓sdk
  • bat文件指令
  • unityprefab
  • angularjs2
  • JavaScript中的NaN代表什么
  • 使用jquery实现的项目
  • 举例讲解生产可能性曲线
  • js 进阶
  • #androidsdk文件夹可以删除吗
  • 零基础入门安卓逆向
  • 外经证预缴税款网上流程
  • 湖南税务局发票查询
  • 加计抵减怎么计提分录
  • 西安税务总局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设