资讯专栏INFORMATION COLUMN

[ 逻辑锻炼] 用 JavaScript 做一个小游戏 ——2048 (初级版)

lidashuang / 2484人阅读

摘要:前言前段时间发现网上有很多收费或公开课都有教用做小游戏的,然后自己就也想动手做一个,做这个小游戏主要是为了锻炼自己的逻辑能力,也算是对之前一些学习的总结吧注实现方法完全是自己边玩边想的,所有些乱还请见谅另外配色方案是在某个游戏截屏,然后用吸

前言

前段时间发现网上有很多收费或公开课都有教用 js 做 2048 小游戏的,然后自己就也想动手做一个,做这个小游戏主要是为了锻炼自己的逻辑能力,也算是对之前一些学习的总结吧

注:

实现方法完全是自己边玩 2048 边想的,所有些乱还请见谅

另外配色方案是在某个 2048 游戏截屏,然后用 ps 吸取的,非本人原创

代码中有很多都可以使用数组相关的方法来代替,这里是为了自己理解数组方法是什么原理

由于时间关系本次不做详解

游戏逻辑

随机位置生成数字 2 或 4

按方向键,有挨着的相同的数字就合并成新的数字

按方向键,数字会移动到对应方向的最边上(按左,数字全部移动到左边)

每次按方向键,合并完成后,会在没有数字的随机位置都会生成新的数字 2 或 4

当前分数等于当前所有数字相加

当有数字达到 2048 游戏结束

项目相关

这个版本是用原生 ES6 写的,只实现了游戏逻辑中的 1,2,3,4;
第一版地址:https://github.com/yhtx1997/S...

之后是打算用 vue 重新写一遍,并且完善下,因为长时间用原生,导致 vue 有些生疏,借此机会重新温习下

项目代码 采用二维数组进行数据的管理,默认全部为零
let arr = [
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0]
];
随机创建数字
let s = 0;
let create = () => {
    let x = Math.floor(Math.random() * 4);
    let y = Math.floor(Math.random() * 4);

    // console.log(s)
    if (s > 100) {
        s = 0;
        return;
    }
    if (arr[x][y] == 0) {
        if (Math.floor(Math.random() * 10) % 2 == 0) {
            arr[x][y] = 2;
        } else {
            arr[x][y] = 4;
        }
        s = 0;
        return;
    } else {
        s++;
        return create();
    }
}
渲染页面
let updateHtml = () => {
    //获取元素
    let warp = document.getElementById("warp");
    let html = "";
    //将数据转换为 HTML 
    for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < arr[i].length; j++) {
            html += `
${arr[i][j]==0?"":arr[i][j]}
`; } } //将 数据转换的 HTML 渲染到页面 warp.innerHTML = html; }
事件监听
window.onkeydown = (e) => {
    switch (e.keyCode) {
        case 37:
            // ←
            console.log("←");
            arr = new move(arr).moveLeft();
            create(); //随机位置新建
            updateHtml(); //更新数据到页面
            break;
        case 38:
            // ↑
            console.log("↑");
            arr = new move(arr).moveUp();
            create(); //随机位置新建
            updateHtml(); //更新数据到页面
            break;
        case 39:
            // →
            console.log("→");
            arr = new move(arr).moveRight();
            create(); //随机位置新建
            updateHtml(); //更新数据到页面
            break;
        case 40:
            // ↓
            console.log("↓");
            arr = new move(arr).moveDown();
            create(); //随机位置新建
            updateHtml(); //更新数据到页面
            break;
    }
}
具体处理函数 先提取非零数字
export default function ClearZero (arr){//去零
    let clearZero = [[],[],[],[]];
    for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 4; j++) {
            if (arr[i][j] != 0) {
                clearZero[i].push(arr[i][j])
            }
        }
    }
    return clearZero;
}
将挨着的相等数字分组并相加

分组

import Deduplication from "./deduplication";//将相邻且相同的数字相加

export default class Grouping{//将相邻的相同数字分组
    constructor(clearZero){
        this.clearZero = clearZero;
    }
    left(){
        let newarr = [[],[],[],[]];
        for (let j = 0; j < this.clearZero.length; j++) {
            let grouping = [];
            let i = 0;
            //将重复的 分到一组
            while (i < this.clearZero[j].length) {
                if (this.clearZero[j][i] == this.clearZero[j][i + 1]) {
                    grouping.push([this.clearZero[j][i], this.clearZero[j][i + 1]]);
                    i += 2;
                } else {
                    grouping.push(this.clearZero[j][i]);
                    i++;
                }
            }
            //去重复
            newarr[j] = Deduplication(grouping);
        }
        return newarr;
    }
    right(){
        let newarr = [[],[],[],[]];
        for (let i = 0; i < this.clearZero.length; i++) {
            let grouping = [];
            let j = this.clearZero[i].length - 1;
            //将重复的 分到一组
            while (j >= 0) {
                if (this.clearZero[i][j] == this.clearZero[i][j - 1]) {
                    grouping.unshift([this.clearZero[i][j], this.clearZero[i][j - 1]]);
                    j -= 2;
                } else {
                    grouping.unshift(this.clearZero[i][j]);
                    j--;
                }
            }
            //将重复的进行计算
            newarr[i] = Deduplication(grouping);

        }
        return newarr;
    }


}

相加

export default function Deduplication (grouping){//将相邻且相同的数字相加
    for (let i = 0; i < grouping.length; i++) {
        if (typeof grouping[i] == "object") {
    
            grouping[i] = grouping[i][0] + grouping[i][1];
        }
    }
    return grouping;
}
添加占位用的零
export default function AddZero (newarr,w){//加零
    for (let i = 0; i < newarr.length; i++) {
        while (newarr[i].length != 4) {
            if(w == "l"){
                newarr[i].push(0);
            }else if(w == "r"){

                newarr[i].unshift(0);
            }
        }
    }
    return newarr;
}
上下的处理

将 Y 轴的处理转换成 X 轴的处理

export default function turn(arr) {//将数组转一下
    let clearZero = [[],[],[],[]];
    for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 4; j++) {
            clearZero[i][j] = arr[j][i]
        }
    }
    return clearZero;
}

等处理完成后再调用上边的函数,将 X 轴的处理结果转换回 Y 轴的表现方式

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101085.html

相关文章

  • [ 逻辑锻炼] JavaScript 一个游戏 ——2048 (详解

    前言 这次使用了 vue 来编写 2048,主要目的是温习一下 vue。 但是好像没有用到太多 vue 的东西,==! 估计可能习惯了不用框架吧 之前由于时间关系没有对实现过程详细讲解,本次会详细讲解下比较绕的函数 由于篇幅问题简单的函数就不做详解了 代码地址: https://github.com/yhtx1997/S... 实现功能 数字合并 当前总分计算 没有可移动的数字时不进行任何...

    gxyz 评论0 收藏0
  • 前端特效【第04期】|果汁混合效果-下

    摘要:往期回顾在上一期的前端特效里,我们已经把果汁混合的效果里面的圆形菜单做好了,如果你错过了上篇文章今天我们要讨论的是杯子里面的液体生成问题先来回顾下咱们的果汁混合效果吧果汁混合效果,扫描下方二维码就看到啦我们接着上期的内容来继续往下讲吧,本期 往期回顾 在上一期的【前端特效】☜里,我们已经把果汁混合的效果里面的圆形菜单做好了,如果你错过了上篇文章今天我们要讨论的是杯子里面的液体生成问题 ...

    宋华 评论0 收藏0
  • 曾探:爱JavaScript再多,它也只是生活的一部分

    摘要:拿足球比赛的例子来说,我们的目标只是进球,下底传中这种模式仅仅是达到进球目标的一种手段。但在这种动态解释型语言中,给对象动态添加职责是再简单不过的事情。这就造成了语言的装饰者模式不再关注于给对象动态添加职责,而是关注于给函数动态添加职责。 非商业转载请注明作译者、出处,并保留本文的原始链接:http://www.ituring.com.cn/article/199456 曾探...

    cyqian 评论0 收藏0
  • 微信应号(小程序)资源汇总(1010更新)

    摘要:微信应用号小程序资源汇总。每天不定期整理和收集微信小程序相关资源,方便查阅和学习,欢迎大家提交新的资源,完善和补充。 wechat-weapp-resource 微信应用号(小程序)资源汇总。 每天不定期整理和收集微信小程序相关资源,方便查阅和学习,欢迎大家提交新的资源,完善和补充。 showImg(https://segmentfault.com/img/remote/1460000...

    赵春朋 评论0 收藏0

发表评论

0条评论

lidashuang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<