猫史档案馆

技术喵Vicent轩今天

发布的地图

《圈地之王-升级版》

你玩了吗？

圈地为王

占地最多者胜！

🔰立即游玩🔰

https://box3.codemao.cn/content/1/3638

全图没加方块

也无模型

仅依靠JavaScript做出来

的游戏

基于吉吉喵的原作品修改了：

1.时间

2.地面颜色

3.障碍（300个坑）

4.胜负表达方式（随机玩家）

以下是这个作品的代码：

const SECONDS_PER_TICK = 1000 / 128; 
const ROUND_TIME = 240 * SECONDS_PER_TICK;//每局游戏时长
const MIN_PLAYERS = 2;//玩家数量下限
const GRID_X = 128;
const GRID_Z = 128;

const TEAMS = [
    { r: 1, g: 0, b: 0, v: voxels.id('red_light'),      n: '红队',       score: 0, },
    { r: 0, g: 1, b: 0, v: voxels.id('green_light'),    n: '绿队',     score: 0, },
    { r: 0, g: 0, b: 1, v: voxels.id('blue_light'),     n: '蓝队',      score: 0, },
    { r: 1, g: 0, b: 1, v: voxels.id('purple'),         n: '紫队',   score: 0, },
    { r: 0, g: 1, b: 1, v: voxels.id('indigo_light'),   n: '靛蓝队',      score: 0, },
    { r: 1, g: 1, b: 0, v: voxels.id('yellow_light'),   n: '黄队',    score: 0, },
];

// 辅助函数，用于随机打乱一个数组
function shuffle (array) {
    for (let i = 1; i < array.length; ++i) {
        const temp = array[i];
        const x = (Math.random() * (i + 1)) | 0;
        array[i] = array[x];
        array[x] = temp;
    }
    return array;
}
async function startGame () {
    // 将地面初始化
   for (let i = 0; i < 128; ++i) {     
    for (let j = 0; j < 128; ++j) {         
        voxels.setVoxel(i, 8, j, 'black')
    } 
}
//随机挖300个方块
for (i = 0; i < 300; i++) {
     voxels.setVoxel(Math.floor(Math.random()*(0-150) + 150), 8, Math.floor(Math.random()*(0-150) + 150), 0) 
}
 

   // 等待玩家进入
    while (world.querySelectorAll('player').length < MIN_PLAYERS) {
        world.say('等待其他玩家加入...');
        await sleep(1000);
        world.say('2个玩家立即开始');
        await world.nextPlayerJoin();
    }

    // 足够玩家加入后，就开始倒计时
    for (let i = 3; i > 0; --i) {
        world.say(i + '...');
        await sleep(1000);
    }
    world.say('去圈地吧！看谁是圈地之王？');
    
    // 每局都随机打乱队伍
    const players = shuffle(world.querySelectorAll('player'));
    shuffle(TEAMS);
    
    // 设置玩家的颜色和初始位置
    function setTeam (p, t) {
        p.player.color.r = t.r;
        p.player.color.g = t.g;
        p.player.color.b = t.b;
        p.position.x = Math.random() * GRID_X;
        p.position.y = 30;
        p.position.z = Math.random() * GRID_Z;
    }

    // 获得初始团队
    const teams = players.map((p, i) => {
        const t = TEAMS[i % TEAMS.length]
        setTeam(p, t);
        return t;
    })
    
    //当玩家接触到地面任意方块时，更新该方块的颜色
    const contactHandler = world.onVoxelContact(({ entity, x, y, z }) => {
        const idx = players.indexOf(entity);
        if (idx < 0) {
            return;
        }
        const t = teams[idx];
        voxels.setVoxelId(x, 8, z, t.v);
        
    });
    // 新玩家加入，会被随机分配到一个队伍
    const joinHandler = world.onPlayerJoin(({entity}) => {
        const t = TEAMS[(Math.random() * teams.length) | 0];
        setTeam(entity, t);
        teams.push(t);
        players.push(entity)
    });
    
    // 每局游戏会在计时到达时结束。
    const endTick = world.currentTick + ROUND_TIME;
    
    // 检测游戏是否进行中
    function gameInProgress () {
        let numActivePlayers = 0;
        for (let i = 0; i < players.length; ++i) {
            if (!players[i].destroyed) {
                numActivePlayers += 1;
            }
        }
        return world.currentTick < endTick && numActivePlayers >= MIN_PLAYERS;
    }
    
    // 通过深度优先搜索，将圈起来的地自动填色
    const visited = new Uint8Array(GRID_X * GRID_Z)
    const toVisit = []
    function mark (i, j, team) {
        const idx = i + j * GRID_X;
        if (i < 0 || i >= GRID_X ||
            j < 0 || j >= GRID_Z ||
            visited[idx] ||
            voxels.getVoxel(i, 8, j) === team) {
            return;
        }
        visited[idx] = true;
        toVisit.push(i, j);
    }
    function fillHoles (team) {
        visited.fill(0);
        for (let i = 0; i < Math.max(GRID_X, GRID_Z); ++i) {
            mark(i, 0, team);
            mark(0, i, team);
            mark(GRID_X - 1, i, team);
            mark(i, GRID_Z - 1, team);
        }
        
        while (toVisit.length > 0) {
            const z = toVisit.pop() | 0;
            const x = toVisit.pop() | 0;
            mark(x - 1, z, team);
            mark(x + 1, z, team);
            mark(x, z - 1, team);
            mark(x, z + 1, team);
        }
        
        let score = 0;
        for (let j = 0; j < GRID_Z; ++j) {
            for (let i = 0; i < GRID_X; ++i) {
                const idx = i + j * GRID_X;
                if (!visited[idx]) {
                    voxels.setVoxelId(i, 8, j, team);
                    score += 1;
                }
            }
        }
        return score;
    }
    
    // 当游戏运行时
    while (gameInProgress()) {
        // 等待 1 Tick
        await world.nextTick();
        
        // 计算各队伍的分数
        for (let i = 0; i < TEAMS.length; ++i) {
            const c = TEAMS[i].score = fillHoles(TEAMS[i].v);
            
            // 如果有团队圈完全场，那么直接胜出
            if (c >= GRID_X * GRID_Z) {
                break;
            }
        }
    }
    
    // 清除事件处理器
    contactHandler.cancel();
    joinHandler.cancel();

    // 重置玩家颜色
    for (let i = 0; i < players.length; ++i) {
        const c = players[i].player.color;
        c.r = c.g = c.b = 1;
    }
    world.say('本局游戏结束！');
    await sleep(5000);
    
    // 宣布获胜队伍
    TEAMS.sort((a, b) => b.score - a.score);
    world.querySelector('player').say(`恭喜 ${TEAMS[0].n} 成为圈地之王!!`);
    await sleep(1000)
}

// 无限循环游戏
async function gameLoop () {
    while (true) {
        await startGame();    
    }
}
gameLoop();

感谢吉吉喵的代码以及往期科普贴~