web前端之2048网页版游戏

最新推荐文章于 2025-06-09 16:30:43 发布
最新推荐文章于 2025-06-09 16:30:43 发布
阅读量1.8k 收藏 9
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： html5 jquery javascript css3
原文链接：https://www.cnblogs.com/-lizi/p/8431030.html

2048游戏

最近突发奇想想写个网页版游戏，然后还没写完，调bug时就看见个比较漂亮的2048代码，忍不住想分享给大家。

在他基础上，我稍微修改了下样式和一些小操作

效果图片

在这里插入图片描述在这里插入图片描述

效果

刷新
正式玩
再玩一次
关闭

代码

index.html

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>2048小游戏</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/game.js"></script>
</head>
<body>

<div class="container">
    <div class="main">
        <div class="gameName">2048小游戏</div>
        <div class="maxScore">最高分：
            <span id="maxScore">1345612</span>
        </div>
        <div class="gameBody">
            <div class="row">
                <div class="item emptyItem x0y0" x="0" y="0"></div>
                <div class="item emptyItem x0y1" x="0" y="1"></div>
                <div class="item emptyItem x0y2" x="0" y="2"></div>
                <div class="item emptyItem x0y3" x="0" y="3"></div>
            </div>
            <div class="row">
                <div class="item emptyItem x1y0" x="1" y="0"></div>
                <div class="item emptyItem x1y1" x="1" y="1"></div>
                <div class="item emptyItem x1y2" x="1" y="2"></div>
                <div class="item emptyItem x1y3" x="1" y="3"></div>
            </div>
            <div class="row">
                <div class="item emptyItem x2y0" x="2" y="0"></div>
                <div class="item emptyItem x2y1" x="2" y="1"></div>
                <div class="item emptyItem x2y2" x="2" y="2"></div>
                <div class="item emptyItem x2y3" x="2" y="3"></div>
            </div>
            <div class="row">
                <div class="item emptyItem x3y0" x="3" y="0"></div>
                <div class="item emptyItem x3y1" x="3" y="1"></div>
                <div class="item emptyItem x3y2" x="3" y="2"></div>
                <div class="item emptyItem x3y3" x="3" y="3"></div>
            </div>
        </div>
        <div class="gameRule">请按上、下、左、右键进行操作</div>
        <div class="scoreAndRefresh">
            <div class="gameScore">得分：<span id="gameScore">0</span> 分</div>
            <button type="button" class="btn btn-danger refreshBtn">
                <span class="glyphicon glyphicon-repeat"><img src="image/refresh.jpg" alt=""></span>
            </button>
        </div>
<!------------------------gameover----------------------------->
        <div class="modal fade" id="gameOverModal" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-tittle" id="myModalLabel">2048小游戏</h4>
                    </div>
                    <div class="modal-body">
                        Game Over!
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-info" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn  btn-danger refreshBtn">再玩一次</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script>
    $('.btn-info').click(function(){
        $('.modal-dialog').css({'display':'none'});
    });
    $('.refreshBtn').click(function(){
        $('.modal-dialog').css({'display':'none'});
    });
</script>
</html>

bootstrap.css


        * {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
        }
        body {
            background: lavenderblush;
        }
        .container {
            margin-top: 30px;
        }
        .main {
            width: 1000px;
            height: 100%;
            margin: 0 auto;
            overflow: hidden;
            text-align: center;
        }
        .main .gameName {
            font-size: 35px;
            font-weight: bold;
        }
        .main .maxScore {
            font-size: 20px;
        }
        .main .maxScore span {
            color: red;
            font-weight: bold;
        }
        .main .gameBody {
            width: 400px;
            height: 400px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 15px;
            background: #bbada0;
            border-radius: 8px;
        }
        .main .gameBody .row {
            display: flex;
            justify-content: space-between;
        }
        .main .gameBody .row .item {
            width: 80px;
            height: 80px;
            border-radius: 10px;
            background: #ccc0b3;
            text-align: center;
            line-height: 80px;
            font-size: 30px;
            font-weight: bold;
            color: #666;
            font-family: "microsoft yahei";
        }
        .main .gameRule {
            font-size: 20px;
            font-weight: bold;
            margin-top: 15px;
        }
        .main .gameScore {
            font-size: 20px;
            font-weight: bold;
            margin-top: 15px;
        }
        .main .gameScore span {
            color: red;
            font-size: 30px;
        }
        .main .scoreAndRefresh {
            display: flex;
            justify-content: space-around;
            width: 280px;
            margin: 0 auto;
        }
        .main .scoreAndRefresh .refreshBtn {
            height: 30px; margin-top: 22px;
        }
        .modal {
            margin-top: 7%;

        }
        .modal .modal-header h4 {
            text-align: left;
            font-weight: bold;
        }
        .modal .modal-dialog {
            width: 300px;
            height: 100px;
            margin: 0 auto;

            background:#eee;
            border-radius: 10px;
            opacity: 0.9;

            position: absolute;
            top:30%;
            left: 40%;

            display: none;

        }
        .btn-danger img{
            cursor: pointer;
            width: 25px;
            height: 25px;
            border-radius: 5px;
        }
        .modal-footer .btn{
            cursor: pointer;
            width: 70px;
            height: 30px;
            border-radius: 5px;
            text-align: center;
            color: #fff;
        }
        .modal-footer .btn-info{
            background:	#008B8B;
        }

        .modal-footer .btn-info:hover{
            font-weight: bold;
            background:	#2F4F4F;
        }

        .modal-footer  .refreshBtn{
            background:	 #8B0000;
        }
        .modal-footer .refreshBtn:hover{
            font-weight: bold;
            background:	#CD5C5C;
        }

        .modal .modal-body {
            font-size: 18px;
            font-weight: bold;
            color: red;
        }
        #resetMaxScore {
            color: #fff;
            height: 30px;

        }

game.js

$(function(){
        //是否产生新元素
        var isNewRndItme = false;
        var gameScore = 0;
        //最高分
        var maxScore = 0;

        if(localStorage.maxScore) {
            maxScore = localStorage.maxScore - 0;
        }else {
            maxScore = 0;
        }


        //游戏初始化
        gameInit();

        //上、下、左、右监听事件
        $('body').keydown(function(e) {
            switch (e.keyCode) {
                case 37:
                    // left
                    console.log('left');
                    isNewRndItme = false;
                    isGameOver();
                    break;
                case 38:
                    // up
                    console.log('up');
                    isNewRndItme = false;
                    move('up');
                    isGameOver();
                    break;
                case 39:
                    // right
                    console.log('right');
                    isNewRndItme = false;
                    move('right');
                    isGameOver();
                    break;
                case 40:
                    // down
                    console.log('down');
                    isNewRndItme = false;
                    move('down');
                    isGameOver();
                    break;
            }
        });


        function refreshGame(){
            var items = $('.gameBody .row .item');
            for(var i = 0; i < items.length; i++) {
                items.eq(i).html('').removeClass('nonEmptyItem').addClass('emptyItem');
            }
            gameScore = 0;
            //分数清零
            $('#gameScore').html(gameScore);
            //随机生成两个新元素
            newRndItem();
            newRndItem();
            //刷新颜色
            refreshColor();
            $('#gameOverModal').modal('hide');
        }


        function getSideItem(currentItem, direction) {
            //当前元素的位置
            var currentItemX = currentItem.attr('x') - 0;
            var currentItemY = currentItem.attr('y') - 0;

            //根据方向获取旁边元素的位置
            switch (direction) {
                case 'left':
                    var sideItemX = currentItemX;
                    var sideItemY = currentItemY - 1;
                    break;
                case 'right':
                    var sideItemX = currentItemX;
                    var sideItemY = currentItemY + 1;
                    break;
                case 'up':
                    var sideItemX = currentItemX - 1;
                    var sideItemY = currentItemY;
                    break;
                case 'down':
                    var sideItemX = currentItemX + 1;
                    var sideItemY = currentItemY;
                    break;
            }
            //旁边元素
            var sideItem = $('.gameBody .row .x' + sideItemX + 'y' + sideItemY);
            return sideItem;
        }


        function itemMove(currentItem, direction) {

            var sideItem = getSideItem(currentItem, direction);

            if(sideItem.length == 0) {//当前元素在最边上
                //不动

            }else if(sideItem.html() == '') { //当前元素不在最后一个且左（右、上、下）侧元素是空元素
                sideItem.html(currentItem.html()).removeClass('emptyItem').addClass('nonEmptyItem');
                currentItem.html('').removeClass('nonEmptyItem').addClass('emptyItem');
                itemMove(sideItem, direction);
                isNewRndItme = true;

            }else if(sideItem.html() != currentItem.html()) {//左（右、上、下）侧元素和当前元素内容不同
                //不动

            }else {//左（右、上、下）侧元素和当前元素内容相同
                //向右合并
                sideItem.html((sideItem.html() - 0) * 2);
                currentItem.html('').removeClass('nonEmptyItem').addClass('emptyItem');
                gameScore += (sideItem.text() - 0) * 10;
                $('#gameScore').html(gameScore);
                // itemMove(sideItem, direction);
                maxScore = maxScore < gameScore ? gameScore : maxScore;
                $('#maxScore').html(maxScore);
                localStorage.maxScore = maxScore;
                isNewRndItme = true;
                return;
            }
        }


        function move(direction){
            //获取所有非空元素
            var nonEmptyItems = $('.gameBody .row .nonEmptyItem');
            //如果按下的方向是左或上，则正向遍历非空元素
            if(direction == 'left' || direction == 'up') {
                for(var i = 0; i < nonEmptyItems.length; i++) {
                    var currentItem = nonEmptyItems.eq(i);
                    itemMove(currentItem, direction);
                }
            }else if(direction == 'right' || direction == 'down') {//如果按下的方向是右或下，则反向遍历非空元素
                for(var i = nonEmptyItems.length -1; i >= 0; i--) {
                    var currentItem = nonEmptyItems.eq(i);
                    itemMove(currentItem, direction);
                }
            }

            //是否产生新元素
            if(isNewRndItme) {
                newRndItem();
                refreshColor();
            }
        }


        function isGameOver(){
            //获取所有元素
            var items = $('.gameBody .row .item');
            //获取所有非空元素
            var nonEmptyItems = $('.gameBody .row .nonEmptyItem');
            if(items.length == nonEmptyItems.length) {//所有元素的个数 == 所有非空元素的个数  即没有空元素
                //遍历所有非空元素
                for(var i = 0; i < nonEmptyItems.length; i++) {
                    var currentItem = nonEmptyItems.eq(i);
                    if(getSideItem(currentItem, 'up').length != 0 && currentItem.html() == getSideItem(currentItem, 'up').html()) {
                        //上边元素存在 且 当前元素中的内容等于上边元素中的内容
                        return;
                    }else if(getSideItem(currentItem, 'down').length != 0 && currentItem.html() == getSideItem(currentItem, 'down').html()) {
                        //下边元素存在 且 当前元素中的内容等于下边元素中的内容
                        return;
                    }else if(getSideItem(currentItem, 'left').length != 0 && currentItem.html() == getSideItem(currentItem, 'left').html()) {
                        //左边元素存在 且 当前元素中的内容等于左边元素中的内容
                        return;
                    }else if(getSideItem(currentItem, 'right').length != 0 && currentItem.html() == getSideItem(currentItem, 'right').html()) {
                        //右边元素存在 且 当前元素中的内容等于右边元素中的内容
                        return;
                    }
                }
            }else {
                return;
            }
            $('.modal-dialog').css('display','block');
        }


        //游戏初始化
        function gameInit(){
            //初始化分数
            $('#gameScore').html(gameScore);
            //最大分值
            $('#maxScore').html(maxScore);
            //为刷新按钮绑定事件
            $('.refreshBtn').click(refreshGame);
            //随机生成两个新元素
            newRndItem();
            newRndItem();
            //刷新颜色
            refreshColor();
        }

        //随机生成新元素
        function newRndItem(){
            //随机生成新数字
            var newRndArr = [2, 2, 4];
            var newRndNum = newRndArr[getRandom(0, 2)];
            console.log('newRndNum: ' + newRndNum);
            //随机生成新数字的位置
            var emptyItems = $('.gameBody .row .emptyItem');
            var newRndSite = getRandom(0, emptyItems.length - 1);
            emptyItems.eq(newRndSite).html(newRndNum).removeClass('emptyItem').addClass('nonEmptyItem');
        }

        //产生随机数，包括min、max
        function getRandom(min, max){
          return min + Math.floor(Math.random() * (max - min + 1));
        }

        //刷新颜色
        function refreshColor(){
            var items = $('.gameBody .item');
            for(var i = 0; i < items.length; i++) {
                // console.log(items.eq(i).parent().index());
                switch (items.eq(i).html()) {
                    case '':
                        items.eq(i).css('background', '');
                        break;
                    case '2':
                        items.eq(i).css('background', '#eee4da');
                        break;
                    case '4':
                        items.eq(i).css('background', '#ede0c8');
                        break;
                    case '8':
                        items.eq(i).css('background', '#f2b179');
                        break;
                    case '16':
                        items.eq(i).css('background', '#f59563');
                        break;
                    case '32':
                        items.eq(i).css('background', '#f67c5f');
                        break;
                    case '64':
                        items.eq(i).css('background', '#f65e3b');
                        break;
                    case '128':
                        items.eq(i).css('background', '#edcf72');
                        break;
                    case '256':
                        items.eq(i).css('background', '#edcc61');
                        break;
                    case '512':
                        items.eq(i).css('background', '#9c0');
                        break;
                    case '1024':
                        items.eq(i).css('background', '#33b5e5');
                        break;
                    case '2048':
                        items.eq(i).css('background', '#09c');
                        break;
                    case '4096':
                        items.eq(i).css('background', '#a6c');
                        break;
                }
            }
        }
    });

image

在这里插入图片描述

引用

原博主代码
☺️

2048小游戏——网页版
03-07
这是一个用js写的网页版2048游戏，实现2048游戏的基本功能。 比如：绘制网格、随机生成数字、动画移动数字、累计分数、重置游戏等。 我再代码中进行了非常详细的注释，相信有一点点基础的开发人员都能迅速看懂，快来试试吧！ 当然，大神还可以在这个文档的基础上对游戏进行改进，比如添加一些更炫酷的动画效果，自定义数字、文字、图像等。
网页版2048
09-14
该游戏主要涉及到前端的一些知识，例如：HTML、CSS、JavaScript。对于初学前端的学生可以 做一个参考。。。。
网页版《2048游戏》
Aqu-蓝空的博客
08-06 1749
源码下载地址：https://gitee.com/cheng-hanyuan/example_projec/tree/main/%E6%A1%88%E4%BE%8B%E9%A1%B9%E7%9B%AE/2048
用JavaScript开发的五大经典游戏及其实现要点
最新发布
weixin_42522857的博客
06-09 1015
JavaScript作为Web开发的核心技术之一，在Web游戏开发中扮演着至关重要的角色。它不仅提供了动态交互的可能，而且通过HTML5的Canvas和WebGL等技术，实现了复杂图形和动画的渲染。
2048小游戏(网页版)
qq_47794306的博客
08-05 1783
这是JS文件 ↓ /*这是JS文件*/ (function(window, document, $) { function Game2048(opt) { var prefix = opt.prefix, len = opt.len, size = opt.size, margin = opt.margin; var score = 0; var winNum = 2048; var isGameOver = true; var board = new Bo.
2048（网页版）
11-24
网页版本2048 包含2048游戏的基本功能 界面经过优化
web前端 - 消除类小游戏 - vue3+ts+vite项目
02-14
本文将详细介绍一个使用Vue 3、TypeScript和Vite技术栈构建的简单web前端消除类小游戏项目。此类游戏的核心玩法在于玩家通过交互操作，使得特定条件下的游戏元素消失并获得分数。本项目通过横向拖拽方块，玩家操作后...
javascript实现经典2048网页版小游戏
04-07
在当今的网络技术中，Web前端开发已经成为构建交互式网页界面的核心。随着HTML5、CSS和JavaScript等技术的发展，开发者能够创建更加丰富和动态的网页应用。《JavaScript实现经典2048网页版小游戏》项目就是这一技术...
web前端 小游戏 JS版小黄脸大战 射击类游戏 用javascript实现的适合初学者入门
02-26
在本项目中，"web前端 小游戏 JS版小黄脸大战 射击类游戏 用javascript实现的适合初学者入门" 是一个基于JavaScript的射击类小游戏，它为初学者提供了一个良好的学习平台，帮助他们熟悉Web前端开发，特别是...
web游戏-web开源网页游戏代码（仅供学习使用）
01-05
"Web游戏-Web开源网页游戏代码（仅供学习使用）"这个标题指出，这是一份关于Web游戏的开源代码库，主要用于教学目的。这里的“Web游戏”指的是在网页浏览器上运行的游戏，无需下载安装即可游玩。而“开源”意味着...
2048html5前端小游戏.zip
11-23
《2048 HTML5前端小游戏详解》 2048是一款广受欢迎的数字益智游戏，它由意大利开发者Gabriele Cirulli在2014年开发，以其简单的规则和富有挑战性的玩法迅速风靡全球。在这个游戏里，玩家通过在4x4的网格上滑动数字...
2048游戏网页版（源码）
03-15
2048游戏火了，网页版、手机版都有，这里有一份js技术的2048网页版源码，有需要的朋友拿去把~
网页版2048实现
10-03
2048网页版小游戏，基于JavaScript语言实现，刚开始学html、css和JavaScript的可以看一下。
2048 网页版
03-14
2048 代码
2048网页版
05-07
2048游戏源码,基于html5+js制作。键盘上下左右按键,开始游戏。
网页版2048小游戏
qq_37746978的博客
01-23 2367
2048小游戏
2048小游戏——网页版（提高篇）
Kuroko's Development Notes
03-16 4033
出于之前的承诺，还是含着泪来总结一下2048改进版的代码吧！ 2048小游戏——网页版（提高篇）：主要是想对该游戏进行一个改进，2048的数字换成图片、支持手机端的滑动操作等。   并没有换图片，也没有做滑动设置，感觉那个没什么卵用。所以这次的主要改进：①屏幕适配；②数字换成文字；③界面优化。   同样的，我把该项目的所有代码已上传，欢迎下载：点击打开链接   先对比一下界面： ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值