基于HTML和JS的简单2048小游戏

最新推荐文章于 2024-10-15 17:32:53 发布
最新推荐文章于 2024-10-15 17:32:53 发布
阅读量3k 收藏 14
点赞数 4
分类专栏： js html 文章标签： 2048
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IT_DSJ2018/article/details/80487870
版权
js 同时被 2 个专栏收录
1 篇文章 0 订阅
订阅专栏
html
1 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<!-- saved from url=(0049)file:///E:/java/web_game2048/WebContent/2048.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>2048小游戏</title>
<script type="text/javascript">
var arr;
//初始化游戏页面，需要在表格中随机生成一个2,一个4
function init(){
    arr = new Array(4);
    for(i=0;i<arr.length;i++){
        arr[i]=[0,0,0,0];
    }
    var x1,x2,y1,y2;
    x1=Math.round(Math.random()*3);
    y1=Math.round(Math.random()*3);
    arr[x1][y1] =2;
    while(true){
        x2=Math.round(Math.random()*3);
        y2=Math.round(Math.random()*3);
        if(x1!=x2 || y1!=y2){
            arr[x2][y2] =4;
            break;
        }
    }
    display();
    show();

}
function show(){
    var count=0;
    for(i=0;i<arr.length;i++){
        for(j=0;j<arr.length;j++){
            count += arr[i][j];
            var num = arr[i][j];
            var td = document.getElementById(i+""+j);
            switch(num){
            case 2:
                td.style="background-color:#FFFFE1";
                break;
            case 4:
                td.style="background-color:#FFEFD1";
                break;
            case 8:
                td.style="background-color:#FEDFD5";
                break;
            case 16:
                td.style="background-color:#FFDEAD";
                break;
            case 32:
                td.style="background-color:#FFA07A";
                break;
            case 64:
                td.style="background-color:#F08080";
                break;
            case 128:
                td.style="background-color:#DB7093";
                break;
            case 256:
                td.style="background-color:#FF69B4";
                break;
            case 512:
                td.style="background-color:#DA70D6";
                break;
            case 1024:
                td.style="background-color:#FF4500";
                break;
            case 2048:
                td.style="background-color:#FF0000";
                break;
            default:
                td.style="background-color:#87CEFA";
                break;
            }
            if(num==2048){
                var p = document.getElementById("p5");
                p.innerHTML = "";
                p.innerHTML = "恭喜你！已经获得2048胜利！可以继续挑战4096！";         
            }
            if(num==4096){
                var p = document.getElementById("p5");
                p.innerHTML = "";
                p.innerHTML = "恭喜你！已经获得4096胜利！";    
            }

        }
    }
    var p = document.getElementById("p3");

    p.innerHTML = "";
    p.innerHTML = "Score :"+count;

}
function display(){
    for(i=0;i<arr.length;i++){
        for(j=0;j<arr.length;j++){
            //查找对应下标的元素
            var td = document.getElementById(i+""+j);

            //将对应的数据显示到元素中
            if(arr[i][j]!=0){
                //有效数据
                td.innerHTML = arr[i][j];
            }else{
                td.innerHTML = " ";
            }
        }
    }
}

window.onkeydown = function(){
    var code = event.keyCode;
    switch (code) {
    case 37://左
        onleft();
        show();
        break;
    case 38://上
        ontop();
        show();
        break;
    case 39://右
        onright();
        show();
        break;
    case 40://下
        onbottom();
        show();
        break;
    }
}


/**
* 当用户按下 ←
* @returns
*/
function onleft(){
    for(i=0;i<arr.length;i++){
        //1.    将每个数组中的有效数据 向左移动
        //1.1   创建一个临时数组, 用于存储当前行的有效数据
        var temp = new Array(0,0,0,0);
        //记录每次有效数据存储的位置
        var index = 0;
        for(j=0;j<arr.length;j++){
            if(arr[i][j]!=0){
                temp[index] = arr[i][j];
                index++;
            }
        }
        //2.    相邻相同数据, 相加 , 后续数据前移一位
        for(j=0;j<temp.length-1;j++){
            if(temp[j]==temp[j+1]){
                temp[j]*=2;
                //记录住第一个要被覆盖的下标
                var k = j+1;
                while(k<arr.length-1){
                    temp[k++] = temp[k];

                }
                //一旦产生合并 , 最后一个位置, 一定要赋值为0
                temp[temp.length-1] = 0;
            }
        }
        arr[i] = temp;
    }

    //3.    随机产生一个2/4 放在在一个空的位置
    random();
    //4.    显示
    display();
}
/**
* 当用户按下↑
*/
function ontop(){
    for(i=0;i<arr.length;i++){
        //1.    将每个数组中的有效数据 向上移动
        //1.1   创建一个临时数组, 用于存储当前列的有效数据
        var temp = new Array(0,0,0,0);
        //记录每次有效数据存储的位置
        var index = 0;
        //00  10  20  30
        for(j=0;j<arr.length;j++){
            if(arr[j][i]!=0){
                temp[index] = arr[j][i];
                index++;
            }
        }
        //2.    相邻相同数据, 相加 , 后续数据上移一位
        for(j=0;j<temp.length-1;j++){
            if(temp[j]==temp[j+1]){
                temp[j]*=2;
                //记录住第一个要被覆盖的下标
                var k = j+1;
                while(k<arr.length-1){
                    temp[k++] = temp[k];

                }
                //一旦产生合并 , 最后一个位置, 一定要赋值为0
                temp[temp.length-1] = 0;
            }
        }
        //arr[i] = temp;
        for(j=0;j<arr.length;j++){
                arr[j][i] = temp[j];
            }
    }

    //3.    随机产生一个2/4 放在在一个空的位置
    random();
    //4.    显示
    display();

}

function onbottom(){
    for(i=0;i<arr.length;i++){
        //1.    将每个数组中的有效数据 向上移动
        //1.1   创建一个临时数组, 用于存储当前列的有效数据
        var temp = new Array(0,0,0,0);
        //记录每次有效数据存储的位置
        var index = 3;
        //00  10  20  30
        for(j=3;j>=0;j--){
            if(arr[j][i]!=0){
                temp[index] = arr[j][i];
                index--;
            }
        }
        //2.    相邻相同数据, 相加 , 后续数据上移一位
        for(j=3;j>0;j--){
            if(temp[j]==temp[j-1]){
                temp[j]*=2;
                //记录住第一个要被覆盖的下标
                var k = j-1;
                while(k>0){
                    temp[k--] = temp[k];

                }
                //一旦产生合并 , 最后一个位置, 一定要赋值为0
                temp[0] = 0;
            }
        }
        //arr[i] = temp;
        for(j=3;j>=0;j--){
                arr[j][i] = temp[j];
            }
    }

    //3.    随机产生一个2/4 放在在一个空的位置 
    random();
    //4.    显示
    display();
}


function onright(){
    for(i=0;i<arr.length;i++){
        //1.    将每个数组中的有效数据 向左移动
        //1.1   创建一个临时数组, 用于存储当前行的有效数据
        var temp = new Array(0,0,0,0);
        //记录每次有效数据存储的位置
        var index = 3;
        for(j=3;j>=0;j--){
            if(arr[i][j]!=0){
                temp[index] = arr[i][j];
                index--;
            }
        }
        //2.    相邻相同数据, 相加 , 后续数据前移一位
        for(j=3;j>0;j--){
            if(temp[j-1]==temp[j]){
                temp[j]*=2;
                //记录住第一个要被覆盖的下标
                var k = j-1;
                while(k>0){
                    temp[k--] = temp[k];

                }
                //一旦产生合并 , 最后一个位置, 一定要赋值为0
                temp[0] = 0;
            }
        }
        arr[i] = temp;
    }

    //3.    随机产生一个2/4 放在在一个空的位置 
    random();
    //4.    显示
    display();
}

function random(){
    //1.    循环遍历所有数据, 查询是否存在0 , 不存在,则直接结束游戏!
    //  用于记录使用可以继续产生随机数字
    var flag = false;
    for(i=0;i<arr.length;i++){
        for(j=0;j<arr.length;j++){
            if(arr[i][j]==0){
                flag = true;
                break;
            }
        }
    }
    if(!flag){
        alert("兄弟, 游戏结束!!");
        return;
    }
    //产生一个随机位置
    var x,y;
    while(true){
        x = Math.round(Math.random()*3);
        y = Math.round(Math.random()*3);
        if(arr[x][y]==0){
            break;
        }
    }
    //产生一个随机数字
    while(true){
        var num = Math.round(Math.random()*6);
        if(num==2||num==4){
            arr[x][y] = num;
            break;
        }
    }


}
</script>
<style type="text/css">
div{
margin-top:30px;
width:900px;
margin:0 auto;
border:2px solid #666;
border-radius:5px;
background-color:#E0FFFF;
}
#p2{
margin:0 auto;
font-size:40px;
text-align:center;
}
table{
width:400px;
height:400px;
background-color:#F0FFFF;
border:1px solid #aaa;
text-align:center;
margin:0 auto;
border-radius:1%;
font-size:28px;
}
tr,td{
width:18%;
height:18%;
background-color:#87CEFA;
border:1px solid #ddd;
border-radius:2%;
}
#p1{
margin:0 auto;
text-align:center;
padding-bottom:50px;
}
body{
width:100%;
height:600px;
}
#p3{
width:90%;
display:inline-block;
height:40px;
font-size:22px;
text-align:right;
padding-right:40px;
margin-bottom:0;
}
input{
width:100px;
height:30px;
margin-right:80px;
}
#p4{
width:100%;
text-align:right;
margin-top:0;
}
#p5{
color:red;
text-weight:bold;
width:100%;
text-align:right;
margin-top:0;
}
</style>
</head>
<body onload="init()">
<div>
    <br>
    <p id="p2">2048游戏</p>
    <br>
    <hr>
    <br>
    <p id="p5"></p>
    <p id="p3">Score :6</p>
    <p id="p4"><input type="button" value="开始新游戏" onclick="init()"></p>
    <table>
    <tbody><tr><td id="00" style="background-color: rgb(135, 206, 250);"> </td><td id="01" style="background-color: rgb(135, 206, 250);"> </td><td id="02" style="background-color: rgb(135, 206, 250);"> </td><td id="03" style="background-color: rgb(135, 206, 250);"> </td></tr>
    <tr><td id="10" style="background-color: rgb(255, 255, 225);">2</td><td id="11" style="background-color: rgb(135, 206, 250);"> </td><td id="12" style="background-color: rgb(135, 206, 250);"> </td><td id="13" style="background-color: rgb(255, 239, 209);">4</td></tr>
    <tr><td id="20" style="background-color: rgb(135, 206, 250);"> </td><td id="21" style="background-color: rgb(135, 206, 250);"> </td><td id="22" style="background-color: rgb(135, 206, 250);"> </td><td id="23" style="background-color: rgb(135, 206, 250);"> </td></tr>
    <tr><td id="30" style="background-color: rgb(135, 206, 250);"> </td><td id="31" style="background-color: rgb(135, 206, 250);"> </td><td id="32" style="background-color: rgb(135, 206, 250);"> </td><td id="33" style="background-color: rgb(135, 206, 250);"> </td></tr>
    </tbody></table>
    <br>
    <hr>
    <p id="p1">游戏规则：使用← ↑ → ↓ 操作，相邻相同的数字会相加，当和为2048时，游戏胜利！</p>
    </div>

</body></html>
码农写笔记
关注
专栏目录
js280行代码写2048
05-12 4196
2048 原作者就是用Js写的，一直想尝试，但久久未动手。 昨天教学生学习JS代码。不妨就做个有趣的游戏好了。2048这么火，是一个不错的选择。 思路： 1. 数组 ，2维数组4x4 2. 移动算法，移动后有数字的对齐，无数字（我用的0，但不显示）补齐。 移动前 移动后（注意程序合并了第一行2个2，并产生了新的2） 移动算法
基于html的web开发的小游戏，适合初学者
11-16
基于web开发的的小游戏，适合初学者.简单，实用。附带软件
2048 Web游戏 基于HTML+CSS+JavaScript
菜菜菜菜鸟の成长记
01-24 3134
代码如下：如果需要源码打包资源 我已经上传到资源里了 大家可以去下载  下载完如果觉得不错 请给好评哟亲 var btn = document.getElementById("id1"); function init(){ var oTable = document.getElementById("mytab"); var myrows= oTable.r
扫雷 HTML版，摸鱼时写的小游戏
最新发布
MOWENRAN的博客
10-15 245
在工作摸鱼时，用html写的一个扫雷小游戏。可以记分，标记💣。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>扫雷游戏</title> <style&gt
基于HTML+JS实现的简单2048小游戏
m0_72702170的博客
09-15 155
基于HTML+JS实现的简单2048小游戏。
分享几个令人震撼的JS和HTML5游戏
网站开发初中级代码参考-转载
06-27 205
或许你对网页游戏仅仅停留在Flash的时代，认为只有Flash才能做出非常绚丽的游戏特效。那么今天就打破大家的这个观念，一起来看看用Javascript和HTML5实现的网页游戏，这些游戏个人认为做得已经非常棒了，感谢这些游戏的作者。 1、Javascript坦克大战游戏 坦克大战是一款非常经典的休闲小游戏，相信很多朋友都玩过，但是Javascript重写的坦克大战你可能没有见过哦...
小程序版2048小游戏-项目源码-基于微信小程序开发框架的小游戏
03-27
此款小游戏采用了模块化的设计思路，将游戏逻辑与界面渲染分离，保证了代码的可读性和可维护性。前端使用了简洁明了的HTML和CSS技术，结合微信小程序框架，实现了流畅的动画效果和响应式布局。后端则采用了高效的...
HTML+JS实现2048小游戏demo
05-05
HTML+JS实现的2048小游戏是一款基于网页的数字拼图游戏，它结合了HTML的结构、CSS的样式和JavaScript的动态交互功能。在这个游戏中，玩家需要通过上下左右滑动棋盘，使得相同数字的方块合并成更大的数字，最终目标是...
基于JavaScript的2048小游戏
05-08
本篇文章将深入探讨如何使用JavaScript语言来实现这款经典的小游戏。 一、基本概念与原理 1. 游戏界面：2048游戏通常使用一个4x4的网格作为游戏界面，每个格子可以放置一个数字方块。游戏界面可以通过HTML元素（如...
基于JS制作的2048小游戏
06-08
这是一个基于前端html，css，Js制作的一个2048小游戏..........................................................................................................................................................
js+html版2048小游戏
12-12
javsascriptyu与HTML/css做的网页小游戏，比较初级适合在校学习的学生，
2048小游戏html+css代码
weixin_48299146的博客
07-21 2157
废话不多说直接上代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" hr
用javascript实现一个2048游戏
weixin_34418883的博客
05-01 145
早就想自己写一个2048游戏了，昨晚闲着没事，终于写了一个 如下图，按方向键开始玩吧。 如果觉得操作不方便，请直接打开链接玩吧： http://gujianbo.1kapp.com/2048/2048.html 附上源代码链接：https://github.com/gujianbo/js2048 个人博客地址：http://gujianbo.1kapp.com/ 新浪微...
做一个HTML小游戏之五子棋
chenggenb的博客
10-09 1959
五子棋是一种古老而受欢迎的棋类游戏，它不仅可以提供娱乐，还能锻炼思维能力和战略策划能力。无论是在家庭中与朋友对战，还是参加专业比赛，五子棋都是一项有趣且具有挑战性的游戏。
js写2048小游戏
Alice_yo的博客
11-23 434
首先页面布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="demo1.css"> </head> <bo...
html5之小游戏2048的实现
Gr0Ve的博客
04-29 2943
一直以来对h5游戏这一块很感兴趣，但苦于现在技术渣渣，也没有合适的项目可以给我练练手，机缘巧合之下看到了2048这款游戏，作为风靡一时的小游戏，当初也是觉得这个很有意思。今天就分享一下如何实现2048这个游戏。话不多说，
基于linux环境下的2048小游戏2048.zip
04-15
前端开发：HTML、CSS、JavaScript等用于构建网页和Web应用程序的技术。 后端开发：涉及服务器端编程、API开发、数据库集成等技术。 移动应用开发：包括iOS开发（使用Swift或Objective-C）和Android开发（使用Java或...
基于jQuery的2048小游戏设计（网页版）
apzlm9110的博客
11-09 382
上周模仿一个2048小游戏，总结一下自己在编写代码的时候遇到的一些坑。 游戏规则：省略，我想大部分人都玩过，不写了 源码地址：https://github.com/xinhua6/2048game.git 文件结构： 2048.css 编写游戏样式 index.html 页面结构内容 main2048.js 游戏主逻辑文件，包含初始化格子，随机生成2个数字 game.j...
【总结篇】js编写的2048小游戏开发（上：思路）
SuperZZQ_的博客
09-13 7278
2048是大家都熟悉的一款魔性小游戏，其操作简单，却极其有效地杀时间。本篇将详细讲解如何构建这款小游戏的开发思路、如何根据玩法进一步分析设计编程结构，适合有一定html、css、js、jquery语言基础的读者阅读。   一.游戏试玩       游戏玩法大家都很熟悉，每次可以选择上下左右中的一个方向滑动一次，所有数字方块都会向滑动的方向靠拢，每次滑动后空白的地方随机出现一个数字方块2或...
2048小游戏实验报告、代码
12-30
该资源包含完整的实验报告，完整的代码，运行无错，简单易懂
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值