JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了js html5 css俄罗斯方块游戏再现大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

这个游戏主要分为三部份,HTML5+CSS+JAVASCRIPT来完成的。在这里详细讲一下js的代码。因为这个游戏的主要部分其实就是js。

大多数都是靠js来完成的。

js html5 css俄罗斯方块游戏再现

完成后的效果如下:

HTML代码:

下一个:

分数:

方向:

说明:
-“下”、“左”、“右”键控制方向,“上”为变形;
-游戏开始前、暂停时可调整难度;
-难度分“简单”、“中等”、“困难”三级;
-对应的分值为10、20、40;
-多行同时消去的倍数为1、4、10、20;

CSS代码:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,button,textarea,p,blockquote,th,td { padding: 0; margin: 0; }

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;
}

play_area{

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;
}

play_area .play_cell{

float:left;
width:19px;
height:19px;
border:1px solid #eee;
margin:-1px 0 0 -1px;
}

play_area .play_cell.active{

BACkground:#999;
border:1px solid #ccc;
}

play_area .play_cell.goal{

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,请注明来意。