2048小游戏 没有动画效果

最新推荐文章于 2022-03-04 18:00:31 发布
最新推荐文章于 2022-03-04 18:00:31 发布
阅读量276 收藏
点赞数 1
文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34996079/article/details/108519049
版权

2048小游戏 没事写的

2048小游戏 没有动画效果

代码有冗余懒得改了 一个还好理解

html代码

这是html

 <div class="big">
        <div></div>
        <div></div>
        <div></div>
        <div></div>

        <div></div>
        <div></div>
        <div></div>
        <div></div>

        <div></div>
        <div></div>
        <div></div>
        <div></div>

        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

css代码

   .big {
            position: relative;
            width: 440px;
            height: 440px;
            margin: auto;
            background: #cecece;
            border: 1px solid #Ff0;
            border-radius: 5px;
        }

        .big div {
            float: left;
            width: 100px;
            height: 100px;
            margin: 5px;
            background: #c0c0c0;
            border-radius: 5px;
        }

        .big li {
            position: absolute;
            width: 100px;
            height: 100px;
            background: #f0f;
            border-radius: 5px;
            line-height: 100px;
            font-size: 20px;
            text-align: center;
        }

js代码

  class Game {
            constructor() {
                this.gameDiv = document.querySelector(".big");
                this.minli_position = [[], [], [], []];
                this.minli = [[], [], [], []];
                this.nullli = [];
                this.init();
                this.play();
                this.userOnKey();
            }
            init() {
                for (let i = 0; i < 4; i++) {
                    for (let j = 0; j < 4; j++) {
                        this.minli_position[i][j] = { X: i * 110 + 5, Y: j * 110 + 5 };
                    }
                }

            }
            play() {
                var num = Math.floor(Math.random() * 0) + 1;
                for (let k = 0; k < num; k++) {
                    var li = document.createElement("li");
                    var linum = (Math.floor(Math.random() * 2) + 1) * 2;

                    this.nullli = [];
                    for (let i = 0; i < 4; i++) {
                        for (let j = 0; j < 4; j++) {
                            if (this.minli[i][j] == undefined) {
                                var str = "" + i + j;
                                this.nullli.push({ name: str, position: this.minli_position[i][j] });
                            }
                        }
                    }
                    if (this.nullli.length == 1) {
                        num = 1;
                    } else if (this.nullli.length == 0) {
                        return;
                    }
                    var position = this.nullli[Math.floor(Math.random() * this.nullli.length)];

                    this.gameDiv.appendChild(li);
                    li.style.left = position.position.X + "px";
                    li.style.top = position.position.Y + "px";
                    li.innerText = linum;
                    this.minli[position.name[0]][position.name[1]] = li;
                }
                this.color();
            }
            color() {
                for (let i = 0; i < 4; i++) {
                    for (let j = 0; j < 4; j++) {

                        var square =this.minli[i][j];
                        console.log(this.minli[i][j]);
                        if (square==undefined) {
                            continue;
                        }
                        switch (square.innerText.trim()) {
                            case "2": square.style.backgroundColor = "#EEE4DA";
                                square.style.color = "#766D64";
                                break;
                            case "4": square.style.backgroundColor = "#ECE0C8";
                                square.style.color = "#786D67";
                                break;
                            case "8": square.style.backgroundColor = "#F2B179";
                                square.style.color = "#F6F7F2";
                                break;
                            case "16": square.style.backgroundColor = "#F59565";
                                square.style.color = "#FAF6F5";
                                break;
                            case "32": square.style.backgroundColor = "#F77B5F";
                                square.style.color = "#FBF3F0";
                                break;
                            case "64": square.style.backgroundColor = "#F35F3B";
                                square.style.color = "#FAF4F4";
                                break;
                            case "128": square.style.backgroundColor = "#EDCE71";
                                square.style.color = "#F8FAF7";
                                break;
                            case "256": square.style.backgroundColor = "#EDCC61";
                                square.style.color = "#FAF6F7";
                                break;
                            case "512": square.style.backgroundColor = "#ECC850";
                                square.style.color = "#FAF4F6";
                                break;
                            case "1024": square.style.backgroundColor = "#EDC53F";
                                square.style.color = "#F9F4FA";
                                break;
                            case "2048": square.style.backgroundColor = "#E9B501";
                                square.style.color = "#FFFCB0";
                                break;
                            case "4096": square.style.backgroundColor = "#FCEDD8";
                                square.style.color = "#524B39";
                                break;
                            default: 
                            square.style.backgroundColor = "#FBEFE3";
                            console.log("/?");
                            break;
                        }
                    }
                }
            }
            userOnKey() {
                window.onkeydown = (e) => {
                    e = e || window.event;
                    var key = e.keyCode || e.which;
                    if (key == 37 || key == 65) {

                        for (let i = 0; i < 4; i++) {
                            for (let j = 0; j < 4; j++) {
                                if (this.minli[j][i] == undefined) {
                                    for (let t = j + 1; t < 4; t++) {
                                        if (this.minli[t][i] != undefined) {
                                            this.minli[t][i].style.left = this.minli_position[j][i].X + "px";
                                            this.minli[j][i] = this.minli[t][i];
                                            this.minli[t][i] = undefined;
                                            break;
                                        }
                                    }
                                }
                                if (this.minli[j][i] != undefined) {
                                    for (let t = j + 1; t < 4; t++) {
                                        if (this.minli[t][i] != undefined) {
                                            if (this.minli[t][i].innerText === this.minli[j][i].innerText) {
                                                this.minli[t][i].style.left = this.minli_position[j][i].X + "px";
                                                this.minli[j][i].innerText = this.minli[j][i].innerText * 2;
                                                this.minli[t][i].remove();
                                                this.minli[t][i] = undefined;
                                            }
                                            break;
                                        }
                                    }
                                }
                            }
                        }





                        this.play();
                    }



                    if (key == 38 || key == 87) {
                        for (let i = 0; i < 4; i++) {
                            for (let j = 0; j < 4; j++) {
                                if (this.minli[i][j] == undefined) {
                                    for (let t = j + 1; t < 4; t++) {
                                        if (this.minli[i][t] != undefined) {
                                            this.minli[i][t].style.top = this.minli_position[i][j].Y + "px";
                                            this.minli[i][j] = this.minli[i][t];
                                            this.minli[i][t] = undefined;
                                            break;
                                        }
                                    }
                                }
                                if (this.minli[i][j] != undefined) {
                                    for (let t = j + 1; t < 4; t++) {
                                        if (this.minli[i][t] != undefined) {
                                            if (this.minli[i][t].innerText === this.minli[i][j].innerText) {
                                                this.minli[i][t].style.top = this.minli_position[i][j].Y + "px";
                                                this.minli[i][j].innerText = this.minli[i][j].innerText * 2;
                                                this.minli[i][t].remove();
                                                this.minli[i][t] = undefined;
                                            }
                                            break;
                                        }
                                    }
                                }
                            }
                        }




                        this.play();
                    }
                    if (key == 83 || key == 40) {
                        for (let i = 0; i < 4; i++) {
                            for (let j = 3; j >= 0; j--) {
                                if (this.minli[i][j] == undefined) {
                                    for (let t = j - 1; t >= 0; t--) {
                                        if (this.minli[i][t] != undefined) {
                                            this.minli[i][t].style.top = this.minli_position[i][j].Y + "px";
                                            this.minli[i][j] = this.minli[i][t];
                                            this.minli[i][t] = undefined;
                                            break;
                                        }
                                    }
                                }
                                if (this.minli[i][j] != undefined) {
                                    for (let t = j - 1; t >= 0; t--) {
                                        if (this.minli[i][t] != undefined) {
                                            if (this.minli[i][t].innerText === this.minli[i][j].innerText) {
                                                this.minli[i][t].style.top = this.minli_position[i][j].Y + "px";
                                                this.minli[i][j].innerText = this.minli[i][j].innerText * 2;
                                                this.minli[i][t].remove();
                                                this.minli[i][t] = undefined;
                                            }
                                            break;
                                        }
                                    }
                                }
                            }
                        }


                        this.play();
                    }
                    if (key == 39 || key == 68) {

                        for (let i = 0; i < 4; i++) {
                            for (let j = 3; j >= 0; j--) {
                                if (this.minli[j][i] == undefined) {
                                    for (let t = j - 1; t >= 0; t--) {
                                        if (this.minli[t][i] != undefined) {
                                            this.minli[t][i].style.left = this.minli_position[j][i].X + "px";
                                            this.minli[j][i] = this.minli[t][i];
                                            this.minli[t][i] = undefined;
                                            break;
                                        }
                                    }
                                }
                                if (this.minli[j][i] != undefined) {
                                    for (let t = j - 1; t >= 0; t--) {
                                        if (this.minli[t][i] != undefined) {
                                            if (this.minli[t][i].innerText === this.minli[j][i].innerText) {
                                                this.minli[t][i].style.left = this.minli_position[j][i].X + "px";

                                                this.minli[j][i].innerText = this.minli[j][i].innerText * 2;
                                                this.minli[t][i].remove();
                                                this.minli[t][i] = undefined;

                                            }
                                            break;
                                        }
                                    }
                                }
                            }
                        }

                        this.play();
                    }

                }
            }
        }
        var game = new Game();
Tales筱欣
关注
web小游戏 2048制作（四）:过场动画 showanimation2048.js
z6719201102的博客
02-26 1390
function showNumberAnimation( i , j , randNumber ){ var numberCell = $('#number-cell-' + i + "-" + j ); numberCell.css('background-color',getBackGroundColor( randNumber ) ); numberCell.c
2048终极动画美化版
08-26
最新动画版，这一次不打算再更新了。其实就是为大家提供一个思路，可以先想一个算法，然后编出来，然后一步步美化就行了
javascript 2048 无动画效果
qq_32250595的博客
09-30 354
0928 昨日写该JavaScript时，发现 用 “document.getElementById("")”取table的值 失败， 取到的结果一直为null。 上网百度了一会儿，发现是由于在HTML加载之前，先加载了JS文件造成的。 解决方案往往有两种，一种是使用window.onload; 另外一种是将放在HTML页面底端 0930： 发现bug：
android 2048游戏、kotlin应用、跑马灯、动画源码
weixin_33705053的博客
11-06 156
Android精选源码 2048游戏源码 android实现获取号码归属地和其他信息诈骗、骚扰 android kotlin仿开眼app源码 android多种reveal动画效果 android Kotlin开发的一款超简单的图片浏览源码 根据图片高度动态变化的ViewPager 渐变颜色渐变文字渐变图像Gradualsho...
2048略微美化版（未加入动画效果）
08-26
稍微进行了下美化，不过未加入动画效果，马上加入动画效果
小程序版2048小游戏-项目源码-基于微信小程序开发框架的小游戏
最新发布
03-27
此款小游戏采用了模块化的设计思路，将游戏逻辑与界面渲染分离，保证了代码的可读性和可维护性。前端使用了简洁明了的HTML和CSS技术，结合微信小程序框架，实现了流畅的动画效果和响应式布局。后端则采用了高效的...
Javascript编写2048小游戏
10-23
### Javascript编写2048小游戏知识点详解 #### 1. 游戏2048简介 2048是一款简单上手的数字拼图游戏。玩家通过上下左右滑动屏幕来移动板块上的数字格子，相同数字的格子在碰撞时会合并成它们的和。游戏的目标是创建...
2048小游戏.zip
07-22
《2048小游戏开发详解》 2048小游戏是一款简单却极具挑战性的数字合成游戏，由Gabriele Cirulli在2014年创造。它以其独特的玩法和简洁的设计吸引了全球无数玩家的喜爱。在这个项目中，我们将探讨如何使用前端技术...
Android实现2048小游戏
09-02
在Android平台上实现2048小游戏，主要涉及以下几个关键知识点： 1. **自定义View**： 首先，我们需要创建一个自定义的`GameView`类，它继承自`GridLayout`。自定义`GameView`是为了实现游戏的核心逻辑和用户交互。...
网页版2048小游戏（项目实战）
08-20
最后，网页版2048游戏还涉及了前端交互的设计，比如计分板的实时更新，游戏结束和重置的处理，以及动画效果的实现。动画效果能够让游戏过程更加生动有趣，例如方块移动和合并时的平滑动画。 总结来说，网页版2048...
Android期末项目2048小游戏
a_Myra的博客
03-04 1万+
Android期末项目2048小游戏。 简介 2048属于益智类小游戏，它做到了娱乐性、趣味性、教育性相统一。益智类的游戏即是需要去开动大脑去思考从而获得游戏的胜利。简单的益智类游戏可以使玩家在娱乐中不断的开发大脑。这样一来就实现了在娱乐中学习。每次可以选择上下左右其中一个方向去滑动，每滑动一次，所有的数字方块都会往滑动的方向靠拢，系统也会在空白的地方随机出现一个数字方块，相同数字的方块在靠拢、相撞时会相加。不断的叠加最终拼凑出2048这个数字就算成功。 设计思想 完成2048基本功能，加入动画效果，加入声
requestAnimationFrame 介绍
zha_zi的专栏
04-09 601
转自http://www.zhangxinxu.com/wordpress/?p=3695   一、哟，requestAnimationFrame, 新同学，先自我介绍下 Hello, 大家好，我就是风姿卓越，万种迷人的requestAnimationFrame，呵呵呵呵。很高兴和大家见面，请多指教！ 。。。。 咳咳，大家不要一副不屑的样子嘛。跟你讲，我可是很有用的。所谓人如其名，看...
cocos2dx实例开发之2048（添加动画版）
imxiangzi的专栏
03-12 2281
网上找了好多教程写2048，不过都没有实现卡片的移动动画，自己写了一个不太完美的带动画版。 开发步骤： 1，设计一个CardSprite类。 2，设计主游戏场景GameScene，实现游戏逻辑，添加动画逻辑。 3，添加游戏胜利或者游戏失败的层，添加历史分数存储。 4，添加声音等其他元素，专门弄了一个声音预加载的场景，主场景添加声音切换变量存储。
2048游戏回顾二：算法总结（移动、合并、动画等）
热门推荐
阳光玻璃杯
10-29 2万+
如果只是单纯的写一个2048游戏，让这个游戏可以玩的话，工作量还是蛮小的。不过，在这写工作中，你可能花时间最多的就是数字的移动与合并的算法了，如果没有做过，可能确实要花点时间来构思，所以，写完2048游戏以后，我希望能把它做个记录。
android 2048 动画,Android实现2048小游戏
weixin_35339134的博客
05-25 412
本文实例介绍了Android实现2048小游戏的相关代码，分享给大家供大家参考，具体内容如下根据界面,主要实现4*4的格子方块比较麻烦,其他的都挺简单的.总体为实现4*4的格子,自定义GridLayout,并在其中添加触摸监听事件,进行一系列的操作,从而实现游戏的逻辑,最后再添加动画效果即可完成.下面是设计思路:一.GameView的设计首先自定义一个类,继承GridLayout,添加两个构造方法...
前端项目2048小游戏
qq_41893646的博客
11-01 3693
第一章 2048游戏介绍 1.1 项目介绍 相信大家都玩过2048这个游戏，这次我们就一步步地来完成2048的开发，这个项目它需要用到html css和js的知识。 需求分析： 1 游戏是一个4x4的方格，每一个方格我们称为Tile或者Cell 2 游戏开始会随机出现2个方格，每个的值90%的可能性为2，10%的可能性为4 3 通过键盘的上下左右键可以控制方格按一个方向移动，直到不能移动为止。 4 如果移动以后两个Tile 的内容值一样，则进行合并。 5 每个 Tile 移动会有 100ms 的移动动画。
2048游戏制作html,一个自制的2048小游戏(一)
weixin_31626765的博客
05-31 1101
导语本次将会从头到尾讲一个2048游戏的制作过程，中间也会穿插自己的理解一.项目结构除了html和css文件外，分了main.js,support.js,showanimation.js，以及引入jquery。文件.pnghtml文件2048我的2048NewGamescore:0css文件html, body, div, span, object, iframe,h1, h2, h3, h4, ...
Android开发：详解2048小游戏实现过程
"介绍如何在Android平台上实现2048小游戏的开发过程，包括关键的GameView设计、触摸事件处理以及游戏逻辑的实现。" 在Android上实现2048小游戏，主要涉及以下几个关键知识点： 1. **自定义GameView**： - ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值