富贵资源网 Design By www.hznty.com
这个游戏主要分为三部份，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函数在游戏区域标出每个点，如果不能下落了就直接清除掉时间函数，之后在调用一个创建时间函数的函数出来，在画一个图形出来。具体的细节就看代码吧。
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.6.2.min.js">源码下载：http://xiazai.jb51.net/201610/yuanma/js-html5els(jb51.net).rar
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...