Question

我还无法在这里找到我的具体案例，所以我想问一下。我正在尝试使用Javascript为学校项目创建一个非常简单的Tamagotchi。我必须执行DOM操作，使用循环，使用数组（或对象）以及使用函数。

我的想法是创建一个数组，将所有“情感”都作为图像，然后进行for循环以将它们逐渐递减。给人的感觉是，随着时间的流逝，他妈哥池的情绪会变差。

这是我到目前为止的代码，数量不多：

var imgArray = ["super.png", "blij.png", "neutraal.png", "meh.png", "verdrietig.png", "dood.png"] //Array with the images

for (var i = 0; i < imgArray.length; i++)
{
    //for loop that counts down array
    //Here I want a function that changes the image according to the array number
}

对不起，格式不好，这是我第一次来这里：）

这就是我的身体：

<h1>Tamagotchi</h1>

<button id="feed">Give food</button>

<button id="play">Entertain</button>

<button id="walk">Walk</button>

<div id="tamagotchi"></div>

然后，我还希望您在上方看到的按钮添加点以使Tamagotchi感觉更好（因此，在for循环中，数组自动保留++i，但我希望按钮保留{{1 }}，因此减去1分）--i是最快乐的，imgArray[0]是最悲伤的。

我希望这不要太含糊，如果需要更好地解释，请告诉我！

Answer 1

这是一些草稿，因此您可以从某些内容开始。我创建了一个函数，可让您改善tamagoshi的状态。

现在为您：

使函数减小它
使它们显示为图像而不是字符串
使用CSS规则使其更漂亮

如果您在使用代码时遇到麻烦，Stack Overflow将有所帮助。 SO并不是要从头开始编写代码，而是要修复错误和编码问题。

// Array with the images
const imgArray = [
  'super.png',
  'blij.png',
  'neutraal.png',
  'meh.png',
  'verdrietig.png',
  'dood.png',
];

let tamagoshiState;

// Pointer to the div where you are going to insert the picture
const tamagoshiFeel = document.getElementById('tamagotchi');

// Function that can change the state of the tamagoshi
function setTamagoshiState(i) {
   tamagoshiState = i;
   tamagoshiFeel.innerHTML = imgArray[i];
}

// Change the tamagoshi state in a positive way
function improveTamagoshiState() {
  // Tamagoshi can't be happier
  if (tamagoshiState === 0) {
    return;
  }

  setTamagoshiState(tamagoshiState - 1);
}

// Initialize the tamagoshi state at very sad
setTamagoshiState(imgArray.length - 1);

#tamagotchi {
  margin-top: 2em;
}

<h1>Tamagotchi</h1>

<button id="feed" onclick="improveTamagoshiState()">Give food</button>

<button id="play" onclick="improveTamagoshiState()">Entertain</button>

<button id="walk" onclick="improveTamagoshiState()">Walk</button>

<!-- How the tamagochi feels -->
<div id="tamagotchi">

</div>

通过更改图像创建for循环

1 个答案: