前段时间，看了一个视频，用javascript实现的2048小游戏，发现不难，都是一些基出的语法和简单逻辑。

整个2048游戏没有很多的数据，所有，实现起来还是很有成就感的。

先上图，简直就和原版游戏一样一样的。

下面分享一下整个2048游戏的代码逻辑：

首先，搭建游戏框架

其次，开始我们的代码编写

index.html

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>网页版2048</title>

<link rel="stylesheet" type="text/css" href="index.css" />

<script type="text/javascript"

    src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>

<script type="text/javascript" src="support2048.js"></script>

<script type="text/javascript" src="showanimation2048.js"></script>

<script type="text/javascript" src="main2048.js"></script>

</head>

<body>

    <header>

        <h1></h1>

        <a href="javascript:newgame();" id="newgamebutton">New Game</a>

        <p>

            score:<span id="score"></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>
<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>网页版2048</title>

<link rel="stylesheet" type="text/css" href="index.css" />

<script type="text/javascript"

    src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>

<script type="text/javascript" src="support2048.js"></script>

<script type="text/javascript" src="showanimation2048.js"></script>

<script type="text/javascript" src="main2048.js"></script>

</head>

<body>

    <header>

        <h1></h1>

        <a href="javascript:newgame();" id="newgamebutton">New Game</a>

        <p>

            score:<span id="score"></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>

index.css

@CHARSET "UTF-8";

header{

    display:block;

    margin: auto;

    width:500px;

    text-align:center;

}

header h1{

    font-family:Arial, Helvetica, sans-serif;

    font-size:60px;

    font-weight:bold;

}

header #newgamebutton{

    width:100px;

    padding:10px;

    background:#8f7a66;

    font-family:Arial, Helvetica, sans-serif;

    color:white;

    border-radius:10px;

    text-decoration:none;

}

header #newgamebutton:hover{

    background:#9f8b77;

}

header p{

    font-family:Arial, Helvetica, sans-serif;

    font-size:25px;

    margin:20px auto;

}

#grid-container{

    width:460px;

    height:460px;

    padding:20px;

    margin:50px auto;

    background:#bbada0;

    border-radius:10px;

    position:relative;

}

.grid-cell{

    width:100px;

    height:100px;

    border-radius:6px;

    background:#ccc0b3;

    position:absolute;

}

.number-cell{

    width:100px;

    height:100px;

    border-radius:6px;

    line-height:100px;

    font:Arial, Helvetica, sans-serif;

    font-size:60px;

    font-weight:bold;

    text-align: center;

    position:absolute;

}

main2048.js

var board = new Array();

var score = ;

var top = ;

$(document).ready(function(e){

    newgame();

});

function newgame(){

    //初始化棋盘格

    init();

    //在随机两个各自声称的数字

    generateOneNumber();

    generateOneNumber();

}

function init(){

    for(var i = ;i<;i++){

        for(var j = ;j<;j++){

            var gridCell = $("#grid-cell-"+i+"-"+j);

            gridCell.css("top",getPosTop(i,j));

            gridCell.css("left",getPosLeft(i,j));

        }

    }

    for(var i = ; i<;i++){

        board[i] = new Array();

        for(var j = ;j<;j++){

            board[i][j] = ;

        }

    }

    updateBoardView();//通知前端对board二位数组进行设定。

}

function updateBoardView(){

    $(".number-cell").remove();

    for(var i = ;i<;i++){

        for ( var j = ; j < ; j++) {

            $("#grid-container").append('<div class="number-cell" id="number-cell-'+i+'-'+j+'"></div>');

            var theNumberCell = $('#number-cell-'+i+'-'+j);

            if(board[i][j] == ){

                theNumberCell.css('width','0px');

                theNumberCell.css('height','0px');

                theNumberCell.css('top',getPosTop(i,j));

                theNumberCell.css('left',getPosLeft(i,j));

            }else{

                theNumberCell.css('width','100px');

                theNumberCell.css('hegiht','100px');

                theNumberCell.css('top',getPosTop(i,j));

                theNumberCell.css('left',getPosLeft(i,j));

                //NumberCell覆盖

                theNumberCell.css('background-color',getNumberBackgroundColor(board[i][j]));//返回背景色

                theNumberCell.css('color',getNumberColor(board[i][j]));//返回前景色

                theNumberCell.text(board[i][j]);

            }

        }

    }

}

function generateOneNumber(){

    if (nospace(board))

        return false;

    //随机一个位置

    var randx = parseInt(Math.floor(Math.random()*));

    var randy = parseInt(Math.floor(Math.random()*));

    while(true){

        if (board[randx][randy] == )

            break;

        randx = parseInt(Math.floor(Math.random()*));

        randy = parseInt(Math.floor(Math.random()*));

    }

    //随机一个数字

    var randNumber = Math.random()<0.5 ? : ;

    //在随机位置显示随机数字

    board[randx][randy] = randNumber;

    showNumberWithAnimation(randx,randy,randNumber);

    return true;

}

//事件响应循环

$(document).keydown(function(event){

    switch (event.keyCode) {

    case ://left

        if(moveLeft()){

            //setTimeout("generateOneNumber()",210);

            generateOneNumber();//每次新增一个数字就可能出现游戏结束

            isgameover();//300毫秒

        }

        break;

    case ://up

        if(moveUp()){

            generateOneNumber();//每次新增一个数字就可能出现游戏结束

            isgameover();

        }

        break;

    case ://right

        if(moveRight()){

            generateOneNumber();//每次新增一个数字就可能出现游戏结束

            isgameover();

        }

        break;

    case ://down

        if(moveDown()){

            generateOneNumber();//每次新增一个数字就可能出现游戏结束

            isgameover();

        }

        break;

    }

});

function isgameover(){

    if(nospace(board)&&nomove(board))

        gameover();

}

function gameover(){

    alert("gameover");

}

function moveLeft(){//更多地细节信息

    //判断格子是否能够向左移动

    if( !canMoveLeft(board))

        return false;

    //真正的moveLeft函数//标准

    for(var i = ;i<;i++)

        for(var j = ;j<;j++){//第一列的数字不可能向左移动

            if(board[i][j] !=){

                //(i,j)左侧的元素

                for(var k = ;k<j;k++){

                    //落脚位置的是否为空 && 中间没有障碍物

                    if(board[i][k] ==  && noBlockHorizontal(i , k, j, board)){

                        //move

                        showMoveAnimation(i, j,i,k);

                        board[i][k] = board[i][j];

                        board[i][j] = ;

                        continue;

                    }

                    //落脚位置的数字和本来的数字相等 && 中间没有障碍物

                    else if(board[i][k] == board[i][j] && noBlockHorizontal(i , k, j, board)){

                        //move

                        showMoveAnimation(i, j,i,k);

                        //add

                        board[i][k] += board[i][j];

                        board[i][j] = ;

                        continue;

                    }

                }

            }

        }

    setTimeout("updateBoardView()",);

    return true;

}

support2048.js

function getPosTop(i, j) {

    return  + i * ;

}

function getPosLeft(i, j) {

    return  + j * ;

}

function getNumberBackgroundColor(number) {

    switch (number) {

    case :

        return "#eee4da";

        break;

    case :

        return "#eee4da";

        break;

    case :

        return "#f26179";

        break;

    case :

        return "#f59563";

        break;

    case :

        return "#f67c5f";

        break;

    case :

        return "#f65e36";

        break;

    case :

        return "#edcf72";

        break;

    case :

        return "#edcc61";

        break;

    case :

        return "#9c0";

        break;

    case :

        return "#3365a5";

        break;

    case :

        return "#09c";

        break;

    case :

        return "#a6bc";

        break;

    case :

        return "#93c";

        break;

    }

    return "black";

}

function getNumberColor(number) {

    if (number <= ){

        return "#776e65";

    }

    return "white";

}

//在随机生成数字的时候判断16宫格中是否还有空间

function nospace(board) {

    for ( var i = ; i < ; i++)

        for ( var j = ; j < ; j++)

            if (board[i][j] == )

                return false;

    return true;

}

//实现功能判断

function canMoveLeft( board ){

    for(var i = ;i<;i++)

        for(var j = ;j<;j++)

            if( board[i][j] != )

                if( board[i][j-] ==  || board[i][j-] == board[i][j])

                    return true;

    return false;

}//判断水平方向是否有障碍物

function noBlockHorizontal(row, col1, col2, board){

    for(var i = col1 + ; i<col2; i++)

        if(board[row][i]!=)

            return false;

    return true;

}//最后收尾

function nomove(board){

    if(canMoveLeft(board)|| canMoveRight(board))

        return false;

    return true;

}

showanimation2048.js

function showNumberWithAnimation(i, j, randNumber) {

    var numberCell = $('#number-cell-' + i + '-' + j);

    numberCell.css("background-color", getNumberBackgroundColor(randNumber));

    numberCell.css("color", getNumberColor(randNumber));

    numberCell.text(randNumber);

    numberCell.animate({

        width : "100px",

        height : "100px",

        top : getPosTop(i, j),

        left : getPosLeft(i, j)

    }, );

}

function showMoveAnimation(fromx, fromy, tox, toy){

    var numberCell = $('#number-cell-'+fromx +'-'+fromy);

    numberCell.animate({top:getPosTop(tox,toy),

    left:getPosLeft(tox,toy)},);

}
function showNumberWithAnimation(i, j, randNumber) {

    var numberCell = $('#number-cell-' + i + '-' + j);

    numberCell.css("background-color", getNumberBackgroundColor(randNumber));

    numberCell.css("color", getNumberColor(randNumber));

    numberCell.text(randNumber);

    numberCell.animate({

        width : "100px",

        height : "100px",

        top : getPosTop(i, j),

        left : getPosLeft(i, j)

    }, );

}

function showMoveAnimation(fromx, fromy, tox, toy){

    var numberCell = $('#number-cell-'+fromx +'-'+fromy);

    numberCell.animate({top:getPosTop(tox,toy),

    left:getPosLeft(tox,toy)},);

}

在功能代码上只做了向左滑动，向右，向上，向下的功能代码基本一致。读者可以自行编写。

如果有需要在上传完整项目代码。

用javascript实现2048的小游戏的更多相关文章

  1. JavaScript+HTML5 实现打地鼠小游戏

    一．游戏简介 打地鼠这个游戏相信大家都不陌生,也是童年时候一款经典的游戏.本次游戏的编写是以html文件形式完成的,并且使用HBulider软件进行编写,使用谷歌浏览器展示效果,游戏将会采用JavaS ...

  2. 使用JavaScript实现简单的小游戏-贪吃蛇

    最近初学JavaScript,在这里分享贪吃蛇小游戏的实现过程, 希望能看到的前辈们能指出这个程序的不足之处. 大致思路 首先要解决的问题 随着蛇头的前进,尾巴也要前进. 用键盘控制蛇的运动方向. 初 ...

  3. JavaScript实现Fly Bird小游戏

    1.分析页面结构,理清需求和功能 游戏有三个界面,分别是开始界面,游戏界面和游戏结束界面. 1.1 开始界面 start.gif 游戏的大背景 上下移动的游戏标题和翅膀摆动的小鸟 start 按钮,点 ...

  4. JavaScript版拼图小游戏

    慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例 拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较 ...

  5. .Net Core ORM选择之路，哪个才适合你 通用查询类封装之Mongodb篇 Snowflake(雪花算法)的JavaScript实现 【开发记录】如何在B/S项目中使用中国天气的实时天气功能 【开发记录】微信小游戏开发入门——俄罗斯方块

    .Net Core ORM选择之路,哪个才适合你   因为老板的一句话公司项目需要迁移到.Net Core ,但是以前同事用的ORM不支持.Net Core 开发过程也遇到了各种坑,插入条数多了也特别 ...

  6. 用WPF做了几个小游戏

    最近看书看累了,参考别人的代码(其实差不多就是把代码重新打了一遍o(╯□╰)o),用wpf做了个<2048>小游戏,顺便在<Git教程>学习下git,也顺便把在<写让别人 ...

  7. flappy pig小游戏源码分析(1)——主程序初探

    闲逛github发现一个javascript原生实现的小游戏,源码写的很清晰,适合想提高水平的同学观摩学习.读通源码后,我决定写一系列的博客来分析源码,从整体架构到具体实现细节来帮助一些想提高水平的朋 ...

  8. ios2048小游戏

    最近突然想写一个2048的小游戏,由于全部是自定义控件,所以程序看起来冗杂,但是核心的算法部分还是很不错的,大家感兴趣的可以仔细看看. 声明部分: #import <UIKit/UIKit.h& ...

  9. HTML+CSS+JavaScript实现2048小游戏

    相信很多人都玩过2048小游戏,规则易懂.操作简单,我曾经也“痴迷”于它,不到2048不罢休,最高成绩合成了4096,现在正好拿它来练练手. 我对于2048的实现,除了使用了现有2048小游戏的配色, ...

随机推荐

  1. 关于java socket（转）

    1. 关于new Socket()中参数的理解 Server端: 调用ServerSocket serverSocket = new ServerSocket(1287,2);后Server端打开了指 ...

  2. linux笔记本上安装了双显卡驱动(intel+nvidia)

    为了提高linux图形性能并降低功耗,独特的文章. 我用的系统Fedora 20 Xfce x64,在安装驱动程序,以确保系统是最新的版本号. 最好安装gcc.kernel-devel和其他包.己主动 ...

  3. emacs quick open and jump file (or buffer) which name is current word

    Sometime, we need to open a file or buffer which name begin with current word in emacs. Here I give ...

  4. InstallShield自定义安装界面

    原文:InstallShield自定义安装界面 版权声明: 可以任意转载,转载时请务必以超链接形式标明文章原始出处和作者信息. 前言: 对于一些InstallShield用户或企业,对于安装包界面除了 ...

  5. adb这点小事——远程adb调试

    欢迎转载.转载请注明:http://blog.csdn.net/zhgxhuaa 1.   前言 1.1.  写在前面的话 在之前的一篇文章<360电视助手实现研究>中介绍了在局域网内直接 ...

  6. iOS6和iOS7适应代码(6) —— NSLocalizedString

    我们的应用程序都需要国际化,字符串的重要组成部分.一般来说.我们是通过一个string资源文件来达到这个目的,我们需要支持多国语言,有多少次把这个文档本地化.需要使用的代码NSLocalizedStr ...

  7. 【iOS】MD5数据加密和网络安全

    在做网络应用程序时,, 始终把确保用户数据的安全性, 因此要加密. MD5算法在国内用的非常多.  MD5算法的特点: *相同的数据加密结果是一样的.(32个字符) *不可逆的.(不能逆向解密) *可 ...

  8. 使用Hadoop的MapReduce与HDFS处理数据

    hadoop是一个分布式的基础架构,利用分布式实现高效的计算与储存,最核心的设计在于HDFS与MapReduce,HDFS提供了大量数据的存储,mapReduce提供了大量数据计算的实现,通过Java ...

  9. ios swift学习日记1-Swift 初见

    最近ios的swift语言似乎火了,我没有objectc基金会,但在此之前有cjava的基础的.从这几天開始学习ios的swift语言.后期以博客形式公布.这里提供一本翻译的英文版的swif书籍. 还 ...

  10. android该系统的应用API选择演示版本

    转载请注明出处[http://blog.csdn.net/y150481863/article/details/41280045] 首先我们在开发一个应用之前,特别是一个android应用.首先要考虑 ...