【2048小游戏】——CSS/原生js爬坑之纯CSS模态对话框&游戏结束

最新推荐文章于 2022-02-25 22:54:09 发布
最新推荐文章于 2022-02-25 22:54:09 发布
阅读量394 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34235864/article/details/86151734
版权
本文介绍了在制作2048小游戏的结束界面时，如何使用纯CSS创建模态对话框。作者分享了遇到的坑及解决方案，包括如何让Div铺满屏幕并居中，处理模态框背景透明度，以及游戏状态的判断等关键代码。
摘要由CSDN通过智能技术生成

【2048小游戏】——CSS/原生js爬坑之纯CSS模态对话框&游戏结束

引言：2048小游戏的结束界面，使用纯CSS制作模态对话框，一般做模态对话框都会使用BootStrap自带的模态对话框组件方便使用，但在制作要运行在移动端的小项目时，就不能使用BootStrap，因为文件太大，下载耗时，耗费流量。


 

一、模态对话框的组成

 

 

     2个Div，一个铺满整屛，一个显示内容

  • 坑：如何让Div铺满整屛？解决：2个办法
  1. 宽  高 100%    →    position：absolute；  →   top=0;left=0;
  2. 四个方向  margin-top/left/right/bootom  都设为0
  • 坑：如何让一个Div在整个窗口居中？
  1. 错误做法：  top  /  left   50%  不能设置居中  因为top / left是左上角的定位
  2. 正确做法：  top  /  left   50%  →  margin-top:-100px;(高的一半)   margin-left:-150px;(宽的一半)
  • 坑：模态框背景div的透明度  opacity是继承父元素的
  • 解决：background：rgba(55,55,55,.5);  使用rgba() 可以避免继承
  • 关键代码   ↓
最低0.47元/天 解锁文章
柳柳Elena
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2048小游戏js实现
qq_45428582的博客
07-21 738
摘要 2048小游戏，采用原生js的dom操作和css的animation，做的比较粗糙，目的是练习原生js的常用操作。游戏功能与界面均为他人设计，本demo具体代码实现由本人独立实现。 样式 demo功能： 常见的2048游戏功能，通过键盘上下左右键控制格子的移动。 游戏结束时alert(“游戏结束”) 主要实现方式 设置媒体查询，横屏设备以视口宽度设置rem，竖屏设备以视口高度设置rem @media screen and (min-width: 768px), screen and (orient
原生js => 实现模态框
weixin_34199335的博客
12-21 299
先看实现的的效果 具体代码如下所示 .html <!-- 模态框 --> <section class="modal"> <div class="modal-info center-self-xy mYBounceInDown"> <div class="modal-t"> <p class="cen
JS模拟模式窗口效果
diligentcat的专栏
09-03 1021
JS模拟模式窗口效果     var falpha = 0;     function fchange() {         if (falpha != 90) {             table1.style.filter = "alpha(opacity
js中猜数字游戏，如果输入的是10，终止循环，不是10，就继续弹出提示框。
qazwsx_edc1的博客
06-25 1555
//04.js代码//只要输入的内容不是888，就继续执行循环体内容//猜数字，如果10终止循环，不是10继续弹窗//使用do-while，需要用户先输入值，然后再去判断do{  var num = prompt('please input');}while(num != 10);//html代码<script src="04.js"></script>...
css模拟对话框
相濡以沫的博客
10-10 432
使用背景图制作对话框.live-chat-tipbox{ position: absolute; top: -100px; right: 10px; width: 85px; border: 2px solid #ff8b00; padding: 15px 17px; font-size: 14px; line-height: 1.5;
BOP-现代响应式纯js模态对话框插件特效代码
03-20
BOP是一款专为现代网页设计打造的响应式纯JavaScript模态对话框插件。它以其简洁的设计、高度的可定制性和强大的功能，深受开发者喜爱。这款插件的核心特性在于其能够轻松创建出符合Material Design、iOS以及现代...
移动端原生css模态框
11-06
总结起来，移动端原生CSS模态框的实现涉及CSS布局技巧和JavaScript交互逻辑。通过自定义样式和组件配置，我们可以创建高度适应移动端网页和小程序的提示组件。这个过程中，CSS用于定义视觉样式，Vue.js这样的前端...
BOP-现代响应式纯js模态对话框插件.zip
07-05
1. 下载并解压“BOP-现代响应式纯js模态对话框插件.zip”文件，将其中的JavaScript和CSS文件引入到你的HTML文档中。 2. 使用JavaScript创建模态对话框实例，通过调用相应的API方法来显示和控制对话框。 3. 通过CSS...
自己做的模拟模态对话框实现代码
09-05
在IE9中，原生的模态对话框可能无法满足需求，因此需要自己实现。以下是实现这个模拟模态对话框的关键代码和解释： 首先，创建HTML结构，包括一个按钮（用于触发对话框）、一个输入框（用于展示选择的经度）和一个...
游戏结束GAMEOVER文字特效
06-01
一款红色的液体流动GAME OVER英文字母动画，游戏结束文字动画特效。
JavaScript实现贪吃蛇小游戏
leihao-lester
11-05 1万+
JavaScript实现贪吃蛇小游戏 功能概述 本程序实现了如下功能： 贪吃蛇的基本功能 统计得分 开始与暂停 选择难度等级 设置快捷键 5.1 通过ijkl，wsad也能实现方向的切换 5.2 通过“P” 表示暂停，“C”表示开始或继续，"R"表示重新开始 实现过程 最开始的实现原理其实是参考的csdn的一位大神，他用JavaScript20行就实现了贪吃蛇的基本功能，难等可贵的是还没有bug，链接在此 要实现贪吃蛇大概有以下几个步骤： 画一个蛇的移动区域 画一条蛇 画食物 让蛇
用App Designer 制作2048小游戏
weixin_40676149的博客
02-25 4973
用App Designer 制作2048小游戏 用App Designer制作的2048，MATLAB版本是2020b。记录下创作思路，以免日后忘记。 APP界面设计 APP界面如下，为了好玩，还加入了游戏进行时播放音乐的功能。 下面是游戏结束界面： 除了按钮和开关部分，其余都可用标签控件制作。游戏结束界面在制作时将其Visible属性设为Off（确保在主界面上层），当判定游戏结束时再将Visible属性修改为On即可。 app.gameOverLabel.Visible =
网页版2048
webnoob
09-27 1万+
网页版的2048非常简单，用到的技术只要略懂html，css，javascript和jquery就ok了。游戏源码，我的github链接：https://github.com/wozien/demo/tree/master/2048游戏界面： 游戏细节问题： 游戏主要操作是在一个二位数组上board[][]，每个元素表示当前方格的数字，0表示没有数字。每次移动后，根据数组重新渲染格子。1.格子是
Creator实战项目JS【FlappyBird】-- 游戏结束面板、分数结算、数据持久化
weixin_40968046的博客
07-03 200
在面板上添加两个Label节点，一个Medal节点，放置到屏幕外，设置为隐藏。 在玩家碰撞时，激活该面板。 //碰撞开始 onCollisionEnter(other,self){ //显示游戏结束面板 -- cc.find('Canvas/base').active = true; } 写一个脚本控制面板的动作和显示效果。 由于最高分要放置关闭游戏后被清除，将数据存储在硬件上，称为“数据持久化”。 cc.sys.localStorage.setItem(‘maxScore’,cc.maxSco
linux开发板2048游戏界面图,linux c 实现2048游戏
weixin_30746067的博客
05-05 1416
2048这个游戏相信大家应该都玩过，那么今天我在linux下用C语言实现一个2048游戏。额。。实现完成后就长这个样子。先来说一下游戏规则：每次通过【I】向上移动、【K】向下移动、【J】向左移动、【L】向右移动，每移动一次，所有的数字都会往移动方向靠拢，然后在其余空白的地方出现一个数字，我这里只给出 2 ，相同数字的靠拢、相撞会相加。玩家要想办法在这个16个格子中凑出2048这个数字块，即过关。其...
javascript实现2048小游戏
热门推荐
funwj的博客
08-01 3万+
最近打算系统的学习一下javascript，想做点项目练手，就选择用javascript实现我比较喜欢玩的2048游戏，大体完成以后还是蛮有成就感的。 游戏相关截图：
Unity学习笔记-2048-点击空白处退出界面
Librababy
06-09 1790
1.在该界面添加事件组件 EventTrigge 2.将要隐藏的界面拖入PointerClick中 3.将方法设置为Hide
纯JS实现图片点击弹出模态框效果
"本文主要介绍了如何使用纯JavaScript实现图片点击后弹出模态框的效果，包括模态框的实现思路、HTML结构、CSS样式以及JavaScript交互逻辑。" 在网页设计中，图片模态框是一种常见的功能，用户点击小图片后，大图会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值