您现在的位置是：网站首页> 编程资料编程资料
HTML5+JS实现俄罗斯方块原理及具体步骤Html5原创俄罗斯方块（基于canvas）html5实现简单的俄罗斯方块动画效果游戏源码html5实现的3D立体俄罗斯方块游戏源码基于HTML5/CSS3实现的简易版俄罗斯方块游戏源码Html5写一个简单的俄罗斯方块小游戏
2021-09-01
1009人已围观
简介 俄罗斯方块有7个部件，每个部件所占的矩形的个数和位置不同，所以建立部件类，然后建立数组储存7个部件，每个部件包涵数组储存该部件所占的矩形的个数和位置，下面为大家详细介绍下
本游戏实现的基本原理:
游戏区域是限定大小的区域，本游戏的游戏区域有21×25个矩形,每个矩形width为10单位，heght为6个单位(canvas 的绝对单位是固定的，非像素)。
创建RusBlock类包含相应的数据和行为，创建二维数组aState[21][25]记录游戏区域中被标记的矩形。
俄罗斯方块有7个部件，每个部件所占的矩形的个数和位置不同，所以建立部件类，然后建立数组储存7个部件，每个部件包涵数组储存该部件所占的矩形的个数和位置。当下落的部件到底了，就会产生一个新的部件，就部件的被标记的矩形就会赋值给游戏区域的数组。
在游戏循环函数中，打印正在下落的部件，和已经固定好的部件，还有下一下落的部件。
RusBlock
第二步:样式
RosBlock.css
body {
background-color:gray;
text-align:center;
font-family:’Times New Roman’;
background-image:url(“”);
}
h1#Game-Name {
background-color:white;
width:100%;
font-size:x-large;
}
h2,#Game-Score {
font-size:x-large;
background-color:white;
}
#Game-Area {
position:absolute;
left:10%;
width:80%;
height:99%;
}
canvas#Game-Canvas {
background-color:white;
width:80%;
height:98%;
float:left;
}
#Button-Area ,#Score-Area{
width:10%;
height:100%;
float:left;
}
#Button-Game-Start ,#Button-Game-End,#Button-Game-Share,#Select-Game-Level{
width:100%;
height:10%;
font-size:larger;
border-right-width:3px;
background-color:white;
}
#Select-Game-Level {
width:100%;
height:100%;
font-size:x-large;
border-color:gray;
}
第三步:编写js代码
RusBlock.js
Rusblock类包括的成员解析:
数据:
nCurrentComID:当前下落部件的ID
aState[21][25]:存储游戏区域状态的数组
CurrentCom：当前下落的部件
NextCom：下一部件
ptIndex：当前下落的部件相对游戏区域的索引
函数:
NewNextCom()：产生新的下一部件
NextComToCurrentCom():将下一部件的数据转移到当前下落的部件上
CanDown():判断当前部件是否还可以下落
CanNew():判断是否还可以产生新的部件
Left():当前部件向左移动
Right():当前部件向右移动
Rotate():当前部件顺时针旋转
Acceleratet():当前部件向下加速
Disappear():消去一行
CheckFail():判断是否游戏失败
InvalidateRect():刷新当前部件的区域
完成:下载Demo
游戏区域是限定大小的区域，本游戏的游戏区域有21×25个矩形,每个矩形width为10单位，heght为6个单位(canvas 的绝对单位是固定的，非像素)。
创建RusBlock类包含相应的数据和行为，创建二维数组aState[21][25]记录游戏区域中被标记的矩形。
俄罗斯方块有7个部件，每个部件所占的矩形的个数和位置不同，所以建立部件类，然后建立数组储存7个部件，每个部件包涵数组储存该部件所占的矩形的个数和位置。当下落的部件到底了，就会产生一个新的部件，就部件的被标记的矩形就会赋值给游戏区域的数组。
在游戏循环函数中，打印正在下落的部件，和已经固定好的部件，还有下一下落的部件。
基本知识:
HTML5 CSS JS
本游戏包括三个文件:
RusBlock.html:设定元素
RusBlock.css:设定样式
RusBlock.js:脚本控制
第一步:界面的设置和素材的准备
RusBlock.html
复制代码
代码如下:RusBlock
Score
0
第二步:样式
RosBlock.css
复制代码
代码如下:body {
background-color:gray;
text-align:center;
font-family:’Times New Roman’;
background-image:url(“”);
}
h1#Game-Name {
background-color:white;
width:100%;
font-size:x-large;
}
h2,#Game-Score {
font-size:x-large;
background-color:white;
}
#Game-Area {
position:absolute;
left:10%;
width:80%;
height:99%;
}
canvas#Game-Canvas {
background-color:white;
width:80%;
height:98%;
float:left;
}
#Button-Area ,#Score-Area{
width:10%;
height:100%;
float:left;
}
#Button-Game-Start ,#Button-Game-End,#Button-Game-Share,#Select-Game-Level{
width:100%;
height:10%;
font-size:larger;
border-right-width:3px;
background-color:white;
}
#Select-Game-Level {
width:100%;
height:100%;
font-size:x-large;
border-color:gray;
}
第三步:编写js代码
RusBlock.js
Rusblock类包括的成员解析:
数据:
nCurrentComID:当前下落部件的ID
aState[21][25]:存储游戏区域状态的数组
CurrentCom：当前下落的部件
NextCom：下一部件
ptIndex：当前下落的部件相对游戏区域的索引
函数:
NewNextCom()：产生新的下一部件
NextComToCurrentCom():将下一部件的数据转移到当前下落的部件上
CanDown():判断当前部件是否还可以下落
CanNew():判断是否还可以产生新的部件
Left():当前部件向左移动
Right():当前部件向右移动
Rotate():当前部件顺时针旋转
Acceleratet():当前部件向下加速
Disappear():消去一行
CheckFail():判断是否游戏失败
InvalidateRect():刷新当前部件的区域
完成:下载Demo
相关内容
- HTML5样式控制示例代码html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- HTML5画渐变背景图片并自动下载实现步骤HTML5轻松实现全屏视频背景的示例HTML5 body设置全屏背景图片的示例代码
- HTML5在IE10、火狐下中文乱码问题的解决方法html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- HTML5 UTF-8 中文乱码的解决方法中文转换成html中的utf-8的方法
- HTML5语音识别标签写法附图HTML5实时语音通话聊天MP3压缩传输3KB每秒使用Html5多媒体实现微信语音功能鲜为人知的HTML5语音合成功能基于Html5实现的语音搜索功能HTML5为输入框添加语音输入功能的实现方法Jquery+html5可设置闹钟并且会语音提醒的时钟特效源码用html5实现语音搜索框的方法html5的新玩法——语音搜索HTML5 语音搜索只需一句代码HTML5 语音搜索(淘宝店语音搜素)
- html5 Web SQL Database 之事务处理函数transaction与executeSQL解析html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- 用canvas实现图片滤镜效果附演示canvas学习和滤镜实现代码Canvas系列之滤镜效果
- html5 的a标签 Href 拨电话的写法HTML基础知识——设置超链接的样式简单实例HTML中的超链接标签使用教程XHTML中的超链接标签使用教程html 用超链接打开新窗口其可控制窗口属性html超链接a标签的href跳转跟onclick之间执行顺序示例介绍解决html 图片img加超链接后产生难看的蓝色边框问题html超链接样式(四种不同状态)设置示例html 中文乱码 HTML超链接中文乱码问题分析及解决方法HTML利用超链接打开链接文件的方法介绍HTML设置超链接字体颜色和点击后的字体颜色
- HTML5和以前HTML4的区别整理HTML5对比HTML4的主要改变和改进总结Web时代变迁及html5与html4的区别HTML与XHTML、以及HTML4与HTML5标签之间的区别简介HTML5标签与HTML4标签的区别示例介绍html4和html5区别之如何在一个input上添加焦点实现代码浅谈HTML5与HTML4的10个关键区别
- html5的websockets全双工通信详解学习示例HTML5+WebSocket实现多文件同时上传的实例HTML5-WebSocket实现聊天室示例浅析HTML5的WebSocket与服务器推送事件HTML5实现WebSocket协议原理浅析利用html5的websocket实现websocket聊天室html5-websocket基于远程方法调用的数据交互实现基于HTML5的WebSocket的实例代码
