Menu
My teacher provided me this code,but I am confused how to make five yellow boxes and 6 olive green boxes for the game
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Word Guess</title>
<style>
div.letter {
background-color: yellow;
color: maroon;
position: absolute;
top: 100px;
height: 100px;
width: 100px;
font-size: 100px;
text-align: center;
}
div.mistake {
background-color: olive;
color: maroon;
position: absolute;
top: 250px;
height: 50px;
width: 50px;
font-size: 50px;
text-align: center;
}
#startnewgame {
position: absolute;
top: 300px;
height: 50px;
width: 50px;
font-size: 50px;
text-align: center;
}
#rules {
position: absolute;
top: 400px;
height: 250px;
width: 600px;
font-size: 14px;
text-align: left;
}
#winlose {
position: absolute;
top: 350px;
left: 250px;
height: 50px;
width: 300px;
font-size: 50px;
text-align: center;
}
</style>
<script>
var myWordArray = new Array(“AS”, “TO”, “WE”);
var wordIndex;
var myWord;
var myWordSoFar = “”;
var numGuesses = 0;
var myTimerCntr = 0;
var myLetter1Found = ‘N’;
var myLetter2Found = ‘N’;
var myColorIndex = 0;
var myTimer;
var myLetter1, myLetter2;
var myLetter1Found, myLetter2Found;
var myColorArray = new Array(‘blue’, ‘red’);
var myWinLose;
document.onkeydown = checkKeycode;
function checkKeycode(e)
{
var keycode;
if (window.event)
{
keycode = window.event.keyCode;
}
else if (e) keycode = e.which;
var myCharacter = String.fromCharCode(keycode);
var myCharacterUpper = myCharacter.toUpperCase();
var myFoundPos = myWord.indexOf(myCharacterUpper);
if (myFoundPos < 0)
{
numGuesses++;
if (numGuesses > 2)
{
myWinLose.style.visibility = ‘visible’;
myWinLose.style.backgroundColor = “black”;
myWinLose.style.color = “white”;
myWinLose.innerHTML = “YOU LOSE!!”;
numGuesses = 0;
myTimerCntr = 0;
myLetter1.innerHTML = myWordArray[wordIndex].substr(0, 1);
myLetter2.innerHTML = myWordArray[wordIndex].substr(1, 1);
} else {
mistakeID = ‘mistake’ + numGuesses;
myMistake = document.getElementById(mistakeID);
myMistake.innerHTML = myCharacter;
}
} else {
alreadyEntered = myWordSoFar.indexOf(myCharacterUpper);
if (alreadyEntered < 0)
{
} else {
alert(“You Already Entered: ” + myCharacterUpper + “!”);
}
if (myWordArray[wordIndex].substr(0, 1) == myCharacterUpper)
{
myLetter1.innerHTML = myCharacterUpper ;
myLetter1Found = ‘Y’;
}
if (myWordArray[wordIndex].substr(1, 1) == myCharacterUpper)
{
myLetter2.innerHTML = myCharacterUpper ;
myLetter2Found = ‘Y’;
}
if (myLetter1Found == ‘Y’ && myLetter2Found == ‘Y’ )
{
myWinLose.style.visibility = ‘visible’;
myWinLose.style.backgroundColor = “yellow”;
myWinLose.style.color = “red”;
myWinLose.innerHTML = “YOU WON!!”;
}
myWordSoFar = myWordSoFar + myCharacterUpper;
}
}
function startNewGame()
{
wordIndex = Math.round( (2 * Math.random()) ); //returns 0, 1, or 2 into wordIndex
//myTest = document.getElementById(‘test’);
//myTest.innerHTML = wordIndex;
myWord = myWordArray[wordIndex]; //Declare myWord as a global variable
numGuesses = 0;
myTimerCntr = 0;
myWordSoFar = “”;
myLetter1Found = ‘N’;
myLetter2Found = ‘N’;
myLetter1 = document.getElementById(‘letter1’);
myLetter2 = document.getElementById(‘letter2’);
myLetter1.innerHTML = “”;
myLetter2.innerHTML = “”;
myMistake1 = document.getElementById(‘mistake1’);
myMistake1.innerHTML = “”;
myMistake2 = document.getElementById(‘mistake2’);
myMistake2.innerHTML = “”;
myWinLose = document.getElementById(‘winlose’);
myWinLose.style.visibility = ‘hidden’;
myTimer = setInterval(“changeNow()”,200);
}
function changeNow()
{
myTimerCntr++;
if (myTimerCntr > 11)
{
clearInterval(myTimer);
myLetter1.style.backgroundColor = “yellow”;
myLetter2.style.backgroundColor = “yellow”;
myTimerCntr = 0;
myColorIndex = 0;
} else {
if (myColorIndex == 0)
{
myLetter1.style.backgroundColor = myColorArray[0];
myLetter2.style.backgroundColor = myColorArray[1];
}
if (myColorIndex == 1)
{
myLetter1.style.backgroundColor = myColorArray[1];
myLetter2.style.backgroundColor = myColorArray[0];
}
myColorIndex++;
if (myColorIndex > 1)
{
myColorIndex = 0;
}
}
}
</script>
</head>
<body style=”background-color: #87CEEB; color: DarkBlue; font-family: Arial, Helvetica, sans-serif;”>
<h1>Guess the Word!</h1>
</div>
<div id=”winlose”></div>
<div id=”letter1″ class=”letter” style=”left: 100px;”></div>
<div id=”letter2″ class=”letter” style=”left: 220px;”></div>
<div id=”mistake1″ class=”mistake” style=”left: 200px;”></div>
<div id=”mistake2″ class=”mistake” style=”left: 260px;”></div>
<div id=”startnewgame”>
<form>
<input type=”button” id=”newgame” value=”Start New Game!” onclick=”startNewGame();”>
</form>
</div>
<div id=”test”></div>
</body>
</html>