Question

我已经在这方面工作了几天，我已经到了试图弄清楚为什么这没有显示输赢的信息。这是一个简单的shell游戏，只使用HTML，JavaScript和一个小的CSS文件。认为这是我遇到问题的JavaScript我已经拿走了这么多行，现在我有点迷失了。任何向正确方向的推动都会很棒。

＆＃13;

var noOfShells;
var noOfShells = 3;
var looplimit = noOfShells + 1;

function ballShell(shells) {

  var ballLoc = (Math.floor(Math.random() * shells)) + 1;
  return ballLoc;
}
document.getElementById('elTwo').innerHTML = ballShell();

var ballIs = ballShell(noOfShells);

function newShell(newID, ballIs) {
  this.shellId = newID;
  this.shellName = "Shell" + newID;
  this.ballIn = ballIs;
  this.hasBall = function() {
    var theId = newID;
    var theBall = ballIs;
    var checkMsg = "My number is " + theId + ". The ball is in shell " + theBall;

    if (theId === theball) {
      var checkMsg = checkMsg + " You Win! ";
      return checkMsg;
    } else {
      var checkMsg = checkMsg + " You Lose! ";
    }
  };
}
for (var i = 1; i < 4; i++) {
  this["shell" + i] = new newShell(i, ballIs);
}
var shellOneLink = document.getElementById('shellOne');
shellOneLink.addEventListener('click', shell1.hasball(), false);

function reloadPage() {
  location.reload();
}
var activateReload = document.getElementById('reloadLink');
activateReload.onclick = reloadPage;

＆＃13;

ul {
  width: 100%;
  text-align: center
}
ul li {
  display: inline-block;
  width: 200px;
  border: solid 1px #ccc;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="css/base.css">
<header>
  <h1>Shell Game</h1>
  <nav>
    <ul>
      <li>
        <a id="shellOne" href="#">
          <img src="images/shell.jpg" alt="shell">
        </a>
      </li>

      <li>
        <a id="shellTwo" href="#">
          <img src="images/shell.jpg" alt="shell">
        </a>
      </li>

      <li>
        <a id="shellThree" href="#">
          <img src="images/shell.jpg" alt="shell">
        </a>
      </li>
    </ul>
  </nav>
</header>
<main>
  <h3 id="text-message">&nbsp;</h3>
</main>
<footer>
  <a id="reloadLink" href="index.html">Reload Page</a>
</footer>

＆＃13;

Answer 1

您只包含样式表，而不是您的javascript源文件。你必须这样包括它：

<script src="myscripts.js"></script>

Answer 2

以下是一个简单的shell游戏示例：

var doc = document, bod = doc.body;
function E(id){
  return doc.getElementById(id);
}
function ShellGame(displayElement){
  this.play = function(shellNum){
    var shell = Math.floor(Math.random()*3), r = 'You Lost!';
    switch(shellNum){
      case 0:
        if(shell === 0){
          r = 'You Won!';
        }
        break;
      case 1:
        if(shell === 1){
          r = 'You Won!';
        }
        break;
      case 2:
        if(shell === 2){
          r = 'You Won!';
        }
        break;
    }
    displayElement.innerHTML = r;
  }
}
var sg = new ShellGame(E('text-message'));
E('shellOne').onclick = function(){
  sg.play(0);
}
E('shellTwo').onclick = function(){
  sg.play(1);
}
E('shellThree').onclick = function(){
  sg.play(2);
}

简单的HTML＆amp; JavaScript shell游戏

2 个答案: