添加点击事件以确认图像颜色javascript

Question

我正在编写一个 javascript 游戏，每次将 4 种不同的随机颜色作为图像放置在屏幕上，并要求玩家点击绿色，但是即使在搜索之后我也找不到在点击功能上写什么很多，还有我如何让图像每隔几秒自动改变一次，例如 2 秒

以下是游戏的运作方式： 页面加载时，显示 4 张空白的白色图像 单击开始按钮后，4 种不同的颜色代替空白图像 点击绿色图片后，游戏应该会提示一些警告

我在脚本中使用了 0-5 的颜色代码，img src 0.jpg 分别表示白色，1-4 绿色红色蓝色棕色

任何帮助将不胜感激

代码：http://jsfiddle.net/gf2un/1/

JS

var counter = 0;
var greenNumber;

function start() {
    var button = document.getElementById("startButton");
    button.addEventListener("click", generateColor, false);
}

function generateColor() {
    var color;
    var imgCheck = [];
    for (var i = 1; i <= 4; ++i) {

        do
        color = Math.ceil(Math.random() * 4);
        while (imgCheck.indexOf(color) !== -1)
        if (color == 1) greenNumber = i;
        imgCheck[i] = color;

        setImage(i, color);
    }
}

function setImage(rdmNumber, color) {
    var rdmImg = document.getElementById("color" + rdmNumber);
    rdmImg.setAttribute("src", "images//" + color + ".jpg");
    rdmImg.setAttribute("width", "90px");
}

function Click( clickedImage )
{
var theSrc = clickedImage.src;
    if (theSrc = "image/1.jpg")
++counter;
document.getElementById('score').innerHTML = "Score : " + counter;
}

window.addEventListener("load", start, false);

HTML

<center>
    <p>CLICK ON THE GREEN SQUARE</p>
    <p>
    <img id = "color4" src = "images/0.jpg" alt = "box 1 image" width = "90px" onClick = "Click(this)">
    <img id = "color1" src = "images/0.jpg" alt = "box 2 image" width = "90px" onClick = "Click(this)">
    </p>
    <p>
    <img id = "color2" src = "images/0.jpg" alt = "box 3 image" width = "90px" onClick = "Click(this)">
    <img id = "color3" src = "images/0.jpg" alt = "box 4 image" width = "90px" onClick = "Click(this)">
    </p>

    <form action = "#">
        <input id = "startButton" type = "button" value = "Start">
    </form>

    </center>
</body>

Answer 1

你做的太复杂了；您不需要创建 REAL 图像。相反，稍微玩一下css。它使代码看起来更整洁，播放器不需要下载图像。

使用容器时，洗牌很容易。

使用addEventListener() 方法添加 click 函数。这向 HTML 对象添加一个事件，因此您可以向它添加多个函数。

这是我的工作版游戏：http://jsfiddle.net/kychan/k3J9b/1/试试吧！不认真，我为你制作了这个游戏！检查它，复制它或完全使用它，这都是你的！我还为你添加了很多 cmets。

随机播放示例：

//    changes the color and shuffles the deck.
function newColor() {
    //    we change the color we want the user to press.
    var rand_color       =    randomValue(colors);
    curColor.innerHTML   =    rand_color;
    //    we also change the color of the span, so it changes the text color.
    curColor.style.color =    rand_color;

    //    we shuffle constant SHUFFLE_MAX times and re-add it to the container.
    for (var i=0; i<SHUFFLE_MAX; i++) {
        container.appendChild( randomValue(boxes) );
    }
}

在数组中返回一个随机值：

function randomValue(array) {
    return array[(Math.floor(Math.random()*array.length))];
}