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

(编辑：jimmy 日期: 2025/10/27 浏览：3 次 )

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

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

完成后的效果如下：

HTML代码：

<body> 
 <div class="wrap"> 
 <div class="play_wrap"> 
 <div id="play_area"></div> 
 <div class="play_menu"> 
 <p>下一个：</p> 
 <div id="play_nextType"></div> 
 <a id="play_btn_start" class="play_btn" href="javascript:void(0);" 
 unselectable="on">开始</a><a id="play_btn_level" class="play_btn" href="javascript:void(0)" unselectable="on"><span class="level_text">中等</span class="level_icon"></span></a> 
 <div class="level_menu" id="play_menu_level"> 
 <ul> 
 <li><a href="javascript:void(0)" level=0>简单</a></li> 
 <li><a href="javascript:void(0)" level=1>中等</a></li> 
 <li><a href="javascript:void(0)" level=2>困难</a></li> 
 </ul> 
 </div> 
 <p> 
 分数：<span id="play_score">0</span> 
 </p> 
 <p> 
 方向：<span id="play_direction">bottom</span> 
 </p> 
 <p> 
 说明：<br> -“下”、“左”、“右”键控制方向，“上”为变形；<br> -游戏开始前、暂停时可调整难度；<br> 
 -难度分“简单”、“中等”、“困难”三级；<br> -对应的分值为10、20、40；<br> 
 -多行同时消去的倍数为1、4、10、20； 
 </p> 
 </div> 
 </div> 
 </div> 
 </body>

CSS代码：

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

HTML的代码其实就是一个游戏结构的框架，这里框架其实就是几个div的东西，所以不会太长，理解起来也是挺容易的。而CSS则是控制网页的布局与美观，所以要想吸引玩家，那CSS方面必须下功夫，而这里的CSS只是其实就将游戏区域与菜单区域分为左右两边了。而游戏域内的一个个框其实就是多个div，整齐排列在一起而已。

下面到了js了：

因为在代码已经将一些重要的部分做了注释，所以就不打算逐步分去分析了。说一下整体的写法吧。其实它首先是直接定义了一些图形的坐标，然后根据这些坐标画出一个下一个的图形出来，之后就是利用一个setInterval函数在游戏区域标出每个点，如果不能下落了就直接清除掉时间函数，之后在调用一个创建时间函数的函数出来，在画一个图形出来。具体的细节就看代码吧。

源码下载：http://xiazai.jb51.net/201610/yuanma/js-html5els(jb51.net).rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：基于JavaScript实现前端文件的断点续传
下一篇：Node.js包管理器Yarn的入门介绍与安装