老板丶鱼丸粗面通过本文主要向大家介绍了jquery小游戏,jquery html5小游戏,jquery小游戏源码,网页小游戏,西游记网页小游戏等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
大致介绍
看了一个实现网页版2048小游戏的视频，觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试，真正的验证了这句话-不要以为你以为的就是你以为的，看视频时觉得看懂了，会写了，但是自己实现起来会遇到各种问题。比如，在最后判断游戏是否结束的时候，我写的语句语法是对的，但就是不执行。最后通过对视频源码的分析对比，发现原作者写的一个setTimeout定时器有额外的意思，本来我以为它就是简单的一个延时动画，其实他是在等待另外一个函数执行完毕。-_-||。最后还是很高兴能写出来，也改进了一些源代码的不足。
这篇博客并不是详细的讲解，只是大致介绍函数的作用，其中实现的细节注释中有解释，网上的这个源码有点乱，如果想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴)
思路
这个小游戏可以抽象化分为3层（我觉得这样能更好理解）
◆最底下的一层是基本的样式（可见的）
◆中间的层是最主要的，是一个4x4的二维数组，游戏中我们都是对这个二维数组进行操作（不可见的）
◆最上面的一层也是一个4x4的二维数组，它只是根据第二层数组的每个数显示样式（可见的）
我们通过最底下的一层显示最基本的16个小方格，通过键盘的按键或者手指在屏幕的滑动来操作中间层的数组，最后在通过最上面的一层显示出数字
基本结构与样式
基本的结构和样式都挺简单，直接看代码
结构：
<div id="test2048"> <div id="header"> <h1>2048</h1> <a href="javascript:newgame()" >开始新的游戏</a> <p>分数：<span id="score">0</span></p> </div> <div id="container"> <div class="cell" id="cell-0-0"></div> <div class="cell" id="cell-0-1"></div> <div class="cell" id="cell-0-2"></div> <div class="cell" id="cell-0-3"></div> <div class="cell" id="cell-1-0"></div> <div class="cell" id="cell-1-1"></div> <div class="cell" id="cell-1-2"></div> <div class="cell" id="cell-1-3"></div> <div class="cell" id="cell-2-0"></div> <div class="cell" id="cell-2-1"></div> <div class="cell" id="cell-2-2"></div> <div class="cell" id="cell-2-3"></div> <div class="cell" id="cell-3-0"></div> <div class="cell" id="cell-3-1"></div> <div class="cell" id="cell-3-2"></div> <div class="cell" id="cell-3-3"></div> </div> </div></div>
样式：
*{
margin: 0;
padding: 0;
}
#test2048{
font-family: Arial;
margin: 0 auto;
text-align: center;
}
#header{
margin: 20px;
}
#header a{
font-family: Arial;
text-decoration: none;
display: block;
color: white;
margin: 20px auto;
width: 125px;
height: 35px;
text-align: center;
line-height: 40px;
background-color: #8f7a66;
border-radius: 10px;
font-size: 15px;
}
#header p{
font-family: Arial;
font-size: 20px;
}
#container{
width: 460px;
height: 460px;
background-color: #bbada0;
margin: 0 auto;
border-radius: 10px;
position: relative;
padding: 20px;
}
.cell{
width: 100px;
height: 100px;
border-radius: 6px;
background-color: #ccc0b3;
position: absolute;
}
</div>
从CSS样式可以看出，我们并没有对每个格子的位置进行设置，因为如果用CSS给每个格子设置样式代码量太大，而且他们的位置有一定的规律，所以我们可以用js循环来完成每个格子样式的设置
代码：
// 初始化棋盘格
function initialize(){
for(var i=0;i<4;i++){
for(var j=0;j<4;j++){
// 设置棋盘格的位置
var everyCell = $('#cell-'+ i +'-'+ j);
everyCell.css({top:getPos(i),left:getPos(j)});
}
}
}
</div>
// 获取位置
function getPos(num){
return 20 + num*120;
}
</div>
这样我们的第一层就好了
效果：
现在构造第二层，即构建一个4x4的值全部为0的数组，由于在构造第二层时，有两层循环，所以我们可以在构造第一层时也能构造第二层
第三层是用js生成16个格子，它和第一层的16个格子一一对应
代码：
// 数字格
function numFormat(){
for(var i=0;i<4;i++){
for(var j=0;j<4;j++){
$('#container').append('<div class="number" id="number-'+ i +'-'+ j +'"></div>')
// 设置数字格的位置，样式
var everyNumber = $('#number-'+ i +'-'+ j);
if(checkerboard[i][j] == 0){
everyNumber.css({
width:'0px',
height:'opx',
top:getPos(i) + 50,
left:getPos(j) + 50
})
}else{
everyNumber.css({
width:'100px',
height:'100px',
top:getPos(i),
left:getPos(j),
backgroundColor:getBackgroundColor(checkerboard[i][j]),
color:getColor(checkerboard[i][j])
});
everyNumber.text(checkerboard[i][j]);
}
}
}
}
</div>
// 获取相应数字的背景颜色
function getBackgroundColor(number){
switch (number) {
case 2:return "#eee4da";break;
case 4:return "#ede0c8";break;
case 8:return "#f2b179";break;
case 16:return "#f59563";break;
case 32:return "#f67c5f";break;
case 64:return "#f65e3b";break;
case 128:return "#edcf72";break;
case 256:return "#edcc61";break;
case 512:return "#9c0";break;
case 1024:return "#33b5e5";break;
case 2048:return "#09c";break;
case 4096:return "#a6c";break;
case 8192:return "#93c";break;
}
}
</div>
// 设置相应数字的文字颜色
function getColor(number){
if (number <= 4) {
return "#776e65"
}
return "white";
}
</div>
初始化
在每次游戏重新开始时，都会在随机的位置出现两个随机的数字，我们写一个在随机位置出现一个随机数的函数，只要调用两次就可以实现了
代码：
// 随机的在一个位置上产生一个数字
function randomNum(){
// 随机产生一个坐标值
var randomX = Math.floor(Math.random() * 4);
var randomY = Math.floor(Math.random() * 4);
// 随机产生一个数字（2或4）
var randomValue = Math.random() > 0.5 ? 2 : 4;
// 在数字格不为0的地方生成一个随机数字
while(true){
if(checkerboard[randomX][randomY] == 0){
break;
}else{
var randomX = Math.floor(Math.random() * 4);
var randomY = Math.floor(Math.random() * 4);
}
}
// 将随机产生的数字显示在随机的位置上
checkerboard[randomX][randomY] = randomValue;
// 动画
randomNumAnimate(randomX,randomY,randomValue);
}
</div>
// 随机产生数字的动画
function randomNumAnimate(randomX,randomY,randomValue){
var randomnum = $('#number-'+ randomX +'-'+ randomY);
randomnum.css({
backgroundColor:getBackgroundColor(randomValue),
color:getColor(randomValue),
})
.text(randomValue)
.animate({
width:'100px',
height:'100px',
top:getPos(randomX),
left:getPos(randomY)
},50);
}
</div>
基本操作
我们通过switch循环，来根据用户不同的输入进行不同的操作
代码：
// 获取键盘事件，检测不同的按键进行不同的操作
$(document).keydown(function(event){
switch(event.keyCode){
case 37://左
if(canMoveLeft(checkerboard)){
// 如果可以向左移动
MoveLeft();
// 向左移动
setTimeout(function(){
randomNum();
},200);
// 随机产生一个数字
}
break;
case 38://上
if(canMoveUp(checkerboard)){
//