回归前端学习第22天-实现俄罗斯方块小游戏5(实现单机版1——结合HTML、CSS、JS来搭建界面)
实现单机版俄罗斯方块小游戏,搭建页面
- 实现静态基础页面
实现静态基础页面
HTML:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>俄罗斯方块5</title><link rel="stylesheet" href="./css/css.css"><!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script> -->
</head><body><div class="game" id="game"></div><div class="next" id="next"></div><div class="info"><div>已用时:<span id="time">0</span>s</div><div>已得分:<span id="score">0</span>分</div></div><script src="./js/script.js"></script>
</body></html>
CSS:
/* 20行10列,20*20的小块 */
.game {width: 200px;height: 400px;background-color: #F2FAFF;border-left: 1px solid blue;border-right: 1px solid blue;border-bottom: 1px solid blue;position: absolute;top: 10px;left: 10px;
}.next {width: 80px;height: 80px;background-color: F2FAFF;position: absolute;top: 10px;left: 250px;border: 1px solid blue;
}.info {position: absolute;top: 100px;left: 250px;
}
加入JS,实现页面显示(开始前设置成背景色,正在落下来的时候是粉色,落地后是灰色)
var nextData = [[2, 2, 0, 0],[0, 2, 2, 0],[0, 0, 0, 0],[0, 0, 0, 0]
];var gameData = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 2, 1, 0, 0, 0],[0, 0, 0, 2, 2, 2, 1, 0, 0, 0],[0, 0, 1, 1, 1, 1, 1, 0, 0, 0],
];var nextDivs = [];
var gameDivs = [];
// initGame()创建div,并将其保存的givDiv里面
var initGame = function () {for (var i = 0; i < gameData.length; i++) {var gameDiv = [];for (var j = 0; j < gameData[0].length; j++) {var newNode = document.createElement('div');newNode.className = 'none';newNode.style.top = (i * 20) + 'px';newNode.style.left = (j * 20) + 'px';// 建立一维数组document.getElementById('game').appendChild(newNode);gameDiv.push(newNode);}// 把一维数组放到多维数组中gameDivs.push(gameDiv);}
}
var initNext = function () {for (var i = 0; i < nextData.length; i++) {var nextDiv = [];for (var j = 0; j < nextData[0].length; j++) {var newNode = document.createElement('div');newNode.className = 'none';newNode.style.top = (i * 20) + 'px';newNode.style.left = (j * 20) + 'px';// 建立一维数组document.getElementById('next').appendChild(newNode);// 把一维数组放到多维数组中nextDiv.push(newNode);}nextDivs.push(nextDiv);}
}var refreshGame = function () {for (var i = 0; i < gameData.length; i++) {for (var j = 0; j < gameData[0].length; j++) {if (gameData[i][j] == 0) {gameDivs[i][j].className = 'none';} else if (gameData[i][j] == 1) {gameDivs[i][j].className = 'done';} else if (gameData[i][j] == 2) {gameDivs[i][j].className = 'current';}}}
}var refreshNext = function () {for (var i = 0; i < nextData.length; i++) {for (var j = 0; j < nextData[0].length; j++) {if (nextData[i][j] == 0) {nextDivs[i][j].className = 'none';} else if (nextData[i][j] == 1) {nextDivs[i][j].className = 'done';} else if (nextData[i][j] == 2) {nextDivs[i][j].className = 'current';}}}
}initGame();
initNext();
refreshGame();
refreshNext();
并在CSS中添加样式
/* 开始前 */
.none {width: 20px;height: 20px;position: absolute;box-sizing: border-box;background-color: #F2FAFF;
}/* 用户显示 */
.current {width: 20px;height: 20px;position: absolute;box-sizing: border-box;background-color: pink;border: 1px solid red;
}/* 落下来后 */
.done {width: 20px;height: 20px;position: absolute;box-sizing: border-box;background-color: gray;border: 1px solid black;
}
回归前端学习第22天-实现俄罗斯方块小游戏5(实现单机版1——结合HTML、CSS、JS来搭建界面)相关推荐
- 回归前端学习第26天-实现俄罗斯方块小游戏9(实现单机版,一个计时带干扰的单机版俄罗斯方块小游戏完成)
最终完善单机版俄罗斯方块小游戏,增加干扰功能--每10秒增加一行 增加干扰功能 game.js中加入addBotLine函数 local.js中加入 增加干扰功能 game.js中加入addBotLi ...
- 回归前端学习第24天-实现俄罗斯方块小游戏7(实现单机版3—实现消行、更新方块、结束)
更改game.js.local.js. game.js中加入代码 使用下一个方块 设置到底部后,方块定住并换色 实现消行. 游戏结束 最后导出 整体代码 local.js代码 move函数更改 随机生 ...
- 回归前端学习第25天-实现俄罗斯方块小游戏8(实现单机版4—设置计时、消行加分、游戏结束标志)
增改game.js与local.js代码,实现对游戏的设置计时.消行加分.游戏结束标志等环节的设计 计时 计分 游戏结束 完整代码 local.js game.js 注意 计时 1.定义显示时间的di ...
- 回归前端学习第23天-实现俄罗斯方块小游戏6(实现单机版2——键盘控制方块移动)
界面出现对应方块后,可自行控制其左右或快速下降的移动,上键可以实现方块形状的改变 调整代码结构 实现键盘控制方块移动 game.js中代码 注意这里在SquareFactory中又写了个make函数, ...
- 原创 回归前端学习第21天-实现俄罗斯方块小游戏3(深入了解Websocket~优化简易聊天室)
对昨天的简易聊天室进行优化 增加一个mes对象,将传送的数据放在对象里 增加一个mes对象,将传送的数据放在对象里 wsServer.js中替换代码 broadcast(conn.nickname + ...
- pyqt5制作俄罗斯方块小游戏-----源码解析
一.前言 最近学习pyqt5中文教程时,最后一个例子制作了一个俄罗斯方块小游戏,由于解释的不是很清楚,所以源码有点看不懂,查找网上资料后,大概弄懂了源码的原理. 二.绘制主窗口 将主窗口居中,且设置了 ...
- c++ 小游戏_C/C++编程新手入门基础系列:俄罗斯方块小游戏制作源代码
这篇文章主要为大家详细介绍了C语言实现俄罗斯方块小游戏,具有一定的参考价值,感兴趣的小伙伴们可以参考一下. 1.要先下载一个 graphics.h 的头文件来绘图. 2.初始化窗口:initgraph ...
- Python编写俄罗斯方块小游戏
俄罗斯方块是俄罗斯人发明的一款休闲类的小游戏,这款小游戏可以说是很多人童年的主打电子游戏了,本文我们使用 Python 来实现这款小游戏. 很多人学习python,不知道从何学起. 很多人学习pyth ...
- 3d游戏编程大师技巧 源代码_C/C++编程入门基础系列:俄罗斯方块小游戏制作,直接源代码分享...
这篇文章主要为大家详细介绍了C语言实现俄罗斯方块小游戏,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 1.要先下载一个 graphics.h 的头文件来绘图. 2.初始化窗口:initgraph( ...
最新文章
- 使用Xftp连接树莓派并传输文件
- Java中的Iterable与Iterator详解
- 相对于硬件计算机软件就是,计算机的软件是将解决问题的方法,软件是相对于硬件来说的...
- [BUUCTF-pwn]——bjdctf_2020_babyrop
- .net学习榜样的博客
- TCP的TIME_WAIT状态
- Servlet+JSP
- 【ArcGIS|空间分析】求年度NDVI最大值图像和NDVI最大值出现日期图像
- 拼途网: 从线上到线下的拼途旅行社区
- android视频添加特效,抖音蝴蝶翅膀特效怎么弄的 安卓手机上给视频加蝴蝶特效的方法...
- C语言中整型变量四舍五入,怎样将整型变量按四舍五入转换成整数
- Stylus入门教程--实例(1)
- 医院pacs系统服务器配置,浪潮为千佛山医院PACS系统开“药方”
- iOS开发- 实现类似于陌陌点点和探探首页切换效果类似
- CPU 是怎样工作的
- 仿iphone顶部状态栏_无需第三方APP,苹果iPhone手机屏幕录制的方法
- vmware虚拟机中ubuntu如何连接校园网netkeeper
- iOS APP下载安装时,如果出现此时无法下载安装APP的字样时,一些解决思路
- 机器学习入门(五):集成学习Bagging,Boosting,RandomForest和GridSearchCV参数调优
- Python语言程序设计(MOOC崇天)第三章基本数据类型学习笔记(天天向上的力量+文本进度条)
热门文章
- [leetcode]741摘樱桃,动态规划
- 用计算机绘画教学反思,电脑美术教学反思
- ZCMU-2014: 一生之敌(数学+枚举)
- 卸载重装Android Studio导入先前的版本,或者是误判SDK installed解决方法。(包含window,mac,Linux)
- 2015 android测试机,安卓版Android道道通H1A-21AW-K懒人包 2015年最新夏季版 全分辨率...
- 如何删除 Windows 10 系统生成的 WindowsApps 文件夹
- 免费的量化交易软件的交易策略?
- LabVIEW开发软件著作权申请1-写在前面(相关问题解答)
- 微信小程序开发之——婚礼邀请函-照片页面(4.4)
- CPU测试工具cpuburn-in使用方法