weixin_34001430
weixin_34001430

记一次2048小游戏开发

一、前言

今年过完年来到学校步入了大三下学期，一番挣扎之后狠心放弃了学了一年多的Java，决定开始转战喜欢的前端。然后每天泡在实验室里学习前端的基础，一切从零开始，这期间刚好是各大互联网公司春招的时候就顺便往几个大厂投了的简历，申请暑期实习。2048小游戏是360奇舞学院的前端星的压轴选拔题目。刚看到这个题目时一脸懵，因为我之前没玩过2048小游戏不知道这是个什么东西【允悲】，接下来就跟大家一起分享一下我用了5天的课余时间从不知道这是个什么游戏到最后把它写出来的过程吧。[这是一道30分的题目 我得了23分 大佬评语是动画做的差了点]

二、题目描述

用JavaScript实现一个2048小游戏

记一次2048小游戏开发_第1张图片

题目要求：

  • 实现web的2048游戏，使用JavaScript或TypeScript完成
  • 基本规则、计算分数和判断终局准确无误
  • 移动数字时有基本的动画效果

加分项

  • 适配移动端
  • 其他额外的效果或可玩性改进
  • 代码实现优雅，注释完整

三、游戏设计思路

先一起来看一下项目文件结构（此项目我没用任何框架和jQuery库）

记一次2048小游戏开发_第2张图片

页面布局样式，先把页面基本元素展示出来（HTML+CSS完整代码）。
  • HTML



    
    
    2048小游戏
    


    

        
2048小游戏

        重新开始
    

    

        

        
得分： 分

    

    

        
电脑：请用键盘方向键操作游戏

        
手机：请滑动手机屏幕操作游戏

这里我做了手机端适配，这段代码可以让页面在手机端等比放大。

  • CSS
body {
    background-color: #ced9c5;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    font-family: "Microsoft YaHei";
}
/*header部分样式*/
header{
    display: block;
    margin: 0px auto;
    text-align: center;
}
header h1{
    font-size: 1.5em;
}
header #newgame_btn{
    width: 100px;
    padding:10px;
    background: #7da962;
    font-family:inherit;
    font-size: 20px;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
}
/*table样式*/
table {
    margin: 0px auto;
    margin-top: 30px;
    border-radius: 10px;
    background-color: #bfc0bb;
    border-spacing: 8px;
}
td {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

/*footer部分样式*/
main .number_title {
    font-size: 0.8em;
}
main #show_number{
    color: #f8563d;
    font-size: 1.3em;
}
.inner {
    height: 50px;
    line-height: 1.8;
    text-align: center;
    padding: 15px;
    font-size: .7em;
    color: #656565;
}
footer .operation_pc{
    border-top: 1px solid #bfc0bb;
}
footer .operation_phone{
    border-bottom: 1px solid #bfc0bb;
}
棋盘棋子初始化与产生新的棋子、计分和对产生的新棋子涂色
  1. 通过了解游戏规则，游戏中有16个格子，游戏刚开始时需要随机在两个格子里出现两个数，接下来每次移动后要产生一个随机数，随机数只能是随机的2或4。所以这里我们就要做一个生成随机数的函数。
  2. 通过调用这个函数并传入最大和最小数值的参数，然后函数会返回一个介于这两个数之间（包括这两个数）的一个随机整数。
function GetRandom(Min,Max){
    return Min + Math.round((Max-Min) * Math.random());
}
  1. 调用产生随机数的函数，在1~16的空格子里产生随机的2或4。
  2. 要注意的是，在产生随机的2或4时要先判断要放入随机数的格子是否是空的，如果随机找的格子不为空则不产生随机的2或4，要再次调用自身直到找到空的格子为止。
/*给随机的格子放入随机的2或4*/
function RandomNum(){
    // 产生一个1~16的随机数来获取一个格子的ID
    let num = GetRandom(1,16);
    // 空格子数量计数器
    let count = 0;
    // 判断产生随机格子内是否有数字
    if(document.getElementById(num).innerHTML == ""){
        // 产生2或4随机数并放入随机产生的空格子中
        document.getElementById(num).innerHTML = GetRandom(1,2) * 2;
    }
    // 如果格子有数字遍历棋盘是否放慢了棋子
    else{
        // 遍历棋盘是否有空格子，如果有计数器就累加1
        for(let i = 1; i <= 16; i++){
            let piece_  = document.getElementById(i);
            if( piece_.innerHTML== ""){
                count++;
            }
        }
        // 判断棋盘是否有空格，如果有就再次执行随机产生棋子的函数
        if(count > 0){
            RandomNum();
        }
    }
}
  1. 接下来创建一个每次棋子移动后产生结果的函数，这里创建一个控制不同数字背景颜色的对象
let color_object = {
        "":"#d3d3d3",
        "2":"#fef4f2",
        "4":"#fed9a2",
        "8":"#fc8c5e",
        "16":"#f8692f",
        "32":"#f8563d",
        "64":"#ff3936",
        "128":"#00c3dd",
        "256":"#00a4be",
        "512":"#00abcb",
        "1024":"#00abcb",
        "2048":"#00abcb",
        "4096":"#005d6e"
    };
  1. 产生随机数和结果的函数创建后，进行函数的初始化。
function init(){
    // 获取棋盘table对象
    let checkerBoard = document.getElementById("checkerBoard");
    let text = "";
    let id = 1;
    // 循环产生tr*4+td*4的行和列并给每一个tablecell赋予ID值（用1~16分别代表每个格子的ID值）
    for(let i = 1; i < 5; i++){
        // 拼接
        text += "";
        for(let j = i; j <= i+12; j += 4){
            // 拼接
            text += "";
            // 使td的ID值依次递增
            id++;
        }
        // 拼接
        text += ""
    }
    // 把循环产生的行和列放入table中
    checkerBoard.innerHTML = text;
    // 在棋盘中循环放入两个由RandomNum()产生的随机位置和随机的2或4
    for(let k = 0; k < 2; k++){
        RandomNum();
    }
    Result();
}
  • main.js（完整的main.js代码）

/*新打开窗口时初始化游戏*/
window.onload = init();

/*点击重新开始游戏按钮时初始化游戏*/
function newGame(){
    init();
}

/*生成一个介于两个整数之间的随机整数*/
function GetRandom(Min,Max){
    return Min + Math.round((Max-Min) * Math.random());
}

/*给随机的格子放入随机的2或4*/
function RandomNum(){
    // 产生一个1~16的随机数来获取一个格子的ID
    let num = GetRandom(1,16);
    // 空格子数量计数器
    let count = 0;
    // 判断产生随机格子内是否有数字
    if(document.getElementById(num).innerHTML == ""){
        // 产生2或4随机数并放入随机产生的空格子中
        document.getElementById(num).innerHTML = GetRandom(1,2) * 2;
    }
    // 如果格子有数字遍历棋盘是否放慢了棋子
    else{
        // 遍历棋盘是否有空格子，如果有计数器就累加1
        for(let i = 1; i <= 16; i++){
            let piece_  = document.getElementById(i);
            if( piece_.innerHTML== ""){
                count++;
            }
        }
        // 判断棋盘是否有空格，如果有就再次执行随机产生棋子的函数
        if(count > 0){
            RandomNum();
        }
    }
}

/*初始化游戏数据*/
function init(){
    // 获取棋盘table对象
    let checkerBoard = document.getElementById("checkerBoard");
    let text = "";
    let id = 1;
    // 循环产生tr*4+td*4的行和列并给每一个tablecell赋予ID值（用1~16分别代表每个格子的ID值）
    for(let i = 1; i < 5; i++){
        // 拼接
        text += "";
        for(let j = i; j <= i+12; j += 4){
            // 拼接
            text += "";
            // 使td的ID值依次递增
            id++;
        }
        // 拼接
        text += ""
    }
    // 把循环产生的行和列放入table中
    checkerBoard.innerHTML = text;
    // 在棋盘中循环放入两个由RandomNum()产生的随机位置和随机的2或4
    for(let k = 0; k < 2; k++){
        RandomNum();
    }
    Result();
}

/*给不同数值的棋子涂上不同的颜色，并计算得分*/
function Result(){
    // 给分数初始值为0
    let score = 0;
    // 计数棋子的数量
    let count = 0;
    // 定义一个数值对应颜色的对象
    let color_object = {
        "":"#d3d3d3",
        "2":"#fef4f2",
        "4":"#fed9a2",
        "8":"#fc8c5e",
        "16":"#f8692f",
        "32":"#f8563d",
        "64":"#ff3936",
        "128":"#00c3dd",
        "256":"#00a4be",
        "512":"#00abcb",
        "1024":"#00abcb",
        "2048":"#00abcb",
        "4096":"#005d6e"
    };
    for(let i = 1; i <= 16; i++){
        // 遍历所有棋子，给对应数值的棋子涂上对应的颜色
        let text = document.getElementById(i);
        text.style.backgroundColor = color_object[text.innerHTML];
        // 以棋子数值为8的棋子作为临界给数值大于等于8和小于8的棋子数字分别设置不同的颜色
        if(text.innerHTML >= 8){
            text.style.color = "#fff";
        }else{
            text.style.color = "#6e6f71";
        }
        // 如果格子的数值不为空就把此格子上棋子的数值累加作为当前得分
        if(text.innerHTML != ""){
            score += parseInt(text.innerHTML);
            count++;
        }
    }
    // 如果棋子数量为2时，即游戏刚初始化，此时分数置零
    if(count == 2){
        document.getElementById("show_number").innerHTML = 0;
    }
    // 如果棋子数量不是二则正常累加得分
    else{
        document.getElementById("show_number").innerHTML = score;
    }
}
接下来开始让棋子动起来（pc端用方向键操作，移动端用手指滑动操作）
  1. 创建一个棋子移动的函数，并设两个参数。
function Change(piece_1,piece_2){
    // 判断如果棋子要移动的方向有空格就将其移动
    if(piece_1.innerHTML == "" && piece_2.innerHTML != ""){
        res = true;
        piece_1.innerHTML = piece_2.innerHTML;
        piece_2.innerHTML = "";
    }
    // 判断如果相邻棋子都不为空并且数值相等就将他们合并，同时将一个格子置空
    else if(piece_1.innerHTML != "" && piece_1.innerHTML == piece_2.innerHTML){
        res = true;
        piece_1.innerHTML = parseInt(piece_1.innerHTML) + parseInt(piece_2.innerHTML);
        piece_2.innerHTML = "";
    }
}
  1. 棋子往各个方向移动的函数Top()、Down()、Right()、Left()这里不再一一陈述见下面完整代码。
  2. 建立键盘监听来判断按压对应的方向键执行对应的移动函数，并在每次按压后调用gameOver();判断游戏是否结束。
document.onkeydown = function pc_move(){
    res = false;
    if(event.keyCode == 38) Top();
    else if(event.keyCode == 40) Down();
    else if(event.keyCode == 37) Left();
    else if(event.keyCode == 39) Right();
    // 判断游戏是否结束
    gameOver();
    // 如果棋子移动了得到的res==true，就再次产生新的棋子
    if(res) RandomNum();
    // 调用Result()函数，给棋子涂色并记录当前分数
    Result();
}
  1. 建立滑动屏幕监听事件，通过判断滑动方向来执行对应的移动操作，并在每次滑动屏幕后调用gameOver();判断游戏是否结束。
  2. 值得注意的是在手机上滑动时屏幕默认的动作是页面滑动，所以用下面的一行代码来阻止默认事件的执行。
e.preventDefault();
function touch_move(){
    // 定义滑动的起点和终点X、Y坐标值
    let startX = 0;
    let startY = 0;
    let endX = 0;
    let endY = 0;
    // 获取棋盘对象
    let table = document.getElementById("checkerBoard");
    // 给棋盘绑定'touchstart'事件
    table.addEventListener('touchstart',function(e){
        let touch = event.targetTouches[0];
        // 在手指点击屏幕时阻止屏幕拖动事件
        e.preventDefault();
        //获取手指滑动起点坐标
        startX = touch.pageX;
        startY = touch.pageY;
        
    });
    // 给棋盘绑定'touchmove'事件
    table.addEventListener('touchmove',function(e){
        let touch = event.targetTouches[0];
        // 在手指滑动屏幕时阻止屏幕拖动事件
        e.preventDefault();
        //获取手指滑动屏幕的终点坐标
        endX = touch.pageX;
        endY = touch.pageY;
        
    });
    // 给棋盘绑定'touchend'事件
    table.addEventListener('touchend',function(e){
        // 在手指滑动屏幕结束时阻止屏幕拖动事件
        e.preventDefault();
        //滑动结束，计算出手指分别在X、Y轴上滑动距离
        let distanceX = endX - startX;
        let distanceY = endY - startY;
        res = false;
        // console.log("startX " + startX + "  startY" + startY);
        // console.log("endX" + endX + "  endY" + endY);
        // console.log("distanceX" + distanceX + "  distanceY" + distanceY)
        // console.log("------------------------------------------------------------------------------");
        
        // 如果终点坐标X、Y值都不为零则进入下一步判断滑动方向
        if(endX!=0 && endY!=0){
            //向上滑动
            if(Math.abs(distanceY) > Math.abs(distanceX) && distanceY < -10){
                Top();
            }
            //向下滑动
            else if(Math.abs(distanceY) > Math.abs(distanceX) && distanceY > 10){
                Down();
            }
            //向左滑动
            else if(Math.abs(distanceX) > Math.abs(distanceY) && distanceX < -10){
                Left();
            }
            //向右滑动
            else if(Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 10){
                Right();
            }
            // 判断游戏是否结束
            gameOver();
            // 如果棋子移动了得到的res==true，就再次产生新的棋子
            if(res){
                RandomNum();
            }
            // 将以上绑定事件获取的起始点坐标值置零
            startX = startY = endX = endY = 0;
        }
        // 调用Result()函数，给棋子涂色并记录当前分数
        Result();
    });
}
touch_move();
  • move.js（move.js完整代码）

// 控制棋盘是否产生随机的棋子，当res==true时产生新的棋子
let res = false;
/*移动棋子使相邻并且相同数值的棋子合并，同时将数值相加*/
function Change(piece_1,piece_2){
    // 判断如果棋子要移动的方向有空格就将其移动
    if(piece_1.innerHTML == "" && piece_2.innerHTML != ""){
        res = true;
        piece_1.innerHTML = piece_2.innerHTML;
        piece_2.innerHTML = "";
    }
    // 判断如果相邻棋子都不为空并且数值相等就将他们合并，同时将一个格子置空
    else if(piece_1.innerHTML != "" && piece_1.innerHTML == piece_2.innerHTML){
        res = true;
        piece_1.innerHTML = parseInt(piece_1.innerHTML) + parseInt(piece_2.innerHTML);
        piece_2.innerHTML = "";
    }
}

/*向上移动棋子*/
function Top(){
    for(let i = 1; i < 5; i++){
        for(let j = i; j <= i + 12; j += 4){
            for(let k = j; k > 4; k -= 4){
                let piece_1 = document.getElementById(k - 4);
                let piece_2 = document.getElementById(k);
                Change(piece_1,piece_2);
            }
        }
    }
}

/*向下移动棋子*/
function Down(){
    for(let i = 1; i < 5; i++){
        for(let j = i + 12; j >= i; j -= 4){
            for(let k = j; k < 13; k += 4){
                let piece_1 = document.getElementById(k + 4);
                let piece_2 = document.getElementById(k);
                Change(piece_1,piece_2);
            }
        }
    }
}

/*向左移动棋子*/
function Left(){
    for(let i = 1; i <= 13; i += 4){
        for(let j = i; j <= i + 3; j += 1){
            for(let k = j; k > i; k -= 1){
                let piece_1 = document.getElementById(k - 1);
                let piece_2 = document.getElementById(k);
                Change(piece_1,piece_2);
            }
        }
    }
}

/*向右移动棋子*/
function Right(){
    for(let i = 1; i <= 13; i += 4){
        for(let j = i + 4; j >= i; j -= 1){
            for(let k = j; k < i + 3; k += 1){
                let piece_1 = document.getElementById(k + 1);
                let piece_2 = document.getElementById(k);
                Change(piece_1,piece_2);
            }
        }
    }
}

/*按压键盘方向键使棋子移动*/
document.onkeydown = function pc_move(){
    res = false;
    if(event.keyCode == 38) Top();
    else if(event.keyCode == 40) Down();
    else if(event.keyCode == 37) Left();
    else if(event.keyCode == 39) Right();
    // 判断游戏是否结束
    gameOver();
    // 如果棋子移动了得到的res==true，就再次产生新的棋子
    if(res) RandomNum();
    // 调用Result()函数，给棋子涂色并记录当前分数
    Result();
}

/*滑动手机屏幕使棋子移动*/
function touch_move(){
    // 定义滑动的起点和终点X、Y坐标值
    let startX = 0;
    let startY = 0;
    let endX = 0;
    let endY = 0;
    // 获取棋盘对象
    let table = document.getElementById("checkerBoard");
    // 给棋盘绑定'touchstart'事件
    table.addEventListener('touchstart',function(e){
        let touch = event.targetTouches[0];
        // 在手指点击屏幕时阻止屏幕拖动事件
        e.preventDefault();
        //获取手指滑动起点坐标
        startX = touch.pageX;
        startY = touch.pageY;
        
    });
    // 给棋盘绑定'touchmove'事件
    table.addEventListener('touchmove',function(e){
        let touch = event.targetTouches[0];
        // 在手指滑动屏幕时阻止屏幕拖动事件
        e.preventDefault();
        //获取手指滑动屏幕的终点坐标
        endX = touch.pageX;
        endY = touch.pageY;
        
    });
    // 给棋盘绑定'touchend'事件
    table.addEventListener('touchend',function(e){
        // 在手指滑动屏幕结束时阻止屏幕拖动事件
        e.preventDefault();
        //滑动结束，计算出手指分别在X、Y轴上滑动距离
        let distanceX = endX - startX;
        let distanceY = endY - startY;
        res = false;
        // console.log("startX " + startX + "  startY" + startY);
        // console.log("endX" + endX + "  endY" + endY);
        // console.log("distanceX" + distanceX + "  distanceY" + distanceY)
        // console.log("------------------------------------------------------------------------------");
        
        // 如果终点坐标X、Y值都不为零则进入下一步判断滑动方向
        if(endX!=0 && endY!=0){
            //向上滑动
            if(Math.abs(distanceY) > Math.abs(distanceX) && distanceY < -10){
                Top();
            }
            //向下滑动
            else if(Math.abs(distanceY) > Math.abs(distanceX) && distanceY > 10){
                Down();
            }
            //向左滑动
            else if(Math.abs(distanceX) > Math.abs(distanceY) && distanceX < -10){
                Left();
            }
            //向右滑动
            else if(Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 10){
                Right();
            }
            // 判断游戏是否结束
            gameOver();
            // 如果棋子移动了得到的res==true，就再次产生新的棋子
            if(res){
                RandomNum();
            }
            // 将以上绑定事件获取的起始点坐标值置零
            startX = startY = endX = endY = 0;
        }
        // 调用Result()函数，给棋子涂色并记录当前分数
        Result();
    });
}
touch_move();
进行游戏结束判断（遍历棋盘当棋盘放满棋子，并且每个棋子上下左右相邻位置都不相同则游戏结束）
  • gameOver.js（gameOver.js完整代码）

/*游戏结束判断*/
function gameOver(){
    // 设置一个空格子计数器
    let count = 0;
    // 遍历棋盘是否有空格子，如果有计数器就累加1
    for(let i = 1; i <= 16; i++){
        let piece_  = document.getElementById(i);
        if( piece_.innerHTML== ""){
            count++;
        }
    }
    // 判断棋盘是否摆满棋子
    if(count == 0){
        // 当棋盘摆满棋子时，遍历所有棋子看其与相邻的棋子数值是否相等，一旦有相等的计数器就累加1
        for(let i = 1; i <= 16; i++){
            let piece_self = document.getElementById(i);
            let piece_add_1 = document.getElementById(i + 1);
            let piece_cut_1 = document.getElementById(i - 1);
            let piece_add_4 = document.getElementById(i + 4);
            let piece_cut_4 = document.getElementById(i - 4);
            switch (i){
                case 1:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML)){
                        count++;
                    }
                    break;
                case 2:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML)){
                        count++;
                    }
                    break;
                case 3:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML)){
                        count++;
                    }
                    break;
                case 4:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML)){
                        count++;
                    }
                    break;
                case 5:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                case 6:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                case 7:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                case 8:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                case 9:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                case 10:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                case 11:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                case 12:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_add_4.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                case 13:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                case 14:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                case 15:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_add_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                case 16:
                    if(parseInt(piece_self.innerHTML) == parseInt(piece_cut_1.innerHTML) || parseInt(piece_self.innerHTML) == parseInt(piece_cut_4.innerHTML)){
                        count++;
                    }
                    break;
                default:
                    break;    
            }
        }
        // 当遍历所有棋子后与相邻位置棋子数值都不相等，游戏结束
        if(count == 0){
            // 获取当前得分
            let score = document.getElementById("show_number").innerHTML;
            alert("潇洒人生，极限挑战。游戏结束！ 您的得分："+score+" 分");
            // 点击确定按钮后初始化游戏
            init();
        }
    }
}

至此整个项目设计过程就结束了，由于刚转入前端代码书写肯定不是很优雅，欢迎大家对我的代码不足之处进行指正。

（寝室已经断电，室友已是鼾声四起，准备睡觉啦，明天一早还要起来去上课【允悲】）

完整项目访问 我的github仓库
点击此处 体验我的2048小游戏

欢迎大家转载此文章 但请注明出处 谢谢合作

你可能感兴趣的:(记一次2048小游戏开发)

  • DeepSeek 训练数据模板生成指南 He.Tech 开发语言
    DeepSeek训练数据模板生成指南（一次生成多条高质量数据集）一、核心数据格式规范1.基础结构（JSONL格式）每条数据需包含prompt（输入指令）和completion（期望输出）两个核心字段，采用单行JSON格式存储：{"prompt":"如何评估基金的投资风险？","completion":"基金风险评估需关注：1.历史波动率...2.最大回撤..."}{"prompt":"用Pytho
  • yolov8的第一次实验报告 算法宇宙 YOLO人工智能计算机视觉
    1.实验概述实验名称:占道经营目标检测模型实验目标:提高模型的精确率（Precision）和召回率（Recall），使其接近1。实验日期:[2025-01-16]2.数据集数据集名称:[datasets]数据集大小:[2.68Gb]数据集描述:[数据集主要分两个类别：zdjy_ld,zdjy_gd]注释：占道经营流动，占道经营固定3.模型配置3.1基础配置·模型类型:YOLOv8·预训练模型:YO
  • C++实现转轮密码机 Istaroth 算法函数c语言密码加密算法算法
    说起来有点伤心，一个月前写的轮转密码机源码忘记保存被我删了，心痛的不行。因为第一次写密码机写了一早上，调试了一下午才搞好。虽然不难，但是那时候我刚接触链表结构，还不是很熟悉，各种野指针，内存错误。索性就重写了一份，有了写DES加密算法学到的经验，写起轮转密码机2.0轻松了太多，开头写上函数原型，各种小函数先写好，再去类中修改掉上次出错的野指针问题。这次代码量比上次少了大概一半。加上调试一共花了2个
  • java+redis+pipleline_详解Java使用Pipeline对Redis批量读写（hmset&hgetall） 666齐乐家园
    一般情况下，RedisClient端发出一个请求后，通常会阻塞并等待Redis服务端处理，Redis服务端处理完后请求命令后会将结果通过响应报文返回给Client。感觉这有点类似于HBase的Scan，通常是Client端获取每一条记录都是一次RPC调用服务端。在Redis中，有没有类似HBaseScannerCaching的东西呢，一次请求，返回多条记录呢？有，这就是Pipline。官方介绍ht
  • Elasticsearch：为推理端点配置分块设置 Elastic 中国社区官方博客 ElasticsearchAIElasticelasticsearch大数据搜索引擎人工智能全文检索数据库ai
    推理端点对一次可处理的文本量有限，具体取决于模型的输入容量。分块（Chunking）是指将输入文本拆分成符合这些限制的小块的过程，在将文档摄取到semantic_text字段时会进行分块。分块不仅有助于保持输入文本在可处理范围内，还能使内容更加易读。相比返回一整篇长文档，在搜索结果中提供最相关的文本片段更有价值。每个分块都会包含文本片段以及从中生成的对应嵌入。默认情况下，文档会被拆分为句子（sen
  • cursor or 大模型的编程使用经验 人工智能cursor
    1.git管理代码版本改了、达到了基本效果就可以保存（也就是实现了基本代码逻辑）。一旦大模型给出新的代码实现逻辑，或者自己人工修改代码实现逻辑，每修改一次代码，实现逻辑就保存一次代码版本。commit消息遵循以下示例：test：本次代码实现思路是...2.使用md文件避免大模型幻觉为什么使用md文件辅助大模型编程：大模型有可能会随意变更代码实现逻辑大模型上下文在多次对话可能会忘记之前的对话内容，但
  • 手写智能指针shared_ptr @M_J_Y@ c++c++
    手写智能指针shared_ptr本文尝试手写shared_ptr，此外如果使用memory库中的make_shared相对于shared_ptr有以下好处：make_shared会在一次内存分配中同时分配对象本体和引用计数减少安全异常，两次操作变一个高效的引用计数管理，一个内存块中存储对象和引用计数，指针访问时减少额外的缓存访问代码简洁不用new#include#includetemplatecl
  • 【财经速递】2025年美联储利率决议时间表 金融小师妹 大数据
    内容来源：天誉国际美联储的利率决策由联邦公开市场委员会（FOMC）定期召开会议决定，每年共举行八次会议。这些会议不仅决定短期利率，还会在每个季度的最后一次会议上发布经济预测和点阵图，为市场提供未来货币政策的方向。美联储的利率决策直接影响商业银行的信贷成本，进而对全球经济产生深远影响。美联储的利率决议一直是金融市场的焦点事件，每次会议都可能引发市场的剧烈波动。特别是在黄金市场，美联储的货币政策动向往
  • 侯捷 C++ 课程学习笔记：C++常用标准库 Three～stone c++学习笔记
    标准库#include万能头是一个简写方式，用来一次性包含C++标准库中的许多常用部分，比如输入输出流（iostream）、算法（algorithm）、向量（vector）、列表（list）、队列（queue）、栈（stack）、映射（map）、集合（set）等。使用它可以让程序员在编写解决特定问题的代码时，不必一一列出所需的所有头文件，简化了代码的编写过程。在实际的工程项目或更专业的编程实践中，
  • Linux下的socket编程学习（TCP） 小苏同学的脱发日记 linux学习tcp/ip
    1.什么是socket？socket的英文翻译就是接口，插座的意思，很形象，就相当于将2台电脑用一根线连起来，线的两头插在不同的电脑上，借此实现通讯的功能。两台电脑通信，实际上是这两台电脑上的某个进程在进行通信。而两个进程进行通信，实际上是往同一个文件中读取数据。2.TCP/IP（3次握手）在tcp/ip协议中，tcp通过三次握手建立起一个tcp的链接，大致如下第一次握手：客户端尝试连接服务器，向
  • LeetCode34. 在排序数组中查找元素的第一个和最后一个位置 - Java & Go - 二分查找改进 暴风星云裂之我裂开了 LeetCode题解leetcodejavagolang二分查找
    文章目录LeetCode34.在排序数组中查找元素的第一个和最后一个位置解法11算法2Java3Go解法21算法2Java3GoLeetCode34.在排序数组中查找元素的第一个和最后一个位置LeetCode34.在排序数组中查找元素的第一个和最后一个位置解法11算法算法1.两次二分查找2.第一次二分查找计算mid=(left+right)>>1;，每次mid都偏向左边，可以保证找到的是第一个大于
  • LeetCode-490 迷宫问题（DFS） IC 见路不走 深度优先leetcode算法
    题目描述由空地和墙组成的迷宫中有一个球，球可以向上下左右四个方向滚动，但在遇到墙壁前不会停止滚动。当球停下时，可以选择下一个方向。给定球的起始位置、目的地和迷宫。判断球能否在目的地停下。思路分析：迷宫由一个0和1的二维数组组成，1表示墙壁，0代表空地。你可以假设迷宫的边缘都是墙壁，防止小球出界，起始位置和目的地的坐标通过行号和列好给出。该题特别注意，小球是向一个方向运动，直到停下为止，并不是一次只
  • 交换平台（一）第一章：数据交换平台的一些基本概念 姚毛毛-aione1.com 交换平台项目分享
    目录文章目录第零章、前言：为什么？做什么？怎么做？第一章、数据交换平台的一些基本概念1.1数据交换与交换平台1.2什么是物理隔离？第零章、前言：为什么？做什么？怎么做？最近带队做了公司的一个项目，叫数据交换平台，旨在物理隔离的情况下对多端业务系统进行数据的加密、传输、监控。正好这个项目的架构师也在公司做了一次架构层面的技术分享，我便把此次分享和我在项目实践中遇到的一些坑一起整理出来，形成本系列文章
  • 通过Java代码实现ping功能测试ip地址与ip:port的连通性 Java大侠 业务代码java功能测试
    通过Java代码实现测试ip地址与ip:port的连通性需求分析具体实现测试ip连通性测试ip:port连通性重试机制需求分析最近在业务中，需要添加一种掉线告警系统。大致思路为：通过定时任务扫描，每一个小时判断一次设备是否在线，如果在线继续判断端口是否能够通讯。如果不在线或者不能通讯，需要及时push消息给告警人员，及时处理。具体实现测试ip连通性主要通过InetAddress类来实现/***@p
  • Java 解决 TCP 粘包问题详解：原理与实战示例 伤心辞 网络tcp/ip网络协议
    TCP协议是面向字节流的传输协议，其核心设计目标是高效传输数据，但这也导致了应用层需要自行处理数据包的边界问题，即粘包问题。本文将通过Java代码示例，详细解析粘包问题的原因及解决方案。一、粘包问题的本质1.什么是粘包？发送方发送多个应用层数据包（如包A和包B）。接收方可能一次性读取到合并后的数据（如包A包B），导致无法区分原始包边界。2.为什么会出现粘包？TCP的字节流特性：数据像水流一样连续，
  • 蓝桥杯 Python组-神奇闹钟（datetime库） Aurora_th 蓝桥杯蓝桥杯算法职场和发展pythondatetime
    神奇闹钟传送门：0神奇闹钟-蓝桥云课问题描述小蓝发现了一个神奇的闹钟，从纪元时间（1970年11日00：00：00）开始，每经过x分钟，这个闹钟便会触发一次闹铃(纪元时间也会响铃)。这引起了小蓝的兴趣，他想要好好研究下这个闹钟。对于给出的任意一个格式为уууу-MM-ddHH:mm:ss的时间，小蓝想要知道在这个时间点之前(包含这个时间点)的最近的一次闹铃时间是哪个时间?注意，你不必考虑时区问题。
  • python`print`函数中flush参数 需要重新演唱 Pythonpython
    print函数中flush参数在计算机中，输出通常会被缓冲，这意味着数据不会立即发送到目标位置（如控制台或文件），而是先存储在内存中的一个缓冲区里。这样做的好处是可以提高性能，因为一次性发送大量数据通常比逐个发送数据更高效。然而，在某些情况下，你可能希望立即看到输出，而不是等待缓冲区填满或程序结束。这时就可以使用flush参数来强制刷新缓冲区。flush参数的作用flush参数是一个布尔值，默认是
  • CSS竟然开始支持函数了！编程语言的未来能否在此掀起波澜？ 前端javascript
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读当我第一次看到CSS即将支持原生函数时？没错，朋友，这是真的！如今，CSS也开始拥抱函数特性了——那些曾坚称CSS不配称作“编程语言”的人，现在或许得重新考虑一下了。好了，兴奋之余，我们还是先稳一下，深入了解它的具体内容吧！基础知识：函数的定义和调用试想一下，你正在给网页中的多个元素添加相同的虚线边框。通常
  • 【Go基础】垃圾回收演进|三色标记法 小超人冲鸭 算法golang后端
    GO1.3标记清除，整体需要STW：1.暂停，找到可达和不可达对象，2.标记可达对象，3.清除未标记对象，4.结束暂停GO1.5三色标记法，堆启动写屏障，栈不启动，全部扫描一次后，需要重新扫描栈（STW），效率低如果没有STW，对象丢失的2个条件：黑色对象指向白色对象（白色挂在黑色下面）灰色对象与其可达白色对象之间遭到破坏（灰色也丢失了该白色）屏障机制，保障对象不丢失的2种方式：强三色不变式：不允
  • request+pytest根据yaml文件发送请求 等枝桠~成繁花 pytest
    request怎么跟pytest结合起来，然后根据yaml文件去发一个基本的请求呢？下面是一个简单的示例。1、先新建一个名为“demo.yaml”的yaml文件，用来存放测试数据的。-name:G广州研发中心parentid:1#第一次用例的数据正常expect:60008#对请求结果进行断言-name:""parentid:1#第二次用例的数据name为空expect:40058#对请求结果进行
  • 一次Linux下 .net 调试经历 norsd C#VCDebuglinux.net
    背景：Xt160Api,之前在windows下用.net调用，没有任何问题。但是移植到Linux去后，.net程序调用init(config_path)总是报错/root/test找不到traderApi.ini(/root/test是程序目录)然后退出程序解决过程:于是考虑是不是参数传错了，但是无论这个参数是什么，报错内容始终如此。甚至某些情况下，比如加了几句Console.WriteLIne(
  • TRS收益互换系统开发为何敢称“无限拓展”？模块化架构+弹性集群揭秘！ Ashlee_code 架构pythonjavac++c语言
    《【券商震惊】传统询价3小时→TRS黑科技10分钟！盈立证券交易量暴增150%背后秘密》开篇：询价耗时3小时？券商正在被低效“慢性杀死”电话询价、邮件比价、Excel汇总——传统场外交易中，一次询价流程动辄数小时，客户流失率高达40%！TRS收益互换平台，依托DeepSeek动态定价算法与多发行方实时比价引擎，将询价响应时间从3小时压缩至10分钟，助力盈立证券交易量飙升150%，彻底改写行业游戏规
  • 24小时响应+零宕机！TRS收益互换系统售后如何成为券商“救命稻草”？ Ashlee_code 架构javapythonc++c语言
    《【券商震惊】传统询价3小时→TRS黑科技10分钟！盈立证券交易量暴增150%背后秘密》开篇：询价耗时3小时？券商正在被低效“慢性杀死”电话询价、邮件比价、Excel汇总——传统场外交易中，一次询价流程动辄数小时，客户流失率高达40%！令克软件TRS收益互换平台，依托DeepSeek动态定价算法与多发行方实时比价引擎，将询价响应时间从3小时压缩至10分钟，助力盈立证券交易量飙升150%，彻底改写行
  • Github开源库Xpopup代码阅读 月亮下的小草屋 github开源库代码阅读android
    前言很久没写点东西了，在家闲着考了个驾照，花了一个半月，中国的驾考真的是没眼看，刚拿到驾照当天就被疫情封闭在家，直接封了一个多月，人都麻了，再来一次估计直接过年了，最近刚开始干点活。Xpopup是我非常喜欢的一个Github开源库，一直在用，我在Xpopup2.x版本的时候看过一遍它的代码，现在已经更新到3.x版本了，这两天也没啥事，又重新看了一遍，Xpopup的代码还是很容易阅读的，有兴趣的话可
  • 【.NET 6】RabbitMQ延迟消息指南 人生短几个秋 .netcorerabbitmq.net
    背景最近遇到一个比较特殊需求，需要修改一个的RabbitMQ消费者，以实现在消费某种特定的类型消息时，延迟1小时再处理，几个需要注意的点：延迟是以小时为单位不是所有消息都延迟消费，只延迟特定类型的消息只在第一次消费时延迟1小时，容错机制产生的重新消费（也即消息消费失败，多次进入延迟队列重试），则不再延迟1小时消费者消费过程中可能会重启考虑到这几点，我们需要一个标识以及持久化，不能简单使用Threa
  • 音视频缓存数学模型 锋风Fengfeng 安卓Android应用开发相关音视频缓存
    2024年8月的笔记音视频缓存数学模型-Wesley’sBlog播放器作为消费者，缓存作为生产者。进入缓冲一次设消费者速率为v1，生产者为v2，视频长度为l，x为生产者至少距离消费者多远才能保证在播完视频前两者重合。实际上就是一个追及问题。v1t=v2t+x，即l=v2*l/v1+x，因为播放器速度是1，继续简化得x=l(1-v2)如果v2大于1，即满足消费者需求时，可以流畅播放。设l是一部45分
  • @mouseleave，@mouseenter和 @mouseover，@mouseout 的区别以及使用 腥臭腐朽的日子熠熠生辉 前端开发VueJavascript前端css
    @mouseleave，@mouseenter的含义：表示在当前绑定元素及其子元素中之触发一次，如遇到其中子元素不再触发。@mouseout，@mouseover的含义：表示在当前绑定元素触发一次，遇到其子元素则将重新触发。图示。
  • GAN模型的Python应用——生成对抗网络 代码编织匠人 python生成对抗网络开发语言
    GAN模型的Python应用——生成对抗网络生成对抗网络（GenerativeAdversarialNetwork，GAN）是深度学习中的一种重要模型，已经被广泛应用于图像、文本生成等领域。GAN模型由两个神经网络组成：生成器（Generator）和判别器（Discriminator）。生成器用于生成假样本，判别器用于评估真实性。两个神经网络相互博弈，通过一次次迭代训练，最终生成器可以生成足以骗过
  • matlab 矩阵的数组平方和,MATLAB中的矩阵和数组 跟英语死磕到底 matlab矩阵的数组平方和
    本文概述MATLAB一次处理整个矩阵和数组。所有类型的数据变量都存储为多维数组,可以是字符,字符串或数字。二维数组称为矩阵,通常用于线性代数。在MATLAB中创建数组我们可以在MATLAB中以多种方式创建数组：通过在元素之间使用空格：此命令创建一个具有一行四列的数组变量”A”。存储在工作空间中的’A’变量和输出将在命令窗口中显示为：通过在元素之间使用逗号：此命令将创建一个具有一行四列的数组变量”a
  • JavaWeb学习——登录校验 灰太狼想上班 JavaWeb基础学习springtomcatservlet后端
    JavaWeb学习——登录校验一、功能实现只需要接受请求参数username和password，然后调用接口在数据库表中查询键值匹配的数据项即可二、登录校验登录校验通常分为两步，一是登录标记，二是统一拦截1、会话跟踪会话：用户打开浏览器，访问web服务器的资源，会话建立，知道有一方断开连接，会话结束。在一次会话中可以包含多次请求和响应会话跟踪：一种维护浏览器的方法，服务器要识别多次请求是否来自于同
  • 戴尔笔记本win8系统改装win7系统 sophia天雪 win7戴尔改装系统win8
    戴尔win8 系统改装win7 系统详述 第一步：使用U盘制作虚拟光驱：         1）下载安装UltraISO：注册码可以在网上搜索。         2）启动UltraISO，点击“文件”—》“打开”按钮，打开已经准备好的ISO镜像文
  • BeanUtils.copyProperties使用笔记 bylijinnan java
    BeanUtils.copyProperties VS PropertyUtils.copyProperties 两者最大的区别是： BeanUtils.copyProperties会进行类型转换，而PropertyUtils.copyProperties不会。 既然进行了类型转换，那BeanUtils.copyProperties的速度比不上PropertyUtils.copyProp
  • MyEclipse中文乱码问题 0624chenhong MyEclipse
    一、设置新建常见文件的默认编码格式，也就是文件保存的格式。 在不对MyEclipse进行设置的时候，默认保存文件的编码，一般跟简体中文操作系统（如windows2000，windowsXP）的编码一致，即GBK。 在简体中文系统下，ANSI 编码代表 GBK编码;在日文操作系统下，ANSI 编码代表 JIS 编码。 Window-->Preferences-->General -
  • 发送邮件 不懂事的小屁孩 send email
    import org.apache.commons.mail.EmailAttachment; import org.apache.commons.mail.EmailException; import org.apache.commons.mail.HtmlEmail; import org.apache.commons.mail.MultiPartEmail;
  • 动画合集 换个号韩国红果果 htmlcss
    动画 指一种样式变为另一种样式 keyframes应当始终定义0 100 过程 1 transition  制作鼠标滑过图片时的放大效果 css .wrap{ width: 340px;height: 340px; position: absolute; top: 30%; left: 20%; overflow: hidden; bor
  • 网络最常见的攻击方式竟然是SQL注入 蓝儿唯美 sql注入
    NTT研究表明，尽管SQL注入（SQLi）型攻击记录详尽且为人熟知，但目前网络应用程序仍然是SQLi攻击的重灾区。 信息安全和风险管理公司NTTCom Security发布的《2015全球智能威胁风险报告》表明，目前黑客攻击网络应用程序方式中最流行的，要数SQLi攻击。报告对去年发生的60亿攻击 行为进行分析，指出SQLi攻击是最常见的网络应用程序攻击方式。全球网络应用程序攻击中，SQLi攻击占
  • java笔记2 a-john java
    类的封装： 1，java中，对象就是一个封装体。封装是把对象的属性和服务结合成一个独立的的单位。并尽可能隐藏对象的内部细节（尤其是私有数据） 2，目的：使对象以外的部分不能随意存取对象的内部数据（如属性），从而使软件错误能够局部化，减少差错和排错的难度。 3，简单来说，“隐藏属性、方法或实现细节的过程”称为——封装。 4，封装的特性：       4.1设置
  • [Andengine]Error：can't creat bitmap form path “gfx/xxx.xxx” aijuans 学习Android遇到的错误
            最开始遇到这个错误是很早以前了，以前也没注意，只当是一个不理解的bug，因为所有的texture，textureregion都没有问题，但是就是提示错误。 昨天和美工要图片，本来是要背景透明的png格式，可是她却给了我一个jpg的。说明了之后她说没法改，因为没有png这个保存选项。 我就看了一下，和她要了psd的文件，还好我有一点
  • 自己写的一个繁体到简体的转换程序 asialee java转换繁体filter简体
              今天调研一个任务，基于java的filter实现繁体到简体的转换，于是写了一个demo，给各位博友奉上，欢迎批评指正。          实现的思路是重载request的调取参数的几个方法，然后做下转换。          
  • android意图和意图监听器技术 百合不是茶 android显示意图隐式意图意图监听器
    Intent是在activity之间传递数据;Intent的传递分为显示传递和隐式传递   显式意图：调用Intent.setComponent() 或 Intent.setClassName() 或 Intent.setClass()方法明确指定了组件名的Intent为显式意图，显式意图明确指定了Intent应该传递给哪个组件。   隐式意图;不指明调用的名称,根据设
  • spring3中新增的@value注解 bijian1013 javaspring@Value
            在spring 3.0中，可以通过使用@value，对一些如xxx.properties文件中的文件，进行键值对的注入，例子如下： 1.首先在applicationContext.xml中加入：  <beans xmlns="http://www.springframework.
  • Jboss启用CXF日志 sunjing logjbossCXF
    1. 在standalone.xml配置文件中添加system-properties：     <system-properties>        <property name="org.apache.cxf.logging.enabled" value=&
  • 【Hadoop三】Centos7_x86_64部署Hadoop集群之编译Hadoop源代码 bit1129 centos
      编译必需的软件 Firebugs3.0.0 Maven3.2.3 Ant JDK1.7.0_67 protobuf-2.5.0 Hadoop 2.5.2源码包       Firebugs3.0.0   http://sourceforge.jp/projects/sfnet_findbug
  • struts2验证框架的使用和扩展 白糖_ 框架xmlbeanstruts正则表达式
    struts2能够对前台提交的表单数据进行输入有效性校验，通常有两种方式： 1、在Action类中通过validatexx方法验证，这种方式很简单，在此不再赘述； 2、通过编写xx-validation.xml文件执行表单验证，当用户提交表单请求后，struts会优先执行xml文件，如果校验不通过是不会让请求访问指定action的。 本文介绍一下struts2通过xml文件进行校验的方法并说
  • 记录-感悟 braveCS 感悟
    再翻翻以前写的感悟，有时会发现自己很幼稚，也会让自己找回初心。   2015-1-11 1. 能在工作之余学习感兴趣的东西已经很幸福了； 2. 要改变自己，不能这样一直在原来区域，要突破安全区舒适区，才能提高自己，往好的方面发展； 3. 多反省多思考；要会用工具，而不是变成工具的奴隶； 4. 一天内集中一个定长时间段看最新资讯和偏流式博
  • 编程之美-数组中最长递增子序列 bylijinnan 编程之美
    import java.util.Arrays; import java.util.Random; public class LongestAccendingSubSequence { /** * 编程之美 数组中最长递增子序列 * 书上的解法容易理解 * 另一方法书上没有提到的是，可以将数组排序（由小到大）得到新的数组， * 然后求排序后的数组与原数
  • 读书笔记5 chengxuyuancsdn 重复提交struts2的token验证
    1、重复提交 2、struts2的token验证 3、用response返回xml时的注意 1、重复提交 (1)应用场景 (1-1)点击提交按钮两次。 (1-2)使用浏览器后退按钮重复之前的操作，导致重复提交表单。 (1-3)刷新页面 (1-4)使用浏览器历史记录重复提交表单。 (1-5)浏览器重复的 HTTP 请求。 (2)解决方法 (2-1)禁掉提交按钮 (2-2)
  • [时空与探索]全球联合进行第二次费城实验的可能性 comsci
         二次世界大战前后,由爱因斯坦参加的一次在海军舰艇上进行的物理学实验 -费城实验   至今给我们大家留下很多迷团.....      关于费城实验的详细过程,大家可以在网络上搜索一下,我这里就不详细描述了      在这里,我的意思是,现在
  • easy connect 之 ORA-12154: TNS: 无法解析指定的连接标识符 daizj oracleORA-12154
    用easy connect连接出现“tns无法解析指定的连接标示符”的错误，如下： C:\Users\Administrator>sqlplus username/[email protected]:1521/orcl SQL*Plus: Release 10.2.0.1.0 – Production on 星期一 5月 21 18:16:20 2012 Copyright (c) 198
  • 简单排序:归并排序 dieslrae 归并排序
    public void mergeSort(int[] array){ int temp = array.length/2; if(temp == 0){ return; } int[] a = new int[temp]; int
  • C语言中字符串的\0和空格 dcj3sjt126com c
       \0 为字符串结束符，比如说：                       abcd (空格)cdefg； 存入数组时，空格作为一个字符占有一个字节的空间，我们
  • 解决Composer国内速度慢的办法 dcj3sjt126com Composer
    用法： 有两种方式启用本镜像服务： 1 将以下配置信息添加到 Composer 的配置文件 config.json 中（系统全局配置）。见“例1” 2 将以下配置信息添加到你的项目的 composer.json 文件中（针对单个项目配置）。见“例2” 为了避免安装包的时候都要执行两次查询，切记要添加禁用 packagist 的设置，如下 1 2 3 4 5
  • 高效可伸缩的结果缓存 shuizhaosi888 高效可伸缩的结果缓存
    /** * 要执行的算法，返回结果v */ public interface Computable<A, V> { public V comput(final A arg); }   /** * 用于缓存数据 */ public class Memoizer<A, V> implements Computable<A,
  • 三点定位的算法 haoningabc c算法
    三点定位， 已知a,b,c三个顶点的x,y坐标 和三个点都z坐标的距离，la，lb,lc 求z点的坐标 原理就是围绕a,b,c 三个点画圆，三个圆焦点的部分就是所求 但是，由于三个点的距离可能不准，不一定会有结果， 所以是三个圆环的焦点，环的宽度开始为0，没有取到则加1 运行 gcc -lm test.c test.c代码如下 #include "stdi
  • epoll使用详解 jimmee clinux服务端编程epoll
    epoll - I/O event notification facility在linux的网络编程中，很长的时间都在使用select来做事件触发。在linux新的内核中，有了一种替换它的机制，就是epoll。相比于select，epoll最大的好处在于它不会随着监听fd数目的增长而降低效率。因为在内核中的select实现中，它是采用轮询来处理的，轮询的fd数目越多，自然耗时越多。并且，在linu
  • Hibernate对Enum的映射的基本使用方法 linzx0212 enumHibernate
      枚举   /** * 性别枚举 */ public enum Gender { MALE(0), FEMALE(1), OTHER(2); private Gender(int i) { this.i = i; } private int i; public int getI
  • 第10章 高级事件（下） onestopweb 事件
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • 孙子兵法 roadrunners 孙子兵法
    始计第一 孙子曰： 兵者，国之大事，死生之地，存亡之道，不可不察也。 故经之以五事，校之以计，而索其情：一曰道，二曰天，三曰地，四曰将，五 曰法。道者，令民于上同意，可与之死，可与之生，而不危也；天者，阴阳、寒暑 、时制也；地者，远近、险易、广狭、死生也；将者，智、信、仁、勇、严也；法 者，曲制、官道、主用也。凡此五者，将莫不闻，知之者胜，不知之者不胜。故校 之以计，而索其情，曰
  • MySQL双向复制 tomcat_oracle mysql
    本文包括: 主机配置 从机配置 建立主-从复制 建立双向复制   背景 按照以下简单的步骤: 参考一下： 在机器A配置主机(192.168.1.30) 在机器B配置从机(192.168.1.29) 我们可以使用下面的步骤来实现这一点   步骤1：机器A设置主机 在主机中打开配置文件 ,
  • zoj 3822 Domination(dp) 阿尔萨斯 Mina
    题目链接：zoj 3822 Domination 题目大意：给定一个N∗M的棋盘，每次任选一个位置放置一枚棋子，直到每行每列上都至少有一枚棋子，问放置棋子个数的期望。 解题思路：大白书上概率那一张有一道类似的题目，但是因为时间比较久了，还是稍微想了一下。dp[i][j][k]表示i行j列上均有至少一枚棋子，并且消耗k步的概率（k≤i∗j）,因为放置在i+1~n上等价与放在i+1行上，同理
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他