2048⽹页版html项⽬报告,jQuery编写⽹页版2048⼩游戏
⼤致介绍
看了⼀个实现⽹页版2048⼩游戏的视频，觉得能做出⾃⼰以前喜欢玩的⼩游戏很有意思便⾃⼰动⼿试了试，真正的验证了这句话-不要以为你以为的就是你以为的，看视频时觉得看懂了，会写了，但是⾃⼰实现起来会遇到各种问题。⽐如，在最后判断游戏是否结束的时候，我写的语句语法是对的，但就是不执⾏。最后通过对视频源码的分析对⽐，发现原作者写的⼀个setTimeout定时器有额外的意思，本来我以为它就是简单的⼀个延时动画，其实他是在等待另外⼀个函数执⾏完毕。-_-||。最后还是很⾼兴能写出来，也改进了⼀些源代码的不⾜。
这篇博客并不是详细的讲解，只是⼤致介绍函数的作⽤，其中实现的细节注释中有解释，⽹上的这个源码有点乱，如果想看⽐较整齐的源码或者视频的可以QQ联系我(免费)(共同学习的伙伴)
思路
这个⼩游戏可以抽象化分为3层(我觉得这样能更好理解)
◆最底下的⼀层是基本的样式(可见的)
◆中间的层是最主要的，是⼀个4x4的⼆维数组，游戏中我们都是对这个⼆维数组进⾏操作(不可见的)
◆最上⾯的⼀层也是⼀个4x4的⼆维数组，它只是根据第⼆层数组的每个数显⽰样式(可见的)
我们通过最底下的⼀层显⽰最基本的16个⼩⽅格，通过键盘的按键或者⼿指在屏幕的滑动来操作中间层的数组，最后在通过最上⾯的⼀层显⽰出数字
基本结构与样式
基本的结构和样式都挺简单，直接看代码
结构：
2048
开始新的游戏
分数：0
样式：
*{
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;
}
从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)});
}
}
}
// 获取位置
function getPos(num){
return 20 + num*120;
}
这样我们的第⼀层就好了
效果：
现在构造第⼆层，即构建⼀个4x4的值全部为0的数组，由于在构造第⼆层时，有两层循环，所以我们可以在构造第⼀层时也能构造第⼆层
第三层是⽤js⽣成16个格⼦，它和第⼀层的16个格⼦⼀⼀对应
代码：
// 数字格
function numFormat(){
for(var i=0;i<4;i++){
for(var j=0;j<4;j++){
$('#container').append('
// 设置数字格的位置，样式
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])
});
<(checkerboard[i][j]);
}
}
}
}
// 获取相应数字的背景颜⾊
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;
}
}
/
/ 设置相应数字的⽂字颜⾊
function getColor(number){
if (number <= 4) {
return "#776e65"
}
return "white";
}
初始化
在每次游戏重新开始时，都会在随机的位置出现两个随机的数字，我们写⼀个在随机位置出现⼀个随机数的函数，只要调⽤两次就可以实现了
代码：
// 随机的在⼀个位置上产⽣⼀个数字
function randomNum(){
// 随机产⽣⼀个坐标值
var randomX = Math.floor(Math.random() * 4);
var randomY = Math.floor(Math.random() * 4);
// 随机产⽣⼀个数字(2或4)
js 二维数组var randomValue = Math.random() > 0.5 ? 2 : 4;
// 在数字格不为0的地⽅⽣成⼀个随机数字
while(true){
if(checkerboard[randomX][randomY] == 0){
break;
}else{

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。