Question

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

以下是游戏的运作方式：页面加载时，显示4个空白图像在点击开始按钮4之后，取代空白图像的不同颜色点击绿色图像后，游戏应该说警告

我在脚本上使用了0-5代码用于img src 0.jpg白色，1-4绿色红色蓝色棕色

任何帮助将不胜感激

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()添加点击功能。这个向HTML对象添加事件，因此您可以向其添加多个函数。

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

随机播放示例：

//    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))];
}

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

JS

HTML

1 个答案: