如何通过岩石，纸，剪刀游戏来改变图像

我正在尝试在JavaScript中构建岩石剪刀游戏，但也将计算机将图像输出到HTML文档中。我已经尝试了我所知道的一切，但它行不通。这是HTML：

<!DOCTYPE html>
  <html>
    <head>
      <script src="Rock Paper Scissors.js"></script>
    </head>
    <body>
      <p>Your choice:<img id="myImage" onafterprint="userImgDisplay()" src="blank.png" width="250px" height="250px"/>The computer's choice:<img id="myImage" onload="comImgDisplay()" src="blank.png" width="250px" height="250px"/>
      </p>`

这是JavaScript：

var userChoice = prompt("Do you choose rock, paper or scissors?","Don't use articles (i.e. the, a, etc.)").toLowerCase();
var computerChoice = Math.random();
if (computerChoice < 0.34) {
    computerChoice = "rock";
} else if(computerChoice <= 0.67) {
    computerChoice = "paper";
} else {
    computerChoice = "scissors";
}
function userImgDisplay() {
  var image = document.getElementById('myImage');
  if (userChoice = "rock") {
    image.src = "rock.png";
  }else if (userChoice = "paper") {
    image.src = "paper.png";
  }else if (userChoice = "scissors") {
    image.src = "scissors.png";
  }
}
function comImgDisplay() {
  var image = document.getElementById('myImage');
  if (computerChoice = "rock") {
    image.src = "rock.png";
  }else if (computerChoice = "paper") {
    image.src = "paper.png";
  }else if (computerChoice = "scissors") {
    image.src = "scissors.png";
  }
}

" rock.png"，" paper.png"one_answers" scissors.png"是基于它们各自的项目，而" blank.png"只是一个透明的图像。该程序将始终为我的选择显示" rock.png"，而对于计算机的则无关。我在做什么错？

您的逻辑不正确，您正在使用=，其中应为==

例如，查看我对此方法的更改，您在所有方法中都有类似的问题。

function comImgDisplay() {
  var image = document.getElementById('myImage');
 if (computerChoice == "rock") {
   image.src = "rock.png";
 }else if (computerChoice == "paper") {
  image.src = "paper.png";
 }else if (computerChoice =="scissors") {
  image.src = "scissors.png";
 }
}

为简单起见，您可以做到这一点：

function comImgDisplay() {
  var image = document.getElementById('myImage');
   image.src = computerChoice  + ".png";
}

如果您正在制作游戏，我建议使用jQuery。

但是，如果您想这样做，则是代码。我也修复了一些语法错误。

var userChoice = prompt("Do you choose rock, paper or scissors?",
    "Don't use articles (i.e. the, a, etc.)").toLowerCase();
var computerChoice = Math.random();
if (computerChoice < 0.34) computerChoice = "rock";
else if (computerChoice <= 0.67) computerChoice = "paper";
else computerChoice = "scissors";
['userImgDisplay', 'comImgDisplay'].forEach(function(element) {
    window[element] = function() {
        var image = document.getElementById('myImage');
        if (userChoice == "rock") image.setAttribute("src", "rock.png");
        else if (userChoice == "paper") image.setAttribute("src", "paper.png");
        else if (userChoice == "scissors") image.setAttribute("src", "scissors.png");
    }
});

相关内容

最新更新

热门标签：