2048小游戏

最新推荐文章于 2024-07-20 12:43:53 发布
最新推荐文章于 2024-07-20 12:43:53 发布
阅读量128 收藏
点赞数
分类专栏： Javascript学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a_xixi/article/details/88538120
版权
本文详细介绍了一个基于HTML和JavaScript的2048游戏实现方案，包括游戏界面的设计、游戏逻辑的编写，以及如何通过键盘事件实现游戏控制。文章深入探讨了游戏中的关键算法，如移动分析、动画效果实现等。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>2048</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        font-size: 0px;
    }

    #my2048 {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        background: #bbada0;
    }

    #my2048 div {
        position: absolute;
        display: inline-block;
        border: 0px;
    }
</style>

<body>
    <div id="my2048"></div>
</body>
<script>
    var my2048;
    var rows = 4;
    var cols = 4;
    var spacing = 12;
    var squareWidth = 100;
    var boardSet = [];//初始化的默认小方块
    var squareSet = [];//存放带数字的小方块
    var valueMap = [];//存放每个位置的数值
    var colorMapping = { '0': '#ccc0b3', "2": "#eee4da", '4': "#ede0c8", "8": "#f2b179", '16': '#f59563', '32': '#f65e3b', '64': '#f65e3b', '128': '#edcf72', '256': "#edcc61", '512': "#9c0", '1024': "#3365a5", '2048': "#09c", '4096': "#a6bc", '8192': "#93c" }
    var directionEnum = { left: { key: 'left' }, right: { key: 'left' }, up: { key: 'up' }, down: { key: 'down' } }
    var isChange = true;
    var lock = false;

    function generateNullMap() {//5.生成空map
        var newValueMap = [];
        for (var i = 0; i < rows; i++) {
            newValueMap[i] = [];
            for (var j = 0; j < cols; j++) {
                newValueMap[i][j] = null;
            }
        }
        return newValueMap;
    }
    function getNewLocation(arr) {//8.获取到新的点位
        if (arr.length == 0) {
            return [];
        }
        var temp = [];
        temp.push(arr[0]);
        for (var i = 1; i < arr.length; i++) {
            if (arr[i].num == temp[temp.length - 1].num && (!temp[temp.length - 1].nextSquare || temp[temp.length - 1].nextSquare == null)) {
                temp[temp.length - 1].nextSquare = arr[i];
                // console.log('数字重叠')
            } else {
                temp.push(arr[i])
            }
        }
        return temp;
    }

    function analysisActions(direction) {//7。移动分析过程  9.移动动画
        var newSquareSet = generateNullMap();

        if (direction == directionEnum.left) {//向左
            // console.log('left')
            for (var i = 0; i < squareSet.length; i++) {
                var temp = [];//每一行带数字的小方块
                for (var j = 0; j < squareSet[i].length; j++) {
                    if (squareSet[i][j] != null) {
                        temp.push(squareSet[i][j]);
                    }
                }
                temp = getNewLocation(temp);
                for (var k = 0; k < newSquareSet[i].length; k++) {
                    if (temp[k]) {
                        newSquareSet[i][k] = temp[k]
                    }
                }
            }

        } else if (direction == directionEnum.right) {//向右移动
            // console.log('right', newSquareSet)
            for (var i = 0; i < squareSet.length; i++) {
                var temp = [];//每一行带数字的小方块
                for (var j = squareSet[i].length - 1; j >= 0; j--) {
                    if (squareSet[i][j] != null) {
                        temp.push(squareSet[i][j]);
                    }
                }
                temp = getNewLocation(temp);
                for (var k = newSquareSet[i].length - 1; k >= 0; k--) {
                    if (temp[newSquareSet[i].length - 1 - k]) {
                        newSquareSet[i][k] = temp[newSquareSet[i].length - 1 - k]
                    }
                }
            }

        } else if (direction == directionEnum.up) {//向up移动
            // console.log('up', newSquareSet)
            for (var j = 0; j < squareSet[0].length; j++) {
                var temp = [];//每一行带数字的小方块
                for (var i = 0; i < squareSet.length; i++) {
                    if (squareSet[i][j] != null) {
                        temp.push(squareSet[i][j]);
                    }
                }
                temp = getNewLocation(temp);
                for (var k = 0; k < newSquareSet.length; k++) {
                    if (temp[k]) {
                        newSquareSet[k][j] = temp[k]
                    }
                }
            }
        } else if (direction == directionEnum.down) {//向下移动
            // console.log('down', newSquareSet)
            for (var j = 0; j < squareSet[0].length; j++) {
                var temp = [];//每一行带数字的小方块
                for (var i = squareSet.length - 1; i >= 0; i--) {
                    if (squareSet[i][j] != null) {
                        temp.push(squareSet[i][j]);
                    }
                }
                temp = getNewLocation(temp);
                for (var k = newSquareSet.length - 1; k >= 0; k--) {
                    if (temp[newSquareSet.length - 1 - k]) {
                        newSquareSet[k][j] = temp[newSquareSet.length - 1 - k]
                    }
                }
            }

        }
        // 动画
        for (var i = 0; i < newSquareSet.length; i++) {
            for (var j = 0; j < newSquareSet[i].length; j++) {
                if (newSquareSet[i][j] == null) {
                    continue;
                }
                console.log(direction.key,'active')
                newSquareSet[i][j].style.transition = direction.key + ' 0.3s';
                newSquareSet[i][j].style.left = (j + 1) * spacing + j * squareWidth + 'px';
                newSquareSet[i][j].style.top = (i + 1) * spacing + i * squareWidth + 'px';
                if (newSquareSet[i][j].nextSquare) {
                    console.log(newSquareSet[i][j].nextSquare, 000)
                    newSquareSet[i][j].nextSquare.style.transition = direction.key + ' 0.3s';
                    newSquareSet[i][j].nextSquare.style.left = (j + 1) * spacing + j * squareWidth + 'px';
                    newSquareSet[i][j].nextSquare.style.top = (i + 1) * spacing + i * squareWidth + 'px';
                }
            }
        }

        return newSquareSet;


    }
    function refresh(newSquareSet) {
        squareSet = generateNullMap();
        var newValueMap = generateNullMap();
        // console.log(newSquareSet, 'newSquareSet', squareSet, newValueMap);
        for (var i = 0; i < rows; i++) {
            for (var j = 0; j < cols; j++) {
                if (newSquareSet[i][j]) {
                    if (newSquareSet[i][j].nextSquare) {//存在重叠
                        // newSquareSet[i][j].offsetLeft  有问题？
                        var temp = creatSquare(newSquareSet[i][j].num * 2, newSquareSet[i][j].offsetLeft, newSquareSet[i][j].offsetTop, i, j)
                        squareSet[i][j] = temp;
                        my2048.appendChild(temp);
                        my2048.removeChild(newSquareSet[i][j].nextSquare);
                        my2048.removeChild(newSquareSet[i][j])

                    } else {//不存在重叠
                        // console.log(newSquareSet[i][j].offsetLeft,'不存在重叠')
                        var temp = creatSquare(newSquareSet[i][j].num, newSquareSet[i][j].offsetLeft, newSquareSet[i][j].offsetTop, i, j)
                        squareSet[i][j] = temp;
                        my2048.appendChild(temp);
                        my2048.removeChild(newSquareSet[i][j]);
                    }
                    if (valueMap[i][j] != squareSet[i][j].num) {
                        isChange = true;
                    }
                    newValueMap[i][j] = squareSet[i][j].num;
                } else {
                    newSquareSet[i][j] = 0;
                }

            }
        }

    }
    function isOver() {
        for (var i = 0; i < rows; i++) {
            for (var j = 0; j < cols; j++) {
                if(newSquareSet[i][j]){
                    return true;
                }
            }
        }
    }
    function move(directions) {//6.移动
        // 判断游戏时候结束
        if (isOver()) {
            alert('game over!')
            return;
        }

        // 计算移动位置
        var newSquareSet = analysisActions(directions);
        // 重绘刷新
        setTimeout(function () {
            refresh(newSquareSet);
            if (isChange) {
                randGenerateSquare()
            }
            isChange = false;
            lock = true;

        }, 200)


    }
    function randSquareNum() {//3.随机生成小方块数字
        return Math.random() > 0.5 ? 4 : 2;
    }
    function randGenerateSquare() {//4.随机生成小方块
        for (; ;) {
            var randRow = Math.floor(Math.random() * rows);
            var randCol = Math.floor(Math.random() * cols)
            if (valueMap[randRow][randCol] == 0) {
                var temp = creatSquare(randSquareNum(), randCol * squareWidth + (randCol + 1) * spacing, randRow * squareWidth + (randRow + 1) * spacing, randRow, randCol);
                valueMap[temp.row][temp.col] = temp.num;
                squareSet[temp.row][temp.col] = temp;
                my2048.appendChild(temp);
                return true;
            }
        }
    }
    function creatSquare(value, left, top, row, col) {//2.生成小方块
        var temp = document.createElement("div");
        temp.style.width = squareWidth + 'px';
        temp.style.height = squareWidth + 'px';
        temp.style.left = left + 'px';
        temp.style.top = top + 'px';
        temp.style.background = colorMapping[value];
        temp.style.lineHeight = squareWidth + 'px';
        temp.style.textAlign = 'center';
        temp.style.fontSize = 0.4 * squareWidth + 'px';
        temp.num = value;
        temp.row = row;
        temp.col = col;
        if (value > 0) {
            temp.innerHTML = '' + value
        }
        return temp;
    }
    function initboard() {
        my2048 = document.getElementById("my2048");
        my2048.style.width = (rows + 1) * spacing + rows * squareWidth + 'px';
        my2048.style.height = (cols + 1) * spacing + cols * squareWidth + 'px';
    }
    function init() {//1.初始化
        // 初始化棋盘
        initboard();
        // 生成默认小方块
        for (var i = 0; i < rows; i++) {
            boardSet[i] = [];
            squareSet[i] = [];
            valueMap[i] = [];
            for (var j = 0; j < cols; j++) {
                valueMap[i][j] = [];
                squareSet[i][j] = null;
                boardSet[i][j] = creatSquare(0, (j + 1) * spacing + j * squareWidth, (i + 1) * spacing + i * squareWidth, i, j);
                my2048.appendChild(boardSet[i][j])
            }
        }

        // 随机生成带数字的小方块
        randGenerateSquare();
        randGenerateSquare();
        // 添加键盘事件
        document.onkeydown = function (event) {
            var e = event || window.event || arguments.callee.caller.arguments[0];
            switch (e.key) {
                case 'ArrowUp':
                    move(directionEnum.up);
                    break;
                case 'ArrowDown':
                    move(directionEnum.down);
                    break;
                case 'ArrowLeft':
                    move(directionEnum.left);
                    break;
                case 'ArrowRight':
                    move(directionEnum.right);
                    break;
                    move();
                    break;
                default:
                    //...;
                    break;
            }
        };
    }

    init();
</script>

</html>

 

vun，
关注
专栏目录
C++ 实现2048小游戏
余识-
10-21 4287
详解如何用C++实现一个控制台版本的2048小游戏
2048小游戏C++板来啦！
PingdiGuo_guo的博客
02-15 4619
C++板2048游戏实现，超详细有趣喔~~关注主播不迷路喔！
用python实现2048小游戏
热门推荐
qq_44728118的博客
04-27 1万+
用python实现2048小游戏
2048小游戏h5小游戏实现
MRD
11-30 1080
原生实现2048小游戏、难点突破
matlab 2048小游戏
slandarer的博客
03-11 8659
对第一版的2048小游戏的改进，界面使用gui制作，各个组件的颜色由之前RGB颜色提取程序提取的原版。 游戏效果： 游戏改进： 1.该程序增添了快速截取游戏分数的功能，以及记录游戏最高分的功能。 2.更加美观的界面 完整代码： function game2048 clc;clear; global GUI; global score; global best; global gameover...
C语言之2048小游戏理解分析
m0_65146517的博客
07-20 1889
按键W --------------- 向上按键A --------------- 向左按键S --------------- 向下按键D --------------- 向右按键P --------------- 开始游戏按键L --------------- 结束游戏按键其他 ---------- 提示有错。
JAVA2048小游戏
m0_53602804的博客
06-09 790
java2048小游戏练手
【C语言】2048小游戏【附源码】
m0_73367097的博客
04-03 7038
C语言2048小游戏
JAVA实现2048小游戏
D77的博客
02-03 1万+
目录 一、效果 二、教程 三、代码 一、效果 2048小游戏是一款比较流行的数字游戏，游戏规则如下： 每次可以选择上下左右其中一个方向去滑动，每滑动一次，所有的数字方块都会往滑动的方向靠拢外，系统也会在空白的地方乱数出现一个数字方块，相同数字的方块在靠拢、相撞时会相加。不断的叠加最终拼凑出2048这个数字就算成功。 ps: 博主就没有添加成功的图片了，实在是因为技术不行，试完了几次均没有凑成 2048 ... 二、教程 1、使用IDEA搭建一个...
小程序版2048小游戏-项目源码-基于微信小程序开发框架的小游戏
03-27
此款小游戏采用了模块化的设计思路，将游戏逻辑与界面渲染分离，保证了代码的可读性和可维护性。前端使用了简洁明了的HTML和CSS技术，结合微信小程序框架，实现了流畅的动画效果和响应式布局。后端则采用了高效的...
(基于微信小程序的毕业设计)2048小游戏小程序(源码).rar
05-16
(基于微信小程序的毕业设计)2048小游戏小程序(源码)(基于微信小程序的毕业设计)2048小游戏小程序(源码)(基于微信小程序的毕业设计)2048小游戏小程序(源码)(基于微信小程序的毕业设计)2048小游戏小程序(源码)(基于...
微信小程序经典2048小游戏实现版
03-16
标题中的“微信小程序经典2048小游戏实现版”指的是基于微信小程序平台开发的一个游戏应用，它是对流行数字拼图游戏2048的改编。2048游戏的规则简单，玩家通过上下左右滑动屏幕，使得数字方块合并，每次合并相同数字...
基于6818开发板实现2048小游戏和电子相册
06-21
（1）基于6818开发板使用C语言实现2048小游戏和电子相册 （2）2048小游戏实现步骤 1.进行初始化，触摸屏，LCD还有图片的初始化 2.游戏初始化，随机生成两个数字方块，开始进入游戏 3.封装显示图片函数功能 4.点击...
用 Unity 实现的 2048 小游戏+源代码
06-03
《Unity实现2048小游戏深度解析》 2048是一款广受欢迎的数字合并游戏，它的简单规则和挑战性吸引了无数玩家。本篇文章将详细探讨如何使用Unity引擎来实现这款经典的小游戏，并通过源代码分析，揭示Unity在游戏开发...
js中报错"Maximum call stack size exceeded"解决方法
a_xixi的博客
07-04 7072
var arr = [2, 5, 7, 2, 6, 0, 1] // 快速排序 function quickArr(arr) { var left = []; var right = []; if (arr.length <= 1) { return arr; } var pIndex = Math.floor(arr.length ...
JS遍历数组的几种方法
a_xixi的博客
07-06 780
1.普遍的遍历方式 for(var i= 0;i&lt;arr.length;i++){ console.log("第一种遍历方式："+arr[i]); } 2.for…in两个形参，i为数组下标，arr为要遍历的数组 for(var i in arr){ console.log("第二种遍历方式："+arr[i]) } 3.forEach 一个参数为数组的元素...
数据分析高级培训：客户体验分析-课件
最新发布
11-10
课程目标： 本课程旨在让学员了解什么是客户体验，客户服务体验的重要性以及常见指标，掌握客户体验的分析方法，学会客户问题的识别以及针对问题制定有效的解决方案。 课程大纲： 客户体验的概述 客户体验的分析方法 客户问题解决的方法论
C语言实现2048小游戏源码解析
资源摘要信息: "2048_2048小游戏_源码" 知识点: 1. 游戏概述： 2048是一款在全球广受欢迎的数字拼接类益智游戏。玩家在游戏中通过上下左右滑动屏幕上的数字块，使得相同数字的方块在碰撞时合并，最终目标是生成一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值