简单HTML&JavaScript外壳游戏

Simple HTML & JavaScript shell game

本文关键字：JavaScript 外壳 游戏 amp HTML 简单      更新时间：2023-09-26

我已经为此工作了几天，我已经到了试图弄清楚为什么这没有显示输赢的信息的地步。这是一个简单的shell游戏，只使用HTML、JavaScript和一个小CSS文件。想到这是我遇到问题的JavaScript，我已经删除了这么多行，现在我有点迷路了。任何朝着正确的方向推进都将是伟大的。

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;
ul {
  width: 100%;
  text-align: center
}
ul li {
  display: inline-block;
  width: 200px;
  border: solid 1px #ccc;
}
<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>

您只包含了样式表，而没有包含javascript源文件。你必须这样包括它：

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

下面是一个简单的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);
}
相关文章：