用javascript实现2048的小游戏

最新推荐文章于 2024-03-29 09:18:42 发布
最新推荐文章于 2024-03-29 09:18:42 发布
阅读量244 收藏
点赞数 1
文章标签： 游戏 javascript 前端 ViewUI
原文链接：http://www.cnblogs.com/qiuge227/p/3747009.html
版权

前段时间，看了一个视频，用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>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>
<!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>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>

index.css

@CHARSET "UTF-8";

header{
    display:block;
    margin:0 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 = 0;
var top = 240;
$(document).ready(function(e){
    newgame();
});

function newgame(){
    //初始化棋盘格
    init();
    //在随机两个各自声称的数字
    generateOneNumber();
    generateOneNumber();
}

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();//通知前端对board二位数组进行设定。
}

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));
                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()*4));
    var randy = parseInt(Math.floor(Math.random()*4));
    while(true){
        if (board[randx][randy] == 0) 
            break;
        randx = parseInt(Math.floor(Math.random()*4));
        randy = parseInt(Math.floor(Math.random()*4));
    }
    //随机一个数字
    var randNumber = Math.random()<0.5 ?2 : 4;
    //在随机位置显示随机数字
    board[randx][randy] = randNumber;
    showNumberWithAnimation(randx,randy,randNumber);
    return true;
}

//事件响应循环
$(document).keydown(function(event){
    switch (event.keyCode) {
    case 37://left
        if(moveLeft()){
            //setTimeout("generateOneNumber()",210);
            generateOneNumber();//每次新增一个数字就可能出现游戏结束
            isgameover();//300毫秒
        }
        break;
    case 38://up
        if(moveUp()){
            generateOneNumber();//每次新增一个数字就可能出现游戏结束
            isgameover();
        }
        break;
    case 39://right
        if(moveRight()){
            generateOneNumber();//每次新增一个数字就可能出现游戏结束
            isgameover();
        }
        break;
    case 40://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 = 0;i<4;i++)
        for(var j = 1;j<4;j++){//第一列的数字不可能向左移动
            if(board[i][j] !=0){
                //(i,j)左侧的元素
                for(var k = 0;k<j;k++){
                    //落脚位置的是否为空 && 中间没有障碍物
                    if(board[i][k] == 0 && noBlockHorizontal(i , k, j, board)){
                        //move
                        showMoveAnimation(i, j,i,k);
                        board[i][k] = board[i][j];
                        board[i][j] = 0;
                        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] = 0;
                        
                        continue;
                    }
                }
            }
        }
    setTimeout("updateBoardView()",200);
    return true;
}

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 "#eee4da";
        break;
    case 8:
        return "#f26179";
        break;
    case 16:
        return "#f59563";
        break;
    case 32:
        return "#f67c5f";
        break;
    case 64:
        return "#f65e36";
        break;
    case 128:
        return "#edcf72";
        break;
    case 256:
        return "#edcc61";
        break;
    case 512:
        return "#9c0";
        break;
    case 1024:
        return "#3365a5";
        break;
    case 2048:
        return "#09c";
        break;
    case 4096:
        return "#a6bc";
        break;
    case 8192:
        return "#93c";
        break;
    }
    return "black";
}

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

//在随机生成数字的时候判断16宫格中是否还有空间
function nospace(board) {
    for ( var i = 0; i < 4; i++) 
        for ( var j = 0; j < 4; j++) 
            if (board[i][j] == 0)
                return false;
    return true;
}

//实现功能判断
function canMoveLeft( board ){
    for(var i = 0;i<4;i++)
        for(var j = 0;j<4;j++)
            if( board[i][j] !=0 )
                if( board[i][j-1] == 0 || board[i][j-1] == board[i][j])
                    return true;
                    
    return false;
}//判断水平方向是否有障碍物
function noBlockHorizontal(row, col1, col2, board){
    for(var i = col1 + 1; i<col2; i++)
        if(board[row][i]!=0)
            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)
    }, 50);
}

function showMoveAnimation(fromx, fromy, tox, toy){
    
    var numberCell = $('#number-cell-'+fromx +'-'+fromy);
    numberCell.animate({top:getPosTop(tox,toy),
    left:getPosLeft(tox,toy)},200);
}
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)
    }, 50);
}

function showMoveAnimation(fromx, fromy, tox, toy){
    
    var numberCell = $('#number-cell-'+fromx +'-'+fromy);
    numberCell.animate({top:getPosTop(tox,toy),
    left:getPosLeft(tox,toy)},200);
}

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

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

转载于:https://www.cnblogs.com/qiuge227/p/3747009.html

dianying7959
关注
javascript实现前端小游戏2048
JiangHu_Java的博客
10-04 1557
javascript实现前端小游戏2048前言主要功能实现过程前端静态样式布置 前言 最近因为一些原因，研究了一下2048这个小游戏的代码，顺便给大家讲一下实现过程。 游戏截图： 主要功能 1、根据格子的合并，部分数字对应的格子颜色不尽相同； 2、初始化随机位置出现随机的2个数字为2或4； 3、每次合并一个格子只合并一次，如2 2 4 0，第一次合并后是4 4 0 0，而不是8 0 0 0； 4，判断所有格子是否能够向上下左右移动，没有空间或者对应方向的第一个格子数字和本身格子的数字不一样即移动不了；
JavaScript实现2048小游戏
03-25
JavaScript实现的2048小游戏是一款基于HTML5、CSS3和原生JavaScript的轻量级游戏，它通过简单的数字合并规则提供了一种富有挑战性的娱乐方式。在这个项目中，我们将探讨JavaScript的核心概念以及如何利用它们来创建...
Javascript小游戏2048
12-14
JavaScript小游戏，网页版2048，支持键盘事件和鼠标事件。
JavaScript实现2048小游戏，我终于赢了一把
最新发布
2301_76348171的博客
03-29 1211
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里即可获取！！！！if(bool){bool为true才执行自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
Javascript编写2048小游戏
10-23
### Javascript编写2048小游戏知识点详解 #### 1. 游戏2048简介 2048是一款简单上手的数字拼图游戏。玩家通过上下左右滑动屏幕来移动板块上的数字格子，相同数字的格子在碰撞时会合并成它们的和。游戏的目标是创建...
vue实现2048小游戏功能思路详解
08-27
总结来说，使用Vue.js实现2048小游戏涉及到的主要知识点包括Vue的组件化思想、数据绑定、事件监听、计算逻辑实现（如移动合并算法）、矩阵旋转以及游戏状态管理。通过这个项目，开发者不仅可以提升Vue.js的实战技能...
Javascript实现的2048游戏
12-16
《JavaScript实现的2048游戏详解》 2048是一款广受欢迎的数字拼图游戏，玩家通过上下左右滑动屏幕，使相同数字的方块合并，目标是达到2048这个数字。本篇文章将深入探讨如何使用JavaScript语言实现2048游戏的完整...
html css js实现快递单打印_JS与HTML、CSS实现2048小游戏（六）
weixin_39960503的博客
11-29 230
在前面的五篇文章中，小编带大家完成了网页版2048小游戏的基本游戏逻辑。但是在游戏结束的gameover()方法中咱们只是简单的通过alert来弹出一些信息，这样的话只能出现下图的效果。这样的游戏，不管是设计者还是玩家都是十分难以接受的。所以咱们今天再来讲讲对于gameover界面的优化。在开始编写之前，大家可以去玩一玩原版本的手机游戏，看一下原版的游戏效果。在那个游戏中gameover...
网页版2048小游戏，纯JS开发，内含完整代码以及图片，初级web工程师适用
07-18
网页版2048小游戏，纯JS开发，内含完整代码以及图片，初级web工程师适用
2048. html+css+js实现网页版2048小游戏
07-11
2048. html + js + css实现网页版2048小游戏源码，直接下载运行index.html和2048.html即可。对于熟练练习JS和html以及css有很大帮助
2048小游戏——网页版
03-07
这是一个用js写的网页版2048游戏，实现2048游戏的基本功能。 比如：绘制网格、随机生成数字、动画移动数字、累计分数、重置游戏等。 我再代码中进行了非常详细的注释，相信有一点点基础的开发人员都能迅速看懂，快来试试吧！ 当然，大神还可以在这个文档的基础上对游戏进行改进，比如添加一些更炫酷的动画效果，自定义数字、文字、图像等。
HTML+JS实现2048小游戏demo
05-05
HTML+JS实现2048小游戏demo
javascript实现2048小游戏_V1.0.0
08-12
原生Js编写一款2048小游戏 涉及点： 鼠标上移、下移、左移、右移 鼠标释放之后移动方块,包括方块数字叠加 方块移动/叠加处理完成之后随机产生新的方块 判断是否没有可移动的方块了，提示游戏接受
js实现2048小游戏
10-22 224
这是学完javascript基础，编写的入门级web小游戏 游戏规则：在玩法规则也非常的简单，一开始方格内会出现2或者4等这两个小数字，玩家只需要上下左右其中一个方向来移动出现的数字，所有的数字就会想滑动的方向靠拢，而滑出的空白方块就会随机出现一个数字，相同的数字相撞时会叠加靠拢，然后一直这样，不断的叠加最终拼凑出2048这个数字就算成功。但是我们的程序没有终点。 一、HTML部分 ...
web前端练手小项目——使用js实现2048小游戏
代码海中一粒米
03-23 2636
实现的效果图： 计分规则：每合并一次增加两个分 游戏涉及到的文件： 实现的html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...
基于html的2048小游戏,【游戏系列】用js+html+css实现web端的2048小游戏
weixin_35626356的博客
05-30 285
1.html代码块overflow: hidden;此样式解决微信内置浏览器下拉问题分数：0重新开始2.css样式使用flex弹性布局@media all and (max-device-width: 400px)解决响应式布局.main{width: 400px;height: 400px;display: flex;justify-content: space-between;flex-wra...
How to create The popular game 2048 with TypeScript
qq_16450637的专栏
07-22 184
你会学到什么? 1 如何使用TypeScript语言和配置 2 使用ES6,7,8的新特性 3 Node的使用 4 如何组织代码结构和复用 5 使用GitHub管理你的代码     可以自己配置游戏的一些参数 ...
使用JavaScript实现2048游戏的思路与代码解析
"本文主要介绍了如何使用JavaScript实现2048小游戏，包括基本思路、主要逻辑和关键代码段。文章提到实现2048游戏的代码总共约300行，其中JavaScript、CSS和HTML各占一部分。项目还利用了underscore.js的template方法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值