You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

植物养护游戏中函数与对象循环引用的初始化问题求助

植物养护游戏中函数与对象循环引用的初始化问题求助

我正在做一个植物养护的练习游戏,游戏里会随机从植物对象数组里选植物,然后根据用户对光照、浇水需求的回答,判断是获得植物还是失去植物,接着进入下一轮。

现在我遇到了个麻烦:我没法调用还没初始化的函数,但如果不先初始化包含这些函数的植物对象,又没法初始化函数。我试过把植物数组放到newPlant函数里,用this来引用植物对象里的函数,但结果出现了undefined的错误。有没有大佬能帮忙看看呀?

以下是我目前写的JS代码:

let xp = 0;
let coins = 30;
let plantHealth = 100;
let collection = [];

// Player controls
const button1 = document.querySelector('#button1');
const button2 = document.querySelector('#button2');
const button3 = document.querySelector('#button3');

// Plant controls
const button4 = document.querySelector('#button4');
const button5 = document.querySelector('#button5');

// Text
const text = document.querySelector('#text');
const xpText = document.querySelector('#xpText');
const coinText = document.querySelector('#coinText');

// Plant collection
const plantTiles = document.querySelector('#plantTiles');
const plantName = document.querySelector('#plantName');
const healthText = document.querySelector('#healthText');

const plants = [
    {
        id: 0,
        name: "Snake Plant (easy care)",
        light: {
            "button text": ["Place plant in low light", "Place plant in medium light", "Place plant in bright light"],
            "button functions": [newPlant.askLight, newPlant.askLight, newPlant.askLight],
            text: "You have received a Snake Plant (easy care)! Where on your plant shelf will you place your plant?"
        },
        water: {
            "button text": ["Don't water at all", "Water a little", "Water a lot"],
            "button functions": [addPlant, addPlant, addPlant],
            text: "Good job! Snake plants are happy in any light. How much water do you want to give your plant?"
        },
        clippingCost: 5
    },
    {
        id: 1,
        name: "Hoya (medium care)",
        light: {
            "button text": ["Place plant in low light", "Place plant in medium light", "Place plant in bright light"],
            "button functions": [losePlant, newPlant.askWater, newPlant.askWater],
            text: "You have received a Hoya (medium care)! Where on your plant shelf will you place your plant?"
        },
        water: {
            "button text": ["Don't water at all", "Water a little", "Water a lot"],
            "button functions": [losePlant, addPlant, losePlant],
            text: "Good job! Hoyas are happy in medium to bright light. How much water do you want to give your plant?"
        },
        clippingCost: 10
    },
    {
        id: 2,
        name: "Calathea (difficult care)",
        light: {
            "button text": ["Place plant in low light", "Place plant in medium light", "Place plant in bright light"],
            "button functions": [losePlant, newPlant.askWater, losePlant],
            text: "You have received a Clathea (difficult care)! Where on your plant shelf will you place your plant?"
        },
        water: {
            "button text": ["Don't water at all", "Water a little", "Water a lot"],
            "button functions": [losePlant, addPlant, losePlant],
            text: "Good job! Calatheas are happy in medium light only. How much water do you want to give your plant?"
        },
        clippingCost: 15
    }
];

let plantShop = [...plants];

const locations = [
    {
        name: "welcome",
        "button text": ["Begin!", "Begin!", "Begin!"],
        "button functions": [newPlant.askLight, newPlant.askLight, newPlant.askLight],
        text: "Welcome to Botany Bliss. Take care of each new plant based on your plant knowledge and watch your plant collection grow!"
    },
    {
        name: "lose plant",
        "button text": ["Try again", "Try again", "Try again"],
        "button functions": [newPlant.askLight, newPlant.askLight, newPlant.askLight],
        text: "Oh no, your new plant didn't like that! You've lost this plant. Try again?"
    },
    {
        name: "lose game",
        "button text": ["Start over?", "Start over?", "Start over?"],
        "button functions": [welcome, welcome, welcome],
        text: "Oh no, your new plant didn't like that and you have no remaining plants in your collection! Game over. Would you like to play again?"
    },
    {
        name: "win game",
        "button text": ["Start over?", "Start over?", "Start over?"],
        "button functions": [welcome, welcome, welcome],
        text: "Congratulations, you have every available plant in your home collection! Would you like to play again?"
    }
];

// Use same random plant for one iteration each of askLight and askWater
function useRandomIndex() {
    let plantIndex = Math.floor(Math.random() * 3);
    let currentPlant = plants[plantIndex];
        
    function askLight() {
        button1.innerText = currentPlant["light"]["button text"][0];
        button2.innerText = currentPlant["light"]["button text"][1];
        button3.innerText = currentPlant["light"]["button text"][2];
        button1.onclick = currentPlant["light"]["button functions"][0];
        button2.onclick = currentPlant["light"]["button functions"][1];
        button3.onclick = currentPlant["light"]["button functions"][2];
        text.innerHTML = currentPlant.light.text;
    };

    function askWater() {
        button1.innerText = currentPlant["water"]["button text"][0];
        button2.innerText = currentPlant["water"]["button text"][1];
        button3.innerText = currentPlant["water"]["button text"][2];
        button1.onclick = currentPlant["water"]["button functions"][0];
        button2.onclick = currentPlant["water"]["button functions"][1];
        button3.onclick = currentPlant["water"]["button functions"][2];
        text.innerHTML = currentPlant.water.text;
    };

    return { askLight, askWater };
};

const newPlant = useRandomIndex();

// Initialize buttons
button1.onclick = newPlant.askLight;
button2.onclick = newPlant.askLight;
button3.onclick = newPlant.askLight;


function update(location) {
    button1.innerText = location["button text"][0];
    button2.innerText = location["button text"][1];
    button3.innerText = location["button text"][2];
    button1.onclick = location["button functions"][0];
    button2.onclick = location["button functions"][1];
    button3.onclick = location["button functions"][2];
    text.innerHTML = location.text;
}

function welcome() {
    xp = 0;
    coins = 50;
    xpText.innerText = xp;
    coinText.innerText = coins;
    collection = [""];
    plantShop = [...plants];
    update(locations[0]);
    newPlant.askLight();
}

function addPlant() {
    alert("Congratulations! Your plant is happy and thriving. It has been added to your collection.")
    update(locations[2]);
    xp += 5;
    xpText.innerText = xp;
};

function losePlant() {
    update(locations[1])
    xp -= 5;
    xpText.innerText = xp;
};

function loseGame() {
    update(locations[2]);
};

welcome();

备注:内容来源于stack exchange,提问作者Christina Bohn

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.13 19:39:38