找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 文档 工具 设计
查看: 55|回复: 0

2048小游戏 在线版

[复制链接]

1万

主题

800

回帖

2万

积分

超级版主

教育辅助界扛把子

附加身份标识
精华
1
热心
2
听众
1
威望
57
贡献
11541
违规
0
书币
5249
注册时间
2020-4-8

论坛元老灌水之王

发表于 2022-1-18 08:32 | 显示全部楼层 |阅读模式
如何用JS,做一个支持pc端和移动端2048小游戏呢,让我们一起开始给无聊的你增加一份慰藉吧。
首先看图,2048的示意图:
        
225623xyngkisngbmmma14.jpg 225621lnnsxttpo6c6gnsp.jpg

一般常用一个二维数组表示当前界面的数据,然后用js依据此数组去渲染对应的格子。
关键代码如下:

[JavaScript] 纯文本查看 复制代码
/*单次移动*/function oneStep(direct) {
    if (direct!=-1) {
        move(direct,size);
        merge(direct,size);
        move(direct,size);  
        DrawCell();    
        SoundFun();
        ScoreFun();
        IsTarget();
        if (zeroNum() > 0) {
            var indexArr = NewNum(1, 0.5);//2和4概率0.5
            setTimeout(function() {
                for (let i = 0; i < indexArr.length; i++) {
                    DrawCell(indexArr[i].randX,indexArr[i].randY)                   
                }
            },100);
        } 
                return true
   }
   return false;
}

/*可以上划*/
var CanUp = function () {
    var flag = 0; //记录不能移动的列数
    for (var j = 0; j < size; j++) {
        for (var i = 1; i < size; i++) {
            if (numArray[i][j] !== 0) {
                if (numArray[i-1][j] === 0 || numArray[i][j] === numArray[i-1][j]) {
                    return true;
                }
            }
        }
        flag++;
    } /*if(flag===size){return false}else return true;*/
    return !(flag === size);
}

/*可以下划*/
var CanDown = function () {
    var flag = 0; //记录不能移动的列数
    for (var j = 0; j < size; j++) {
        for (var i = size - 2; i >= 0; i--) {
            if (numArray[i][j] !== 0) {
                if (numArray[i+1][j] === 0 || numArray[i][j] === numArray[i+1][j]) {
                    return true;
                }
            }
        }
        flag++;
    } /*if(flag===size){return false}else return true;*/
    return !(flag === size);
}
/*可以左划*/
var CanLeft = function () {
    var flag = 0; //记录不能移动的行数
    for (var i = 0; i < size; i++) {
        for (var j = 1; j < size; j++) {
            if (numArray[i][j] !== 0) {
                if (numArray[i][j-1] === 0 || numArray[i][j] === numArray[i][j-1]) {
                    return true;
                }
            }
        } /*if(flag===size){return false}else return true;*/
        flag++;
    }
    return !(flag === size);
}
/*可以右划*/
var CanRight = function () {
    var flag = 0; //记录不能移动的行数
    for (var i = 0; i < size; i++) {
        for (var j = size - 2; j >= 0; j--) {
            if (numArray[i][j] !== 0) {
                if (numArray[i][j+1] === 0 || numArray[i][j] === numArray[i][j+1]) {
                    return true;
                }
            }
        } /*if(flag===size){return false}else return true;*/
        flag++;
    }
    return !(flag === size);
}

/*合并操作*/
function merge(direct,size){
        var change = false;//表明合并过程中格盘是否有变化
        // var score = parseInt(document.getElementById("score").innerHTML, 10);
    if(direct==0){//上
        for(var i=0;i<size-1;i++){
                        for(var j=0;j<size;j++){
                if (numArray[i][j]==numArray[i+1][j]) {
                    score+=numArray[i+1][j]*2;
                    numArray[i][j]=numArray[i+1][j]*2;
                    numArray[i+1][j]=0;
                    change = true;
                }
            }
        }
        }
        else if(direct==1){//下
                for(var i=size-1;i>0;i--){
                        for(var j=0;j<size;j++){
                if (numArray[i][j]==numArray[i-1][j]) {
                    score+=numArray[i-1][j]*2;
                    numArray[i][j]=numArray[i-1][j]*2;
                    numArray[i-1][j]=0;
                    change = true;
                }
            }
        }
        }
        else if(direct==2){//左
                for(var i=0;i<size;i++){
                        for(var j=0;j<size-1;j++){
                if (numArray[i][j]==numArray[i][j+1]) {
                    score+=numArray[i][j+1]*2;
                    numArray[i][j]=numArray[i][j+1]*2;
                    numArray[i][j+1]=0;
                    change = true;
                }
            }
        }
        }
        else if(direct==3){//右
                for(var i=0;i<size;i++){
                        for(var j=size-1;j>0;j--){
                if (numArray[i][j]==numArray[i][j-1]) {
                    score+=numArray[i][j-1]*2;
                    numArray[i][j]=numArray[i][j-1]*2;
                    numArray[i][j-1]=0;
                    change = true;
                }
            }
        }
        }
        // document.getElementById("score").innerHTML=score;
        return change;
}

我做的已经传到gitee上,欢迎clone交流!
https://gitee.com/linpure/js_2048
已知问题:微信里下滑有问题,尝试数种办法后暂时无解,有大神能帮忙解决的,小弟感激不尽
下面是体验链接:
http://linpure.gitee.io/js_2048/

Great works are not done by strength, but by persistence! 历尽艰辛的飞升者,成了围剿孙悟空的十万天兵之一。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号


免责声明:
本站所发布的第三方软件及资源(包括但不仅限于文字/图片/音频/视频等仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢某程序或某个资源,请支持正版软件及版权方利益,注册或购买,得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To: admin@cdsy.xyz

QQ|Archiver|手机版|小黑屋|城东书院 ( 湘ICP备19021508号-1|湘公网安备 43102202000103号 )

GMT+8, 2024-3-28 19:54 , Processed in 0.050802 second(s), 30 queries .

Powered by Discuz! CDSY.XYZ

Copyright © 2019-2023, Tencent Cloud.

快速回复 返回顶部 返回列表