植物养护游戏中函数与对象循环引用的初始化问题求助
植物养护游戏中函数与对象循环引用的初始化问题求助
我正在做一个植物养护的练习游戏,游戏里会随机从植物对象数组里选植物,然后根据用户对光照、浇水需求的回答,判断是获得植物还是失去植物,接着进入下一轮。
现在我遇到了个麻烦:我没法调用还没初始化的函数,但如果不先初始化包含这些函数的植物对象,又没法初始化函数。我试过把植物数组放到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
相关产品推荐
相关产品推荐

