html+css+js适合前端小白的实战全解（超详细）——2048小游戏（二）

其他 2020-07-27 11:12:21 阅读次数: 0

续上一小节，我们可以发现每一个grid-cell上的数字初始时并不在格子里。

这些数字可以随着玩家的操作而移动

​在这里插入图片描述

我们可以想象：初始时每一个格子上的数为0，他们并不显示 ↓
在这里插入图片描述

只有当grid-cell上的数字不为0，才会显示出来，这个数字有自己的颜色属性，和独有的文字

我们把grid-cell上面的数字元素设置成 number-cell ，之前我们定义的var board二维数组，就是存储这些数字元素的值

number cell是board数组里的数据在前端的显示

每次用户在操作时，就是改变board二维数组里的值

这时，我们通过一个 updateBoardView() 函数来通知前端board二维数组里的值发生了改变，前端的显示也要发生改变

在这里插入图片描述
之前在2048main.js定义的var board数组，是一维数组

而表示4×4的棋盘里的小格子，用(i,j)表达每个格子的话需要二维数组

于是我们在init()函数里，用 for 函数双重循环，遍历每个小格子

这样就可以得到一个二维数组，起始化的时候，每个boardp[i][j]的值都为0

初始完后，按照刚才的分析，调用updateBoardView()函数来通知前端，我们需要对number-cell里的元素进行显示上的设定。

for(var i = 0; i < 4; i++){  
    board[i] = new Array();  
        for(var j = 0; j < 4; j++){  
            board[i][j] = 0;  
        }

2.21 定义updateBoard()函数

updateBoard()是根据board二维数组里的值，对前端number-cell元素进行操作。
我们之前在2048.html没有定义number-cell
现在我们在main2048.js里把number-cell添加进去
用户每一次操作board的值，都要调用一次updateBoardView()

function init() { 
    for(var i = 0; i < 4; i++)
        for(var j = 0; j < 4; j++)
        {
            var gridCell = $("#grid-cell-"+i+"-"+j);
            gridCell.css('top', getPosTop(i,j));
            gridCell.css('left', getPosLeft(i,j));
        }

    for(var i = 0; i < 4; i++){
        board[i] = new Array();
            for(var j = 0; j < 4; j++){
                board[i][j] = 0;
            }     
   }

   updateBoardView();
}

如果当前游戏里有了number-cell元素，首先先把这些元素删除
再根据当前board的值，增加新的number-cell

先进行一次双重循环，遍历每个board元素。

每一个board元素都要生成一个number-cell。

为了操作方便，定义一个theNumberCell来操作当前i,j坐标下的number-cell的值

function updateBoardView() { 
    $(".number-cell").remove();
    for(var i = 0; i < 4; i++)
        for(var j = 0; j < 4; j++){
            $("#grid-container").append("<div class='number-cell' id='number-cell-"+i+"-"+j+"'></div>");
            var theNumberCell = $('#number-cell-'+i+'-'+j);
        }
 }

接下来对number-cell进行样式设计
一个格子是高宽100px，所以

line-hight=100px

number-cell和grid-cell一样，都是需要动态调整位置，需要设置position：absolute;

.number-cell{
    border-radius: 6px;
    
    font-weight: bold;
    font-size: 60px;
    line-height: 100px;
    text-align: center;
    
    position: absolute;
}

回到main2048.js
我们需要思考： 遍历到每个board[i][j]的值的时候，怎么具体设置number-cell？

根据之前的分析我们可以知道，根据board的值的不同，相应的number-cell的值也不同。

当board[i][j]=0时，number-cell不显示，则设置其宽高=0

为了后期动画效果：如果刚开始number-cell是0，当grid-cell上有数字时，是从中间扩散到整个格子
于是我们把number-cell=0的值放在每个格子中间

theNumberCell.css(‘top’,gerPosTop(i,j)+50);
theNumberCell.css(‘left’,gerPosLeft(i,j)+50);

如果board[i][j]不是0，就完全覆盖grid-cell。

根据board数字不同，背景色也不同。设置一个函数getNumberBackgroundColor(board[i][j])，根据board的值返回相应的背景色的值。

前景色（number-cell）的颜色也是同样如此，设置一个**getNumberColor(board[i][j])**函数。

最后，再显示出number-cell的值

function updateBoardView() { 
    $(".number-cell").remove();
    for(var i = 0; i < 4; i++)
        for(var j = 0; j < 4; j++){
            $("#grid-container").append("<div class='number-cell' id='number-cell-"+i+"-"+j+"'></div>");
            var theNumberCell = $('#number-cell-'+i+'-'+j);

            if(board[i][j] = 0){
                theNumberCell.css('width','0px');
                theNumberCell.css('height','0px'); 
                theNumberCell.css('top',gerPosTop(i,j)+50);
                theNumberCell.css('left',gerPosLeft(i,j)+50);

            }
            else{
                theNumberCell.css('width','100px');
                theNumberCell.css('height','100px');
                theNumberCell.css('top',gerPosTop(i,j));
                theNumberCell.css('top',gerPosTop(i,j));
                theNumberCell.css('background-color',getNumberBackgroundColor(board[i][j]));
                theNumberCell.css('color',getNumberColor(board[i][j]));
                theNumberCell.text(board[i][j]);
            }
        }   
 }

2.22 定义getNumberBackgroundColor函数

我们现在将getNumberBackgroundColor函数和getNumberColor函数写在【support2048.js】 里

return “#000”：是为那些数字大于8192（应该不会有这么牛逼的人吧）的人设置的，超过8192背景色就是黑色

当然啦你也可以根据自己的喜好改变这些颜色

function getNumberBackgroundColor(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 28192:return "#93c"; break; 
    }
    return "#000";
}

function getNumberColor(number) { 
    if(number <= 4)
        return "#776e65";

    return "#fff";
 }

打开浏览器，我们发现没什么变化，但是只用firefox浏览器，打开F12控制台
就会发现在grid-cell下面，出现了隐藏的number-cell，刚好16个
这些number-cell的width和height都是0，因为初始化的时候都是0。
在这里插入图片描述

好了，今天这个小节结束了，老样子，放上我们目前完整的代码

2048.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2048</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="main2048.js"></script>
    <script type="text/javascript" src="showanimation2048.js"></script>
    <script type="text/javascript" src="support2048.js"></script>
    <link rel="stylesheet" type="text/css" href="2048.css">
</head>
<body>
    <header>
        <h1>2048</h1>
        <a href="javascript:newgame();" id="newgamebutton">New Game</a>
        <p>score：<span id="score">0</span></p>
    </header>

    <div id="grid-container">
        <div class="grid-cell" id="grid-cell-0-0"></div>
        <div class="grid-cell" id="grid-cell-0-1"></div>
        <div class="grid-cell" id="grid-cell-0-2"></div>
        <div class="grid-cell" id="grid-cell-0-3"></div>

        <div class="grid-cell" id="grid-cell-1-0"></div>
        <div class="grid-cell" id="grid-cell-1-1"></div>
        <div class="grid-cell" id="grid-cell-1-2"></div>
        <div class="grid-cell" id="grid-cell-1-3"></div>

        <div class="grid-cell" id="grid-cell-2-0"></div>
        <div class="grid-cell" id="grid-cell-2-1"></div>
        <div class="grid-cell" id="grid-cell-2-2"></div>
        <div class="grid-cell" id="grid-cell-2-3"></div>

        <div class="grid-cell" id="grid-cell-3-0"></div>
        <div class="grid-cell" id="grid-cell-3-1"></div>
        <div class="grid-cell" id="grid-cell-3-2"></div>
        <div class="grid-cell" id="grid-cell-3-3"></div>
    </div>
</body>
</html>

2048.css

body{
    font-family: Arial;
}

header{
    display: block;
    margin: 0 auto;
    width: 500px;
    text-align: center;
}

header h1{
    font-size: 60px;
    font-weight: bold;
}

header #newgamebutton{
    display: block;
    margin: 20px auto;

    width: 100px;
    padding: 10px 10px;
    background-color: #8f7a66;
    color: #fff;

    border-radius: 10px;
    text-decoration: none;
}

header #newgamebutton:hover{
    background-color: #9f8b77;
}

header p{
    font-size: 25px;
    margin: 20px auto;
}


#grid-container{
    width: 460px;
    height: 460px;
    padding: 20px;

    margin: 50px auto;
    background-color: #bbada0;

    border-radius: 10px;
    position: relative;
    left: 0;
    top:0;
}

.grid-cell{
    width: 100px;
    height: 100px;
    border-radius: 6px;
    background: #ccc0b3;

    position: absolute;
}


.number-cell{
    border-radius: 6px;
    
    font-weight: bold;
    font-size: 60px;
    line-height: 100px;
    text-align: center;
    
    position: absolute;
}

main2048.js

var board = new Array();
var score = 0;

$(document).ready(function() { 
    newgame();
 });

function newgame() { 

    // 1.初始化棋盘
    init();

    // 2.随机两个格子生成数字

  }

function init() { 
    for(var i = 0; i < 4; i++)
        for(var j = 0; j < 4; j++)
        {
            var gridCell = $("#grid-cell-"+i+"-"+j);
            gridCell.css('top', getPosTop(i,j));
            gridCell.css('left', getPosLeft(i,j));
        }

    for(var i = 0; i < 4; i++){
        board[i] = new Array();
            for(var j = 0; j < 4; j++){
                board[i][j] = 0;
            }     
   }

   updateBoardView();
}

function updateBoardView() { 
    $(".number-cell").remove();
    for(var i = 0; i < 4; i++)
        for(var j = 0; j < 4; j++){
            $("#grid-container").append("<div class='number-cell' id='number-cell-"+i+"-"+j+"'></div>");
            var theNumberCell = $('#number-cell-'+i+'-'+j);

            if(board[i][j] == 0){
                theNumberCell.css('width','0px');
                theNumberCell.css('height','0px'); 
                theNumberCell.css('top',getPosTop(i,j)+50);
                theNumberCell.css('left',getPosLeft(i,j)+50);

            }
            else{
                theNumberCell.css('width','100px');
                theNumberCell.css('height','100px');
                theNumberCell.css('top',getPosTop(i,j));
                theNumberCell.css('top',getPosTop(i,j));
                theNumberCell.css('background-color',getNumberBackgroundColor(board[i][j]));
                theNumberCell.css('color',getNumberColor(board[i][j]));
                theNumberCell.text(board[i][j]);
            }
        }   
 }

support2048.js

function getPosTop(i,j){
    return 20 + i*120;
}
function getPosLeft(i,j){
    return 20 + j*120;
}

function getNumberBackgroundColor(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 28192:return "#93c"; break; 
    }
    return "black";
}

function getNumberColor(number) { 
    if(number <= 4)
        return "#776e65";

    return "white";
 }

猜你喜欢

转载自blog.csdn.net/weixin_41306215/article/details/107602655
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022