html5俄罗斯方块
游戏介绍:
实现简单的俄罗斯方块的游戏，调整整个网页布局.会用到html5/css3/js相关知识，适合前端初学者练手
建议阅读时间: 1 hour
github address: 源代码
效果图:
部分代码: 有需要自己github下载
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>俄罗斯方块title>
<link rel="stylesheet" href="css/style.css">
head>
<body scroll="no">
<div class="bg">
<div class="content">
<div class="game" id="game">div>
<div class="desc">
<div id="nextTxt"><span>下一个span>div>
<div class="next" id="next">div>
div>
<div class="info">
<div id="alltime" class="infplay">已用时: <span id="time">0span>sdiv>
<div id="allscore" class="play">已得分: <span id="score">0span>分div>
<div id="tutorial">
<p>
说明: <br>- "下"、"左"、"右"键控制方向,"上"为变形<br>
- 一次消行得分可能为"10"、"30"、"60"、"100"分<br>
- 游戏结束会自动停止<br>
p>
div>
div>
<footer>
<div id="author">
<p>Posted by: Clarencep>
<p>Github Address: <a href="https://github.com/youaresherlock">Githuba>p>
div>
footer>
div>
div>
<script src="js/square.js">script>
<script src="js/squareFactory.js">script>
<script src="js/game.js">script>
<script src="js/local.js">script>
<script src="js/remote.js">script>
<script src="js/script.js">script>
bodys>
html>
style.css
.bg {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
width: 100%;
height: 100%;
background-image: url(../img/01.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
.content {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.3);
}
/* 总体是20行10列大小，每个小块是20*20大小 */
.game {
width: 200px;
height: 400px;
background-color: #fefefe;
border: 2px solid lightblue;
box-shadow:0px 0px 2px 2px lightblue;
border-radius: 2px;
position: absolute;
top: 10px; /*position属性为static,设置top属性不会产生任何效果*/
left: 10px;
}
.desc {
position: absolute;
top: 10px;
left: 250px;
}
#nextTxt {
width: 80px;
border: 2px solid lightblue;
box-shadow:0px 0px 2px 2px lightblue;
border-radius: 2px;
background-image: none;
text-align: center;
color: #eee;
font-family: "Arial Black", Gadget, sans-serif;/*字体*/
font-style: normal;/*字体样式*/
font-variant: normal;/*小写字母*/
font-size: 14px;
display: block;
cursor: pointer;/*鼠标的形状*/
}
/* .next为4行4列 */
.next {
width: 80px;
height: 80px;
background-color: #fefefe;
position: absolute;
border: 2px solid lightblue;
box-shadow:0px 0px 2px 2px lightblue;
border-radius: 2px;
}
.info {
position: absolute;
top: 140px;
left: 250px;
}
.none, .current, .done {
width: 20px;
height: 20px;
position: absolute;
/* 默认为content-box, 即元素的填充和边框布局和绘制指定宽度和高度除外
border-box对元素指定宽度和高度包括padding和border的指定 */
box-sizing: border-box;
line-height: 2;
}
/* 没有方块的区域 */
.none {
background-color: #fefefe;
border: 2px solid black;
opacity: 0.1;
}
/* 用户正在操作的方块 */
.current {
background-color: whitesmoke;
border: 1px solid red;
box-shadow:inset 0px 2px 10px -2px red,
inset 0px -2px 10px -2px red;
}
/* 已经落下来的方块 */
.done {
background-color: gray;
border: 1px solid black;
}
#alltime, #allscore, #tutorial{
text-align: center;/*按钮控件中文本居中显示*/
line-height: 100%;/*用百分比设置行高*/
padding-top: 0.5em;/*文本顶部的内边距*/
padding-right: 2em;/*文本右侧的内边距*/
padding-bottom: 0.55em;/*文本底部的内边距*/
padding-left: 2em;/*文本左侧的内边距*/
font-family: "Arial Black", Gadget, sans-serif;/*字体*/
font-size: 14px;/*字体大小*/
font-style: normal;/*字体样式*/
font-variant: normal;/*小写字母*/
font-weight: normal;/*文本不需要加粗*/
text-decoration: none;/*文本不需要下划线等*/
display: block;
cursor: pointer;/*鼠标的形状*/
zoom:1;
outline-width:medium;/*整个轮廓的宽度*/
outline-color:inherit;/*轮廓的颜色*/
font-size-adjust:none;
font-stretch:normal;
border-top-left-radius:0.5em;/*圆角边框弧度*/
border-top-right-radius:0.5em;/*圆角边框弧度*/
border-bottom-left-radius:0.5em;/*圆角边框弧度*/
border-bottom-right-radius:0.5em;/*圆角边框弧度*/
box-shadow:0px 1px 2px rgba(0,0,0,0.2);/*给按钮增加阴影*/
color: #eee;/*设置文本的颜色*/
border-top-color: #eee;/*边框的颜色*/
border-right-color: #eee;/*边框的颜色*/
border-bottom-color: #eee;/*边框的颜色*/
border-left-color: #eee;/*边框的颜色*/
border-top-width:1px;/*边框的粗细*/
border-right-width:1px;/*边框的粗细*/
border-bottom-width:1px;/*边框的粗细*/
border-left-width:1px;/*边框的粗细*/
border-top-style:solid;/*边框的样式*/
border-right-style:solid;/*边框的样式*/
border-bottom-style:solid;/*边框的样式*/
border-left-style:solid;/*边框的样式*/
background-image: none;/*背景图片*/
background-attachment:scroll;/*背景图片是否移动*/
background-repeat:repeat;/*允许重复*/
background-position-x:0%;/*背景的x轴坐标*/
background-position-y:0%;/*背景的y轴坐标*/
background-size:auto;/*背景图片的尺寸*/
background-origin:padding-box;/*背景图像相对于内边距框来定位*/
background-clip:padding-box;/*背景被裁剪到内边距框*/
margin-top: 10px;
box-shadow:0px 0px 8px #e5e5e5;
}
#tutorial {
position: absolute;
top: 110px;
text-align: left;
/* nowrap: 文本不会换行，文本会在同一行上继续，直到遇到
标签为止 */
white-space: nowrap;
line-height: 2em;
}
@keyframes infinitePlay
{
from { color: #eee;}
to {color: black;}
}
@keyframes changeColor
{
from {color: #eee;}
to {color: rgb(236, 96, 117);}
}
@keyframes changeColor1
{
from {color: #eee;}
to {color: rgb(236, 96, 117);}
}
.play {
animation-name:changeColor;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: 1;
}
.restart {
animation-name:changeColor1;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: 1;
}
.infplay {
animation-name:infinitePlay;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
}
footer {
width: 100%;
height: 80px;
background: #282f35;
padding: 10px 0;
box-sizing: border-box;
position: absolute;
bottom:0;
left: 0;
color: #ABA498;
text-align: left;
font-family: "Arial Black", Gadget, sans-serif;/*字体*/
font-size: 10px;/*字体大小*/
font-style: normal;/*字体样式*/
font-variant: normal;/*小写字母*/
font-weight: normal;/*文本不需要加粗*/
text-decoration: none;/*文本不需要下划线等*/
display: block;
cursor: pointer;/*鼠标的形状*/
}
a{
color: #eee;
text-decoration: none;
}
a:hover {
color:pink;
}
game.js、 script.js、local.js、square.js、squareFactory.js见源码
需完善之处:
1.方块的颜色可以设置成随机的，产生方块的时候就附带随机属性this.color
2. 没有开始和结束按钮, 思路比较简单，绑定按钮点击事件即可
3. 不能调节难度,timer = setInterval(move, INTERVAL);可以将Interval和不同难度对应起来
4. 可以增加一些成功消行的炫酷提示; 背景音;每隔一定时间设置多出一行方块，增加难度;以此丰富游戏.