简单版的2048游戏

最新推荐文章于 2024-05-06 17:11:44 发布
最新推荐文章于 2024-05-06 17:11:44 发布
阅读量424 收藏 2
点赞数 1
分类专栏： 小游戏 文章标签： js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44103002/article/details/87888839
版权

效果图：

在这里插入图片描述
这个简单的游戏是由html和js实现的。大家应该都玩过2048这款游戏，也清楚是由四行四列组成，一共十六格。实现思路：定义数组，值是1～16。定义随机方法，随机在十六个格子中的空格子生成值为二的格子，通过定义键盘上下左右事件控制相同抵消相加，不相同则移动。
代码实现：
Html：

 <div class="container">
        <div class="row">
            <div class="fritter" style="background:#ae937a;"id="x1"></div>
            <div class="fritter" style="background:#ae937a;"id="x2"></div>
            <div class="fritter" style="background:#ae937a;"id="x3"></div>
            <div class="fritter" style="background:#ae937a;"id="x4"></div>
        </div>  
        <div class="row">
            <div class="fritter" style="background:#ae937a;"id="x5"></div>
            <div class="fritter" style="background:#ae937a;"id="x6"></div>
            <div class="fritter" style="background:#ae937a;"id="x7"></div>
            <div class="fritter" style="background:#ae937a;"id="x8"></div>
        </div>  
        <div class="row">
            <div class="fritter" style="background:#ae937a;"id="x9"></div>
            <div class="fritter" style="background:#ae937a;"id="x10"></div>
            <div class="fritter" style="background:#ae937a;"id="x11"></div>
            <div class="fritter" style="background:#ae937a;"id="x12"></div>
        </div>  
        <div class="row">
            <div class="fritter" style="background:#ae937a;"id="x13"></div>
            <div class="fritter" style="background:#ae937a;"id="x14"></div>
            <div class="fritter" style="background:#ae937a;"id="x15"></div>
            <div class="fritter" style="background:#ae937a;"id="x16"></div>
        </div>  
    </div>

css:

* {
    margin:0 0;
    padding:0 0;
    font-family:FangSong;
    font-size:35px;
}
.container{
    width:370px;
    height:370px;
    background:#beb0a3;
}

.row {
    width:370px;
    height:90px;
}
.fritter {
    width:80px;
    height:80px;
    float:left;
    margin-top:10px;
    margin-left:10px;
    border-radius:5px;
}

Js:
页面一打开就加载，调用随机生成方法。

 //加载事件
        window.onload = function () {
            RandomExtraction(0);
        }

定义数组，分为十六格，随机生成值为2的格子。

        //定义数组，分为十六格
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
        //var arr1 = [2];
        function RandomExtraction(k) {
            if (k == 0) {
                for (var i = 1; i < 4; i++) {
                    //获取随机数
                    var index = Math.floor((Math.random() * arr.length));
                    //获取值
                    var text = document.getElementById("x" + arr[index]).innerHTML;
                    //判断值是否为空
                    if (text == "") {
                        //获取格子编号
                        var idx2 = document.getElementById("x" + arr[index]);
                        // var index1 = Math.floor((Math.random() * arr1.length));
                        //格子值为2
                        idx2.innerHTML = "2";
                        //样式
                        idx2.style = "background:#00ffff;text-align:center;line-height:80px;";
                    } else {
                        continue;
                    }
                }
            } else {

            }
        }

定义键盘事件，通过上下左右键控制格子移动。

 document.onkeydown = function (e) {
            e = window.event || e;
            switch (e.keyCode) {
                case 37: //左键
                    //currentCol--;
                    changeItem(e.keyCode);
                    break;
                case 38: //向上键
                    //currentLine--;
                    changeItem(e.keyCode);
                    break;
                case 39: //右键
                    //currentCol++;
                    changeItem(e.keyCode);
                    break;
                case 40: //向下键
                    //currentLine++;
                    changeItem(e.keyCode);
                    break;
                default:
                    break;
            }
        }
        //方向键调用
        function changeItem(k) {
            if (k == 37) {//左键
                //按一下左键，全部向左边移动，相同的合并数字相加,
                LeftKeyMovement(4);
                LeftKeyMovement(8);
                LeftKeyMovement(12);
                LeftKeyMovement(16);
                RandomExtraction(0);
            }
            if (k == 38) {//上键
                KeyShift(13);
                KeyShift(14);
                KeyShift(15);
                KeyShift(16);
                RandomExtraction(0);
            }
            if (k == 39) {//右键
                RightClickMovement(1);
                RightClickMovement(5);
                RightClickMovement(9);
                RightClickMovement(13);
                RandomExtraction(0);
                
            }
            if (k == 40) {//下键
                DownKeyMovement(1);
                DownKeyMovement(2);
                DownKeyMovement(3);
                DownKeyMovement(4);
                RandomExtraction(0);
            }
        }

每次移动要判断以下情况：
//1 2
//1 3
//1 4
//2 3
//2 4
//3 4
//1 2 3 12、3 1、23 1、2、3
//1 2 4 12、4 1、24 1、2、4
//1 3 4 13、4 1、34 1、3、4
//2 3 4 23、4 2、34 2、3、4
//1 2 3 4 (12、34) (1、23 、4) (1、2、34) (12、3、4)
键移动，相同相加，不相同则移动。一行每个相差一，列每个相差四，向右移动，以第一列开始向右移动，移动一格子就加一了，左移则是相反，是以最后一列开始，移动一格子就减一了。向下移动，以第一行开始，移动一格子就加四了，上移则是减四。
// 1 2 3 4
// 5 6 7 8
// 9 10 11 12
//13 14 15 16
因为上下左右键基本相同，就不一一展示，以右键为例。
右键：

        //右键移动
        function RightClickMovement(k) {
            var txtH1 = "";
            var txtH2 = "";
            var txtH3 = "";
            var txtH4 = "";
            //循环获取格子值
            for (var i = k; i < k+4; i++) {
                if (i==k) {
                     txtH1 = document.getElementById("x"+i).innerHTML;
                }
                if (i==k+1) {
                     txtH2 = document.getElementById("x" + i).innerHTML;
                }
                if (i ==k + 2) {
                    txtH3 = document.getElementById("x" + i).innerHTML;
                }
                if (i == k + 3) {
                    txtH4 = document.getElementById("x" + i).innerHTML;
                }
            }
            //第一个有值，其它三个没值 1
            if (txtH4 == "" && txtH3 == "" && txtH2 == "" && txtH1 != "") {
                //调用方法
                EmptyingStyle(k);//清空样式
                AddStyle(k+3, txtH1);//添加样式
            }
            //第二个有值，其它三个没值 2
            if (txtH4 == "" && txtH3 == "" && txtH2 != "" && txtH1 == "") {
                EmptyingStyle(k+1);
                AddStyle(k+3, txtH2);
            }
            //第三个有值，其它三个没值 3
            if (txtH4 == "" && txtH3 != "" && txtH2 == "" && txtH1 == "") {
                EmptyingStyle(k + 2);
                AddStyle(k + 3, txtH3);
            }
            //4 3
            if (txtH4 != "" && txtH3 != "" && txtH2 == "" && txtH1 == "") {
                if (txtH4 == txtH3) {
                    EmptyingStyle(k + 2);
                    AddStyle(parseInt(k + 3), parseInt(txtH3*2));
                }
            }
            //2 1
            if (txtH4 == "" && txtH3 == "" && txtH2 != "" && txtH1 != "") {
                if (txtH1 == txtH2) {
                    EmptyingStyle(k);
                    EmptyingStyle(k + 1);
                    AddStyle(parseInt(k + 3), parseInt(txtH1 * 2));
                } else {
                    EmptyingStyle(k);
                    EmptyingStyle(k + 1);
                    AddStyle(parseInt(k + 3), txtH2);
                    AddStyle(parseInt(k + 2), txtH1);
                }
            }
            //3 1
            if (txtH4 == "" && txtH3 != "" && txtH2 == "" && txtH1 != "") {
                if (txtH3 == txtH1) {
                    EmptyingStyle(k);
                    EmptyingStyle(k + 2);
                    AddStyle(parseInt(k + 3), parseInt(txtH1 * 2));
                } else {
                    EmptyingStyle(k);
                    EmptyingStyle(k + 2);
                    AddStyle(parseInt(k + 3), txtH3);
                    AddStyle(parseInt(k + 2), txtH1);
                }
            }
            //4 1
            if (txtH4 != "" && txtH3 == "" && txtH2 == "" && txtH1 != "") {
                if (txtH4 == txtH1) {
                    EmptyingStyle(k);
                    EmptyingStyle(k + 3);
                    AddStyle(parseInt(k + 3), parseInt(txtH1 * 2));
                } else {
                    EmptyingStyle(k);
                    AddStyle(parseInt(k + 2), txtH1);
                }
            }
            //3 2
            if (txtH4 == "" && txtH3 != "" && txtH2 != "" && txtH1 == "") {
                if (txtH3 == txtH2) {
                    EmptyingStyle(k+1);
                    EmptyingStyle(k + 2);
                    AddStyle(parseInt(k + 3), parseInt(txtH3 * 2));
                } else {
                    EmptyingStyle(k + 1);
                    EmptyingStyle(k + 2);
                    AddStyle(parseInt(k + 3), txtH3);
                    AddStyle(parseInt(k + 2), txtH2);
                }
            }
            //4 2
            if (txtH4 != "" && txtH3 == "" && txtH2 != "" && txtH1 == "") {
                if (txtH4 == txtH2) {
                    EmptyingStyle(k + 1);
                    EmptyingStyle(k + 3);
                    AddStyle(parseInt(k + 3), parseInt(txtH4 * 2));
                } else {
                    EmptyingStyle(k + 1);
                    AddStyle(parseInt(k + 2), txtH2);
                }
            }    
            //4 3 2 
            if (txtH4 != "" && txtH3 != "" && txtH2 != "" && txtH1 == "") {
                if (txtH4 == txtH3) {//2、34
                    EmptyingStyle(k + 1);
                    EmptyingStyle(k + 2);
                    EmptyingStyle(k + 3);
                    AddStyle(parseInt(k + 3), parseInt(txtH4 * 2));
                    AddStyle(parseInt(k + 2), txtH2);
                } else {
                    if (txtH3 == txtH2) {//23、4
                        EmptyingStyle(k + 1);
                        EmptyingStyle(k + 2);
                        AddStyle(parseInt(k + 2), parseInt(txtH3 * 2));
                    }
                }

            }
            //1 2 3,
            if (txtH4 == "" && txtH3 != "" && txtH2 != "" && txtH1 != "") {
                if (txtH3 == txtH2) {//1、23
                    EmptyingStyle(k);
                    EmptyingStyle(k + 1);
                    EmptyingStyle(k + 2);
                    AddStyle(parseInt(k + 3), parseInt(txtH3 * 2));
                    AddStyle(parseInt(k + 2),txtH1);
                } else {
                    if (txtH2 == txtH1) {//12、3
                        EmptyingStyle(k);
                        EmptyingStyle(k + 1);
                        EmptyingStyle(k + 2);
                        AddStyle(parseInt(k + 3), txtH3);
                        AddStyle(parseInt(k + 2), parseInt(txtH2 * 2));
                    }
                }
                if (txtH3 != txtH2 && txtH2 != txtH1) {//1、2、3
                    EmptyingStyle(k);
                    EmptyingStyle(k + 1);
                    EmptyingStyle(k + 2);
                    AddStyle(parseInt(k + 3), txtH3);
                    AddStyle(parseInt(k + 2), txtH2);
                    AddStyle(parseInt(k + 1), txtH1);
                }
            }
            //1 2 4,
            if (txtH4 != "" && txtH3 == "" && txtH2 != "" && txtH1 != "") {
                if (txtH4 == txtH2) {//1、24
                    EmptyingStyle(k);
                    EmptyingStyle(k + 1);
                    EmptyingStyle(k + 3);
                    AddStyle(parseInt(k + 3), parseInt(txtH4 * 2));
                    AddStyle(parseInt(k + 2), txtH1);
                } else {
                    if (txtH2 == txtH1) {//12、4
                        EmptyingStyle(k);
                        EmptyingStyle(k + 1);
                        AddStyle(parseInt(k + 2), parseInt(txtH2 * 2));
                    }
                }
                if (txtH4 != txtH2 && txtH2 != txtH1) {//1、2、4
                    EmptyingStyle(k);
                    EmptyingStyle(k + 1);
                    AddStyle(parseInt(k + 2), txtH2);
                    AddStyle(parseInt(k + 1), txtH1);

                }

            }
            //1 3 4,
            if (txtH4 != "" && txtH3 != "" && txtH2 == "" && txtH1 != "") {
                if (txtH4 == txtH3) {//1、34
                    EmptyingStyle(k);
                    EmptyingStyle(k + 2);
                    EmptyingStyle(k + 3);
                    AddStyle(parseInt(k + 3), parseInt(txtH4 * 2));
                    AddStyle(parseInt(k + 2), txtH1);
                } else {
                    if (txtH3 == txtH1) {//13、4
                        EmptyingStyle(k);
                        EmptyingStyle(k + 2);
                        AddStyle(parseInt(k + 2), parseInt(txtH3 * 2));
                    }
                }
                if (txtH4 != txtH3 && txtH3 != txtH1) {//1、3、4
                    EmptyingStyle(k);
                    EmptyingStyle(k + 2);
                    AddStyle(parseInt(k + 2), txtH3);
                    AddStyle(parseInt(k + 1), txtH1);

                }
            }
            //1 2 3 4,
            if (txtH4 != "" && txtH3 != "" && txtH2 != "" && txtH1 != "") {
                if (txtH4 == txtH3) {//1、2、34
                    if (txtH2 == txtH1) {//12、34
                        EmptyingStyle(k);
                        EmptyingStyle(k + 1);
                        EmptyingStyle(k + 2);
                        EmptyingStyle(k + 3);
                        AddStyle(parseInt(k + 3), parseInt(txtH4 * 2));
                        AddStyle(parseInt(k + 2), parseInt(txtH2 * 2));
                    } else {//1、2、34
                        EmptyingStyle(k);
                        EmptyingStyle(k + 1);
                        EmptyingStyle(k + 2);
                        EmptyingStyle(k + 3);
                        AddStyle(parseInt(k + 3), parseInt(txtH4 * 2));
                        AddStyle(parseInt(k + 2), txtH2);
                        AddStyle(parseInt(k + 1), txtH1);
                    }
                } else {
                    if (txtH3 == txtH2) {//1、23、4
                        EmptyingStyle(k);
                        EmptyingStyle(k + 1);
                        EmptyingStyle(k + 2);
                        AddStyle(parseInt(k + 2), parseInt(txtH3 * 2));
                        AddStyle(parseInt(k + 1), txtH1);
                    } else {
                        if (txtH2 == txtH1) {//12、3、4
                            EmptyingStyle(k);
                            EmptyingStyle(k + 1);
                            AddStyle(parseInt(k + 1), parseInt(txtH2 * 2));
                        }
                    }
                }
            }
        }

添加样式：

        //添加样式
        function AddStyle(k,t) {
            var id = document.getElementById("x" + k);
            id.innerHTML = t;
            id.style = "background:#00ffff;text-align:center;line-height:80px;";
        }

清空样式：

        //清空样式
        function EmptyingStyle(k) {
            var id = document.getElementById("x"+k);
            id.innerHTML = "";
            id.style = "background:#ae937a;";
        }
人家呢
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2048简约版
05-04
最经典的2048、最简约的2048，期待您的加入。
2048极简版
m0_59291762的博客
05-31 462
极简版2048，qt初学初学者可看，有错之处多多包含
Pygame简易版2048小游戏：超详细解说，看完还不会可以剁手了（附完整源码）
xy258009的博客
01-30 7743
导语 哈喽！大家好，我是栗子，感谢大家的支持！ 新的一天，新气象，程序猿们的日常开始敲敲敲，改改改——今天给大家来一款简单的小游戏！ 2048小游戏——准确的来说确实是一个简单版本的！ 呐呐呐 ，主要是担心很多小伙伴儿直接上界面版本的看不懂，所以做了这款简单的2048，先看这 篇简单版本的吧！ 正文 为了搞懂这个游戏的规则，小编去直接下载了一款2048的小游戏，上手玩了一波！ 然后.........完全停不下来！23333~ 玩法：用手指或键盘上下左右滑动，将两个相同的数字..
2048简易版
weixin_45484306的博客
10-10 233
import java.util.Random; import java.util.Scanner; public class myGame { static char[][] panel =new char[6][6]; static Random ran = new Random(); static boolean hasMoved = false; static int score = 0;...
html5简单2048小游戏源代码
06-06
完整的一套HTML5 2048代码 可直接使用 键盘操控游戏 很方便 适合学习 娱乐 并且恶意直接引用 欢迎下载
简单实现C语言2048游戏
08-27
主要为大家详细介绍了简单实现C语言2048游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2048小游戏C语言实现代码
08-27
主要为大家详细介绍了2048小游戏C语言实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
简易C语言2048游戏小游戏
03-25
简易C语言2048游戏小游戏
小游戏：2048简化版
03-17
这个Python代码实现了一个简单而有趣的2048游戏框架，让你可以在自己的计算机上畅玩。游戏的目的是通过上下左右移动方块，使得相同数字的方块碰撞合并，最终创建出一个2048的方块。 游戏的界面简洁明了，基于文本的...
简易matlab版2048
05-11
简单的matlab实现2048，配合GUI界面，玩起来更容易
简单的2048游戏编程
05-26
使用C语言编写的一个简易版2048小游戏，供初学者参考。
简易2048游戏代码
09-22
简易2048游戏代码分享。
一个简易的2048游戏
jslang的专栏
12-20 2701
2048 #box { width: 440px; height: 440px; background-color: #666666; border: 5px solid #993300; border-radius: 20px; padding: 10px; margin: 20px auto; } #box div { float: left; width: 90px;
2048游戏简单实现
Aimee_ice的博客
04-09 6974
前言 最近突然心血来潮想写一个网页小游戏，我看网上有很多人推荐写2048来练练手，遂开始写。目前为止，基本功能已经实现，只是没有添加相应的动画效果，待以后有机会补上（其实我就是动画这块太菜了 T_T） 前方长文预警！！！ 游戏截图 项目结构 这个项目结构挺简单的，应该也都看得懂，在此仅对js文件夹进行描述，其余的就不再赘述啦 （main.js是入口文件，move.js主...
从零开始的2048（标准C语言）（简单版）
weixin_45050225的博客
08-05 294
在翻以前的代码时发现了一个2048的小练习 在这通过这篇博客分享给大家 2048功能 这个游戏的玩法就是左右上下移动，遇到两个相同的数字将其合并生成两数字之和的新数字，数字满盘了游戏就结束。 #include <stdio.h> #include <stdlib.h> #include <stdbool.h> #include <time.h> #i...
jquery项目 html使用export import方式调用模块
最新发布
LlanyW的专栏
05-06 212
jquery的老项目，引入vue3, 需要方便使用export, import方式引用一些常用的方法与常量。
2048python简易版小游戏
12-19
以下是一个简单的2048 Python小游戏的实现，你可以参考一下： ```python import random # 初始化游戏面板 def init_board(n): board = [[0] * n for i in range(n)] return board # 在游戏面板上随机生成一个新...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值