Einfaches HTML & JavaScript-Shell-Spiel

Question

Ich habe seit ein paar Tagen daran gearbeitet, und ich bin zu dem Punkt gekommen, herauszufinden, warum dies nicht die Botschaft des Gewinnens oder Verlierens anzeigt. Dies ist ein einfaches Shell-Spiel, das nur HTML, JavaScript und eine kleine CSS-Datei verwendet. Ich denke, dass es das JavaScript ist, mit dem ich Probleme habe. Ich habe so viele Zeilen rausgenommen, dass ich jetzt irgendwie verloren bin. Jeder Stoß in die richtige Richtung wäre großartig.

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>

Answer 1

Sie enthalten nur Ihr Stylesheet und nicht Ihre Javascript-Quelldatei. Sie müssen es wie folgt umfassen:

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

Answer 2

Hier ein Beispiel für ein einfaches Shell-Spiel ist:

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