Question

我正在尝试构建一个游戏，但我遇到了一个问题。如果满足两个条件，我们的想法是获得+1分。如果显示特定的随机图像并且如果满足两个条件则单击特定按钮，我想获得+1分数，分数应该增加1。到目前为止，这是我的代码。

如果显示特定图片，代码确实有效并将分数增加1，但我需要点击按钮才能正常工作。

var clicks = 0;  
var myPix = ["faces/angry.png", "faces/happy.png", "faces/normal.png","faces /pur.png","faces/sad.png"];

function choosePic() {
    var randomNum = Math.floor(Math.random() * myPix.length);
    document.getElementById("myPicture").src = myPix[randomNum];
    if ([randomNum]  == 1) {
        clicks++;updateClickCount();
    }
}

function startTimer() {
    setInterval(choosePic, 1000);
}

Answer 1

一些建议：

添加一个全局变量myPicture，它保存实际图像的索引。在函数randomNum中将变量myPicture更改为choosePic。在功能中删除条件。
添加一些带有事件onclick的按钮和适当的功能来处理点击。
```
<button onclick="clicked(0);">angry</button>
```

添加点击事件的功能。

function clicked(index) {
    // this checks the actual picture index with the index of the button
    if (myPicture === index) {
        clicks++;
        updateClickCount();
    }
}

添加显示点击次数的功能

function updateClickCount() {
    document.getElementById('count').innerHTML = clicks;
}

开始间隔
```
startTimer();
```

这里没有图片的工作代码：

var clicks = 0,
    myPix = ["faces/angry.png", "faces/happy.png", "faces/normal.png", "faces /pur.png", "faces/sad.png"],
    myPicture;

function choosePic() {
    myPicture = Math.floor(Math.random() * myPix.length);
    document.getElementById("myPicture").src = myPix[myPicture];
    // only to the see the picture name
    document.getElementById("myPicture").alt = myPix[myPicture];
}

function startTimer() {
    setInterval(choosePic, 1000);
}

function clicked(index) {
    if (myPicture === index) {
        clicks++;
        updateClickCount();
    }
}

function updateClickCount() {
    document.getElementById('count').innerHTML = clicks;
}

startTimer();

<img id="myPicture" width="100" height="50"/><br />
<button onclick="clicked(0);">angry</button>
<button onclick="clicked(1);">happy</button>
<button onclick="clicked(2);">normal</button>
<button onclick="clicked(3);">pur</button>
<button onclick="clicked(4);">sad</button><br />
Count: <span id="count">0</span>

如果满足两个条件，获得加分？

1 个答案: