大佬教程收集整理的这篇文章主要介绍了js html5 css俄罗斯方块游戏再现,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这个游戏主要分为三部份,HTML5+CSS+JAVASCRIPT来完成的。在这里详细讲一下js的代码。因为这个游戏的主要部分其实就是js。
大多数都是靠js来完成的。
完成后的效果如下:
HTML代码:
CSS代码:
body {
font-family: "Helvetica Neue","Hiragino Sans GB","Segoe UI","Microsoft Yahei","微软雅黑",Tahoma,Arial,STHeiti,sans-serif;
font-size: 12px;
BACkground: #fff;
color: #333;
}
a{
outline:none;
-moz-outline:none;
text-decoration: none;
}
.wrap{
width:1000px;
margin:80px auto;
}
.play_wrap{
padding-left:260px;
}
float:left;
width:300px;
height:480px;
margin:auto;
BACkground-color:#fefefe;
border-radius:2px;
color:black;
box-shadow:0px 0px 8px #e5e5e5;
padding:1px 0 0 1px;
}
float:left;
width:19px;
height:19px;
border:1px solid #eee;
margin:-1px 0 0 -1px;
}
BACkground:#999;
border:1px solid #ccc;
}
BACkground:#0c0;
}
.play_menu{
float:left;
margin-left:60px;
font-size:14px;
padding-top:20px;
}
.play_menu #play_nextType{
width:60px;
height:60px;
padding:1px 0 0 1px;
margin:10px 0 20px 0;
}
.play_menu .play_mini_cell{
float:left;
width:14px;
height:14px;
border:1px solid #fff;
margin:-1px 0 0 -1px;
}
.play_menu .play_mini_cell.active{
BACkground:#999;
border:1px solid #ccc;
}
.play_menu p {
line-height:200%;
clear:both;
}
.play_menu a.play_btn{
display:block;
margin-bottom:20px;
width:80px;
height:28px;
line-height:28px;
text-align:center;
text-decoration: none;
color:#333;
BACkground:#fefefe;
border:1px solid #eee;
border-radius: 2px;
box-shadow: 1px 1px 2px #eee;
border-color:#ddd #d2d2d2 #d2d2d2 #ddd;
outline: none;
-moz-outline:none;
}
.play_menu a.play_btn:hover{
BACkground-color:#fcfcfc;
border-color:#ccc;
box-shadow: inset 0 -2px 6px #eee;
}
.play_menu a#play_btn_level{
position:relative;
margin-bottom:30px;
}
.level_text{
margin-left:-10px;
}
.level_icon{
display: block;
position:absolute;
top:12px;
right:16px;
width:0;
height:0;
overflow: hidden;
border:5px solid #FFF;
border-color: #999 transparent transparent transparent;
}
.level_menu{
position:absolute;
margin:-30px 0 0 1px;
display:none;
}
.level_menu ul{
list-style:none;
}
.level_menu li{
float:left;
}
.level_menu li a{
display:block;
padding:3px 10px;
border:1px solid #e8e8e8;
margin-left:-1px;
color:#09c;
}
.level_menu li a:hover{
BACkground:#09c;
color:#fefefe;
}
HTML的代码其实就是一个游戏结构的框架,这里框架其实就是几个div的东西,所以不会太长,理解起来也是挺容易的。而CSS则是控制网页的布局与美观,所以要想吸引玩家,那CSS方面必须下功夫,而这里的CSS只是其实就将游戏区域与菜单区域分为左右两边了。而游戏域内的一个个框其实就是多个div,整齐排列在一起而已。
下面到了js了:
因为在代码已经将一些重要的部分做了注释,所以就不打算逐步分去分析了。说一下整体的写法吧。其实它首先是直接定义了一些图形的坐标,然后根据这些坐标画出一个下一个的图形出来,之后就是利用一个seTinterval函数在游戏区域标出每个点,如果不能下落了就直接清除掉时间函数,之后在调用一个创建时间函数的函数出来,在画一个图形出来。具体的细节就看代码吧。
源码下载:http://xiazai.jb51.cc/201610/yuanma/js-html5els(jb51.cC).rar">http://xiazai.jb51.cc/201610/yuanma/js-html5els(jb51.cC).rar
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持菜鸟教程。
以上是大佬教程为你收集整理的js html5 css俄罗斯方块游戏再现全部内容,希望文章能够帮你解决js html5 css俄罗斯方块游戏再现所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。