尝试为石头剪刀布游戏显示图像而不是字母

Trying to display images instead of letters for Rock Paper Scissors game

本文关键字：图像 显示图 石头剪刀布 游戏 显示      更新时间：2023-09-26

我正在开发一个R，P，S游戏，我想显示图像而不是字母，以便用户和计算机做出选择。我在页面的一半左右开始了一个 if 语句，但我似乎无法让它在页面上显示图像。任何帮助将不胜感激。 

                var computerChoices = ['r', 'p', 's'];
                var wins = 0;
                var losses = 0;
                var ties = 0;
                document.onkeyup = function(event) {
                    var userGuess = String.fromCharCode(event.keyCode).toLowerCase();
                    var computerGuess = computerChoices[Math.floor(Math.random() * computerChoices.length)];
                    if ((userGuess == 'r') || (userGuess == 'p') || (userGuess == 's')){
                        if ((userGuess == 'r') && (computerGuess == 's')){
                            wins++;
                        }else if ((userGuess == 'r') && (computerGuess == 'p')){
                            losses++;
                        }else if ((userGuess == 's') && (computerGuess == 'r')){
                            losses++;
                        }else if ((userGuess == 's') && (computerGuess == 'p')){
                            wins++;
                        }else if ((userGuess == 'p') && (computerGuess == 'r')){
                            wins++;
                        }else if ((userGuess == 'p') && (computerGuess == 's')){
                            losses++;
                        }else if (userGuess == computerGuess){
                            ties++;
                        } 
                        if (userGuess == 'r'){
                            var displayRock = "<img src='images/rock-user.png' alt='User Rock'>";
                            document.querySelector("#userGuess").innerHTML = displayRock;
                        }
                        var displayWins = wins;
                        document.querySelector('#wins').innerHTML = displayWins;
                        var displayLosses = losses;
                        document.querySelector('#losses').innerHTML = displayLosses;
                        var displayTies = ties;
                        document.querySelector('#ties').innerHTML = displayTies;
                        var displayUserGuess = userGuess;
                        document.querySelector('#userGuess').innerHTML = displayUserGuess;
                        var displayComputerGuess = computerGuess;
                        document.querySelector('#computerGuess').innerHTML = displayComputerGuess;
                        document.querySelector('#game').innerHTML = html;
                    }
                }

您正在设置图像：

if (userGuess == 'r'){
    var displayRock = "<img src='images/rock-user.png' alt='User Rock'>";
    document.querySelector("#userGuess").innerHTML = displayRock;
}

它立即被替换在下面的几行：

document.querySelector('#userGuess').innerHTML = displayUserGuess;

您可能希望使用 insertAdjacentHTML（'beforeend'， displayUserGuess） 函数。

此外，多次查询同一元素也不是好的做法 - 最好查询一次并将其保存在变量中，例如：

var userGuessEl = document.querySelector('#userGuess');
// and then below
userGuessEl.innerHTML = ...
相关文章：