java别踩白块_jquery之别踩白块游戏的简单实现
前端学习要告一段落了,也没机会写什么像样的东西,然后无意中想起某人以前给我玩了一下别踩白块的游戏,手残还被嘲讽了下,现在想起来觉得这游戏实现起来也不难,于是上星期用jquery写了一个别踩白块的小游戏,就像当初学python的时候一样写了一个2048。然后今天正好抽个时间写个博客纪录下,算是对前一段时间学习的总结,没有玩过的可以去下一个原版的来玩一下,游戏很简单,就是从不断下落的方块中点击黑快,如果点击到百块或者有黑块没被点击到,游戏就算结束。游戏实现起来不难,都是一些小知识点。当时写的时候,脑袋有点糊,有一bug看了半天没解决,后来第二天早上脑袋清醒的时一看就看出来,顺便在这里提醒自己一定不要在脑袋不清醒的时候写代码。好了说了这么多先来看一下效果图,这里别吐槽我的css样式设计就好。。。
一、游戏html页面
游戏的html界面非常简单,分为4部分,
得分标题栏,
游戏界面主题容器,开始的时候为一个div,然后用jquery动态生成黑白格子
开始暂停按钮一栏
游戏结束时候显示的模态框
下面是代码部分
Title
Score:0
开始
暂停
重新开始
返回
二、css布局
写完了html然后就是css,这里主要用到 absolute布局,然后需要注意的是就是游戏过程由于需要不停的生成一栏新div,所以div容器要设置overflow: hidden,这一点需要注意下,然后其他的知识点也就是absolute,relative如何布局,模态框如何实现并居中,都不难,下面看下代码就好
*{
margin: 0;
padding: 0;
}
.main{
width: 808px;
margin: 50px auto;
background: gray;
min-height: 544px;
position: relative;
}
.content{
width: 408px;
margin: 0 auto;
height:408px;
border: 2px solid green;
background-color: white;
position: relative;
top:0;
overflow: hidden;
}
#inner{
position: relative;
top:-102px;
}
.item{
height: 102px;
}
.item *{
float: left;
height: 100px;
width: 100px;
background-color: white;
border: 1px solid black;
}
.black{
background-color: black;
}
h3{
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
h3 span{
color:brown;
}
.hide{
display: none;
}
.shadow{
position: absolute;
left: 0;
bottom: 0;
right: 0;
top: 0;
background-color: gray;
opacity: 0.6;
}
.alert-box{
position: absolute;
width: 300px;
height: 300px;
left: 50%;
top:50%;
margin-left: -150px;
margin-top: -150px;
background-color: white;
}
.alert-box .game-over{
margin-left: 20px;
margin-top: 30px;
}
.alert-box .btn{
width: 150px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
.main .btn .container{
width: 150px;
margin: 20px auto;
}
button{
cursor: pointer;
border: 0;
display: inline-block;
width: 70px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: cyan;
}
三、jquery实现
游戏最核心的部分就是jquery实现了,主要的功能如下
•游戏的初始化
•如何动态插入一行div和删除一行div
•开始暂停按钮的事件绑定
•游戏过程中点击百块和黑快的事件委托
•游戏如何移动以及如何得分
•如何自动增加白块下落速度
•如何判定游戏结束
下面来看一下初始化代码的实现,初始化之前写了个函数,自动插入一行,并且在这一行4个div中某一个为随机的黑块供游戏中点击,剩下3个白块,怎么随机生成,怎么动态创建div这里需要点小技巧,具体看下面。生成一行div的函数完成后只需在初始化函数里面调用4次即可
function insertDiv() {
var rand = Math.floor(Math.random() * 4); // 生成一个0到3 的随机数,用来作为判断生成黑块的位置
$("#inner").prepend("
$.each([0, 1, 2, 3], function (k, v) {
if (v == rand) {
$("#inner .item").first().append("
} else {
$("#inner .item").first().append("
}
})
}
function init() { // 初始生成4*4的div
$.each([0, 1, 2, 3], function () {
insertDiv();
});
}
初始化完成后,我们需要做的就是如何让界面动起来,这里写了一个函数,每次调用该函数的话,游戏内容会自动向下移动几px,然后将该函数传给定时器,就可以不断的向下滑动,不过这里需要注意,下落过程中,如果下落的距离超过一行后,需要重新插入一行,然后将超出的那一行删除,而且需要将偏移的距离恢复到原来的位置,如果需要加速白块下落的速度,只需将每次向下移动加大即可,游戏后面的自动加速也是基于此来做的。下面来看一下这部分的代码
function move() {
var ctop = parseInt($("#inner").offset().top);
ctop += window.globalSpeed; // 自定义的全局变量, 每次下落偏移的距离
$("#inner").offset({top: ctop});
if (ctop >= 114) {
insertDiv();
$("#inner").offset({top: 12}); // 刚好移动一个item后在上移一个item
delDiv();
}
}
之后就是写开始,暂停部分,这里主要是对计时器的使用,这里需要注意的是每次点击的时候,都要先判断定时器是否已经清除,否则这里会有bug,下面来直接看一下代码
function bindStart() {
$("#begin").mouseover(function () {
$(this).css("cursor", 'pointer');
}).click(function () {
if(window.globalIsClearT1){ // 自定义的全局变量,看定时器是否清楚
}else {
clearInterval(window.globalT1); //没有清除的话,先清除,避免两次按下开始按钮
}
window.globalT1 = setInterval(move, 30);
window.globalStartClick = true; //全局变量,是否开始标志位,只有开始了,才能点击
})
}
function bindStop() {
$("#stop").mouseover(function () {
$(this).css("cursor", 'pointer');
}).click(function () {
clearInterval(window.globalT1);
window.globalStartClick = false;
window.globalIsClearT1 = true;
})
}
写到这里,再就是看一下,每次点击的时候如何操作,是否得分,还是点错了游戏结束,下面来看一下代码,界面上有4*4个格子,需要事件委托,来判断是哪一个白块被点击,如果点击的是黑快,将其变为白块,并且加上一分即可,否则点错的话,游戏就结束
function bindClick() {
$("#inner").click(function (e) {
if (window.globalStartClick) {
var current = $(e.target);
if (current.hasClass("black")) {
current.removeClass("black");
score();
} else {
gameOver();
}
}
});
}
下面来看一下如何计算得分的代码,以及如何实现自动的加速,比较简单就不多说了
function score() {
var score = parseInt($("#score").text());
if(score%10 == 0){
window.globalSpeed += 1; //得到一定的分数后就自动加速
}
$("#score").text(score + 1);
}
最后来看一下,游戏结束的时候如何处理,游戏结束的话,先暂停游戏下落,然后弹出模态对话框,让用户选择返回,还是重新来过,重新来过的话,分数清零,游戏界面清空,然后初始化再在自动触发开始按钮,开始下一轮游戏,
function gameOver() {
//暂停游戏,显示模态框
$("#stop").trigger('click');
window.globalIsClearT1 = true;
$(".shadow").removeClass('hide').next().removeClass('hide');
$("#again").click(function () {
clearInterval(window.globalT1);
$(".shadow").addClass('hide').next().addClass('hide');
$("#score").text(0);
clearAll();
init();
$("#begin").trigger('click');
// window.globalT1 = setInterval(move, 30)
});
到这里,基本整个游戏都算实现了,游戏不复杂,但是要完全运行起来,没有bug也不是那么简单,有兴趣的也可以去写写,如果上面代码有什么问题的话,可以向我提出来。
以上这篇jquery之别踩白块游戏的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
java别踩白块_jquery之别踩白块游戏的简单实现相关推荐
- 初学JS——利用JS制作的别踩白块儿(街机模式) 小游戏
初学JS--利用JS制作的别踩白块儿(街机模式) 小游戏 这个是上个星期5写的了,当时是突然想写个游戏,就想到了别踩白块儿,当时的想法是 可能普通模式的别踩白块儿因为他的"块儿"是 ...
- java自由块_JAVA 静态的自由块和非静态的自由块
java中的自由块分为静态的自由块和非静态的自由块,这两种的执行是有区别的. 非静态自由块的执行时间是:在执行构造函数之前. 静态自由块的执行时间是:class文件加载时执行. 执行的时间不同,造成的 ...
- java分装_Java ——Number Math 类 装箱 拆箱 代码块
本节重点思维导图 当需要使用数字的时候,我们通常使用内置数据类型,如:byte.int.long.double 等 int a = 5000;float b = 13.65f;byte c = 0x4 ...
- Java多线程初学者指南(12):使用Synchronized块同步变量
我们可以通过synchronized块来同步特定的静态或非静态方法.要想实现这种需求必须为这些特性的方法定义一个类变量,然后将这些方法的代码用synchronized块括起来,并将这个类变量作为参数传 ...
- 麦块未发现java怎么解决_教大家麦块我的世界盒子如何打开游戏
近日有关于麦块我的世界盒子如何打开游戏的问题受到了很多网友们的关注,大多数网友都想要知道麦块我的世界盒子如何打开游戏的具体情况,那么关于到麦块我的世界盒子如何打开游戏的相关信息,小编也是在网上进行了一 ...
- java同步方法必须是静态的吗_Java基础知识之synchronized同步方法、代码块、静态方法、静态代码块的区别...
Java中的同步块用synchronized标记,是同步在某个对象上,所有同步在一个对象上的同步块在同一时刻只能被一个线程进入并执行操作,其他等待进入该同步块的线程将被阻塞,直到执行该同步块中的线程退 ...
- java类中的static块_java类中static代码块的执行次数
java类中 static静态代码块的执行次数 1.在类加载的init阶段,类的类构造器中会收集所有的static块和字段并执行,static块只执行一次,由JVM保证其只执行一次. 2.直接看示例 ...
- 在Java中,每个try块后面都必须紧跟catch块吗?
The question is that "Is it necessary that each try block must be followed by a catch block in ...
- 「Java」基于Mirai的qq机器人开发踩坑笔记(其一)
目录 0. 前置操作 I. 安装MCL II. MCL自动登录配置 III. 安装IDEA插件 1. 新建Mirai项目 2. 编写主类 3. 添加外部依赖 4. IDEA运行 5. 插件打包 6. ...
最新文章
- AngularJs $cacheFactory 缓存服务
- 一年月份大小月口诀_有关12个月份的顺口溜
- 疯狂python讲义视频 百度云-疯狂Python讲义 PDF 含源码工具版
- 【若依(ruoyi)】数据选择对话框
- 基本算法个人PHP 实现(四)
- DM8168 新三板系统启动
- docker镜像制作(一)
- 我在使用chrome经常使用的一些技巧
- leetcode 75. 颜色分类(双指针)
- 使用Grab的实验平台进行混沌实验编排
- Springboot项目与vue项目整合打包
- 【注意】LeetCode 2. Add Two Numbers
- 计算机怎么剪切音乐然后合在一起,电脑怎么剪辑合并音乐
- 2021年必备procreate笔刷推荐下载
- 电脑中如何添加环境变量
- AD10封装库转到PADS封装库里
- 面试时候被问到为什么离职 离职原因 该如何回答?
- IE 提示 当前安全设置不允许下载该文件
- VINS-Mono 代码解析六、边缘化(2)理论和代码详解
- 为什么宇宙年龄138亿年(哈勃常数的倒数),大小竟有930亿光年?
热门文章
- 计算机管理磁盘管理无法创建GPT,如何创建GPT磁盘|在电脑中建立GPT磁盘模式的方法...
- 【京东商城首页实战2】导航条制作(1)
- cad中填充的剖面线不能被修剪_cad 剖面线在图案填充里应该怎么设置
- 科学收集并分析Android用户敏感信息实战
- 刷题神器怎么导入java,怎么导题库_有没有比较好的可以自己导入题库进行模拟考试练习的软件_淘题吧...
- 精华版:VOS3000安全设置 防火墙需要开放的端口
- visio画一个框把需要的流程图框起来
- 加工中心的刀具库通常位于远离主轴的机床侧面或顶部
- 刘德华要我做地下夫人 喻可欣说刘德华不是负心汉(图)
- AssetStudio / UnityStudio下载地址