|
JavaScript - Hangman Help!
Hey everyone!
I'm new to coding and I've been working on a hangman game, but I got one problem I just can't figure out. I want to be able to insert feedback at the end of the game where I give the player the definition of the word they were guessing. Also I will gladly take any suggestions or commentary on my game. Heres my code so far: Code:
<html>
<head>
<script>
var canvas, ctx;
var dc=0;//draw counter
var it, dg, ds, swa;//input text, display guess div, display string
sw = ["Netherlands","world","zombies","ashtray","mouse", "asperagus", "wooden", "energy", "arial", "horseshoe", "foundation", "majestic", "titties", "coffee", "postman", "perfect", "yellow", "onomatopoeia"];//secret word
var sw = sw[Math.floor(Math.random()*sw.length)];
function init(){
canvas = document.getElementById("hungman");
ctx = canvas.getContext('2d');
ctx.lineWidth = 3;
it = document.getElementById("input_txt");
dg = document.getElementById("display_guess_div");
displayGuess("-");
}
function drawStuff(){
ctx.beginPath();
dc++;
switch(dc){
case 1:
gallows1();
break;
case 2:
gallows2();
break;
case 3:
gallows3();
break;
case 4:
gallows4();
break;
case 5:
drawHead();
break;
case 6:
drawBody();
break;
case 7:
drawLeftArm();
break;
case 8:
drawRightArm();
break;
case 9:
drawLeftLeg();
break;
case 10:
drawRightLeg();
break;
}
ctx.stroke();
}
function drawHead(){
//draw head
ctx.arc(150,175,50,0,Math.PI*2, true);//outer circle
ctx.moveTo(115,175);
ctx.arc(150,175,35,0, Math.PI, false);//mouth
ctx.moveTo(135,155);
ctx.arc(130,155,5,0,Math.PI*2,true);//left eye
ctx.moveTo(175,155)
ctx.arc(170,155,5,0,Math.PI*2,true);//right eye
}
function drawBody(){
//draw body
ctx.moveTo(150,225);
ctx.lineTo(150, 320);
}
function drawLeftArm(){
//draw left arm
ctx.moveTo(150,250);
ctx.lineTo(50,200);
}
function drawRightArm(){
//draw right arm
ctx.moveTo(150,250);
ctx.lineTo(250,200);
}
function drawLeftLeg(){
//draw left leg
ctx.moveTo(150,300);
ctx.lineTo(100,450);
}
function drawRightLeg(){
//draw right leg
ctx.moveTo(150,300);
ctx.lineTo(200,450);
}
function gallows1(){
//draw gallow1
ctx.moveTo(20,20);
ctx.lineTo(20,500);
}
function gallows2(){
//draw gallow2
ctx.moveTo(20,20);
ctx.lineTo(150,20);
}
function gallows3(){
//draw gallow3
ctx.moveTo(20,80);
ctx.lineTo(80,20);
}
function gallows4(){
//draw gallow4 - rope
ctx.moveTo(150,20);
ctx.lineTo(150,125);
}
function checkLetter(){
var len = it.value.length-1;
var guess = it.value.charAt(len);
if(sw.indexOf(guess)==-1){
drawStuff();
if (dc>=10){
alert("bad luck, you're hung! The word was " + sw + ".");
playAgain();
}
}else{
displayGuess(guess)
if(ds.indexOf("-")==-1){
alert("You win! The word was " + sw + "!");
playAgain();
}
}
}
function displayGuess(guess){
//first time
if(guess == "-"){
ds = "";
for(i=0; i<sw.length; i++){
ds+="-";
}
}else{
//display a correct letter
var newds ="";
for(i=0; i<sw.length; i++){
if(sw.charAt(i)==guess){
newds +=guess;
}else{
newds +=ds.charAt(i);
}
}
ds = newds;
}
dg.innerHTML= ds;
}
function playAgain() //Copyright Joey
{
var r=confirm("Play Again?");
if (r==true)
{
window.location.reload();
}
else
{
alert("Thanks For Playing!");
window.close();
}
}
function changeWord() {
var r=confirm("Change word?");
if (r==true)
{
window.location.reload();
}
}
function clear() {
document.text_form.input_text.value="";
return true;
}
//function numberCheck()
//{
// if ( isNaN ( it ) || it != ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz )
// {
// alert("Please Insert a Letter") ;
// return;
// }
//}
</script>
<style type="text/css">
canvas{border:1px solid black}
</style>
</head>
<body onLoad="init()">
<center>
<h1>Hangman</h1>
<p>Guess The Word or !</p>
<canvas id="hungman" width="300px" height="600px"> </canvas><br/>
<div id="input">
<div id="display_guess_div">display guessed letters here</div><br/>
<input type="text" id="input_txt" maxlength="1" size="19"> </input> <br>
<input type="button" value="Guess" onClick="checkLetter()" onSubmit="clear()"></input>
<input type="button" value="Change Word" onClick="changeWord()"></input>
</div>
</center>
</body>
</html>
Similar TutorialsI'm trying to create a simple hangman script, i want to enter a letter in the guess box and have it detect whether its in the secret word or not and print out the result to the another text input eg: guess: b secret word: b_b___ guess: o secret word: bob_o____ etc... Here's what I have: Code: <html>
<head>
<title>Hangman</title>
<script type="text/javascript">
var secretWord="Bob-o-Ran";
var guessLetters = new Array();
function processGuess(form) {
guess = form.guessBox.value;
console.log("You typed: " + guess);
guessLetters.push(guess);
var output = "";
for(var i=0;i<secretWord.length;i++)
{
var letter = secretWord.charAt[i];
for(var j=0;j<guess.length;j++)
{
if(guess==letter)
{
output += letter;
}
else
{
output += "_";
}
}
}
var inputObj = document.getElementById('secretWordBox');
inputObj.value = output;
}
</script>
</head>
<body>
<form name="myform" id="myform" action="" method="GET">
Enter something in the box: <br />
Enter Guess: <input type="text" id="guessBox" VALUE=""><br />
Secret Word:<input type="text" id="secretWordBox" VALUE=""><br />
<input type="button" NAME="button1" Value="Guess" onClick="processGuess(this.form)" />
</form>
</body>
</html>
the problem im having is its not detecting the letter ive just started studying computing and am struggling with javascript a little. one of our assignment is to create a hangman game and i have given it a good go, just wondering if someone could help me out with a problem im facing. ive got the code to read a file and randomise a word, however im struggling with the section after a guess. my code is able to tell if the guess is correct or not, however im not sure how to print a _ if the guess is false or the letter if the guess is true. below is my code so far (excuse the poor layout) (io.js/io.output/io.input is a file that the university use instead of println) Code: var fs = require("fs");
var io = require("./io.js");
var words = "";
var theWord = "";
var guessedLetter = "";
/* Hangman Games */
io.output("Hello, welcome to my hangman game! \nwould you like to begin?");
var start = io.input("");
if (start == "no") {
io.output("goodbye\n------------------");
} else {
io.output("lets begin\n-----------------------------------------\n");
function letterLookup (guessedLetter){
for( var a = 0; a < letters.length -1 ; a++ ){
//if guessed then display letter
if (guessedLetter == letters) {
dashes = dashes + Letters;
}
//io.output(letters[a]);
//else display dash
dashes = dashes + "-";
}
}
function guess () {
io.output("please guess a letter...");
guessedLetter = io.input("\n");
}
//pick a word from file at random.
//read the file
words = fs.readFileSync("\words.txt" , 'utf-8').split("\n");
//randomise number
var numberOfWords = words.length;
var rand = Math.floor(Math.random() * numberOfWords);
//get word from random number
theWord = words[rand];
io.output(theWord);
var letters = theWord.split("");
var dashes = ""
//use letterLookup Function
letterLookup();
io.output(dashes);
//guess
guess();
letterLookup(guessedLetter);
io.output(dashes);
guessInWord = (theWord.indexOf(guessedLetter)) != -1;
io.output(guessInWord);
}
}
Reply With Quote 01-09-2015, 03:05 PM #2 sunfighter View Profile View Forum Posts Senior Coder Join Date Jan 2011 Location Missouri Posts 4,830 Thanks 25 Thanked 672 Times in 671 Posts I am pretty sure println() is not part of javascript. I looked it up in java just to be sure and can't find it there. JS uses document.write().... Anyway you might want to study this: Source Code - JsMadeEasy.com Hi, I have been working on a hangman game and I have run into a glitch. I have it coded so that when the user guesses a letter correct, the letter is filled into the corresponding text spot. Like this: Code:
if (randomword.indexOf(guess1) == 0)
{
document.form1.letter1.value = guess1
letter1 = guess1
}
if (randomword.indexOf(guess1) == 1)
{
document.form1.letter2.value = guess1
letter2 = guess1
}
if (randomword.indexOf(guess1) ==2)
{
document.form1.letter3.value = guess1
letter3 = guess1
}
if (randomword.indexOf(guess1) == 3)
{
document.form1.letter4.value = guess1
letter4 = guess1
}
if (randomword.indexOf(guess1) == 4)
{
document.form1.letter5.value = guess1
letter5 = guess1
}
if (randomword.indexOf(guess1) == 5)
{
document.form1.letter6.value = guess1
letter6 = guess1
}
if (randomword.indexOf(guess1) == 6)
{
document.form1.letter7.value = guess1
letter7 = guess1
}
if (randomword.indexOf(guess1) == 7)
{
document.form1.letter8.value = guess1
letter8 = guess1
}
if (randomword.indexOf(guess1) == 8)
{
document.form1.letter9.value == guess1
letter9 = guess1
}
if (randomword.indexOf(guess1) == 9)
{
document.form1.letter10.value = guess1
letter10 = guess1
}
if (randomword.indexOf(guess1) == 10)
{
document.form1.letter11.value = guess1
letter11 = guess1
}
The variable randomword is the randomly selected word from an array. The guess1 is the users guess. The letter variables are just to check to see if all the spots are filled to win the game. It works fine if the the word doesnt have repeating letters in it such as "Lucky". However words such as "Happy" do not work. If you guess 'p' code fills in the 3 text box with a 'P' but it leaves the 4 spot empty. Even if you guess 'p' again, it still leaves the 4 box empty. Thanks for the help! If you need to see the full code i can post it. Thanks again! Hi all, I am working on a hangman game and have got myself into a bit of muddle with designing the function that prompts the user to enter a letter and then checks it hasn't already been entered, if it has it asks them to enter a different letter. I basically want each letter that is entered to be added to the var allGuesses, then each new entry should be compared against this - however it's not looping at the moment and I don't really know where to go from here.. Am I close? Or miles off? function getInput(aString) { var allGuesses = ''; var inputCharacter = window.prompt("Pick a single lower-case character", "") while (inputCharacter == allGuesses.indexOf(-1)) { reInputCharacter = window.prompt("You have picked " + inputCharacter + " already. Pick another single lower-case character", "") } allGuesses = allGuesses + inputCharacter document.write(allGuesses) } Any advice would be much appreciated! |
|||||||