1 "use strict"; 2 var rooms; 3 var player; 4 var display = getDisplay(); 5 var houseImages = 6 { 7 outside: { 8 src: "http://coding.stephenjwolf.com/roomadventure/roomimages/house.jpg", 9 caption: "Photo by Rowan Heuvel", 10 link: "https://unsplash.com/photos/bjej8BY1JYQ", 11 linkInfo: "Courtesy: unsplash.com" 12 }, 13 exitSign: { 14 src: "http://coding.stephenjwolf.com/roomadventure/roomimages/exit.jpg", 15 caption: "Photo by Elliott Stallion", 16 link: "https://unsplash.com/photos/wweHSdXdAgA", 17 linkInfo: "Courtesy: unsplash.com" 18 } 19 }; 20 startGame(); 21
22 function startGame() 23 { 24 //reset the global rooms and player objects 25 rooms = getRooms(); 26 player = getPlayer(); 27 28 //This explains the game to a new player 29 var text = "<h3>Welcome to the Room Adventure!</h3>"; 30 text += "You are in a house"; 31 text += " where many things are broken."; 32 text += "<p>Go from room to room"; 33 text += " to find the items you need"; 34 text += " to fix what's broken.</p>"; 35 text += "<p>Earn points for fixing things."; 36 text += " There are " + player.itemsLeftToFix; 37 text += " things that need to be fixed.</p>"; 38 text += "<span style='color: slateblue;'>"; 39 text += "You start in the "; 40 text += player.currentRoom.name + ".</span>"; 41 text += "<h3>Good luck!</h3>"; 42 43 display.clear(); 44 display.info(text); 45 46 var button = "<button id='start' onclick='getName()'>Start Game</button>"; 47 display.navigation(button); 48 49 display.image(houseImages.outside); 50 display.broken("Type your name in the box below, then press Start."); 51 52 var nameBox = "<"; 53 nameBox += "input "; 54 nameBox += "id='playerName' "; 55 nameBox += "value='" + player.name + "' "; 56 nameBox += ">"; 57 58 display.found(nameBox); 59 60 } 61
62 function getName() 63 { 64 var nameBox = document.getElementById("playerName"); 65 if (nameBox && nameBox.value !== "") 66 { 67 player.name = nameBox.value 68 } 69 moveToRoom(); 70 } 71 72
73 function getPlayer() 74 { 75 var player = 76 { 77 name: "Lica", 78 score: 0, 79 currentRoom: rooms["living room"], 80 inventory: [], 81 itemsLeftToFix: 10 82 }; 83 return player; 84 } 85
86 function movePlayer(direction) 87 { 88 var exits = player.currentRoom.exits; 89 var roomName = exits[direction]; 90 var roomToGoTo = rooms[roomName]; 91 player.currentRoom = roomToGoTo; 92 moveToRoom(); 93 } 94
95 function moveToRoom() 96 { 97 display.clear(); 98 display.image(player.currentRoom.image); 99 createNavigationButtons(player); 100 display.description(player.currentRoom); 101 isThereAnItem(); 102 fixBrokenThing(); 103 display.score(); 104 showInventory(); 105 updateColors(player.currentRoom.color); 106 107 if (checkGameOver()) //watch the parentheses 108 { 109 alertGameWon(); 110 checkPlayAgain(); 111 } 112 } 113
114 function isThereAnItem() 115 { 116 var item = player.currentRoom.itemFound; 117 if (item) 118 { 119 display.found("You found the " + item + "!"); 120 player.inventory.push(item); 121 player.currentRoom.itemFound = null; 122 } 123 showInventory(); 124 } 125
126 function fixBrokenThing() 127 { 128 //helper variables to make the code easier to read 129 var brokenThing = player.currentRoom.brokenThing; 130 var fixWith = player.currentRoom.fixWith; 131 132 //test: Is there a broken thing? 133 if (brokenThing) 134 { 135 //get ready to announce there's a broken thing 136 var text = "There is a broken "; 137 text += brokenThing + " in this room. "; 138 139 //helper variable 140 var index = player.inventory.indexOf(fixWith); 141 142 //test: if fixWith is NOT in inventory 143 if (index === -1) 144 { 145 text += "You need the " + fixWith; 146 text += " to fix it."; 147 } 148 else //the item IS in the inventory 149 { 150 text += "You fixed the " + brokenThing; 151 text += " with the " + fixWith + "!"; 152 text += " You earn "; 153 text += player.currentRoom.points; 154 text += " points."; 155 156 player.currentRoom.brokenThing = null; 157 player.score += player.currentRoom.points; 158 player.itemsLeftToFix--; 159 player.inventory.splice(index, 1); 160 } 161 display.broken(text); 162 display.score(); 163 showInventory(); 164 } 165 } 166
167 function showInventory() 168 { 169 var text = "<h3>Inventory</h3>"; 170 171 var length = player.inventory.length; 172 173 for (var i = 0; i < length; i++) 174 { 175 text += "["; 176 text += player.inventory[i]; 177 text += "] "; 178 } 179 180 display.inventory(text); 181 } 182
183 function checkGameOver() 184 { 185 return player.itemsLeftToFix === 0; 186 } 187
188 function alertGameWon() 189 { 190 var text = "Congratulations, " + player.name +"! "; 191 text += "You fixed everything in the house! "; 192 text += "You should be proud of yourself! "; 193 text += "You finished the game with a score of "; 194 text += player.score + " points! "; 195 text += "Play again soon!"; 196 display.info(text); 197 display.image(houseImages.outside); 198 } 199
200 function checkPlayAgain() 201 { 202 //create the replay button 203 var buttons = "<button id='replay' onclick='startGame()'>Replay Game</button>"; 204 205 //optional: add a second 'leave game' button 206 var url = "http://coding.stephenjwolf.com"; 207 buttons += "<a href='" + url + "' target='_blank'><button id='leave'>Learn to Code</button></a>"; 208 209 display.navigation(buttons); 210 } 211
212 function createNavigationButtons(player) 213 { 214 var buttons = "<h3>Navigation</h3>"; 215 var toggle = false; 216 217 for (var exit in player.currentRoom.exits) 218 { 219 var button = "<button id='" + exit + "' "; 220 221 if (toggle) //add 'even' class to every other button 222 { 223 button += "class='even' "; 224 } 225 else 226 { 227 button += "class='odd' "; 228 } 229 toggle = !toggle; //flip the toggle switch 230 231 button += "onclick='movePlayer(this.id)'>"; 232 233 button += exit; 234 //option: replace above line with this to show room names 235 //button += player.currentRoom.exits[exit]; 236 237 button += "</button>"; 238 buttons += button; //add to buttons string 239 } 240 display.navigation(buttons); 241 } 242
243 function getDisplay() 244 { 245 var display = 246 {
247 info: function (text) 248 { 249 var element = document.getElementById("info"); 250 element.innerHTML = text; 251 }, 252
253 found: function (text) 254 { 255 var element = document.getElementById("found"); 256 element.innerHTML = text; 257 }, 258
259 broken: function (text) 260 { 261 var element = document.getElementById("broken"); 262 element.innerHTML = text; 263 }, 264
265 navigation: function (text) 266 { 267 var element = document.getElementById("navigation"); 268 element.innerHTML = text; 269 }, 270
271 gameTitle: function (text) 272 { 273 var element = document.getElementById("gameTitle"); 274 element.innerHTML = text; 275 }, 276
277 inventory: function (text) 278 { 279 var element = document.getElementById("inventory"); 280 element.innerHTML = text; 281 },
282 score: function (clear) //this is a little different 283 { 284 var element = document.getElementById("score"); 285 286 if (clear) //lets us clear the box 287 { 288 element.innerHTML = ""; 289 return; 290 } 291 player.score = Math.max(0, player.score); 292 element.innerHTML = "Score: " + player.score; 293 294 //if there is a maxScore tally, then show the max 295 if (player.maxScore > 0) 296 { 297 element.innerHTML += " / Max: " + player.maxScore; 298 } 299 },
300 description: function (room) 301 { 302 var element = document.getElementById("description"); 303 304 if (!room) 305 { 306 element.innerHTML = ""; 307 return; 308 } 309 310 var innerHTML = "<h3>You are in the "; 311 innerHTML += room.name + ".</h3>"; 312 innerHTML += "<p>" + room.description + "</p>"; 313 element.innerHTML = innerHTML; 314 },
315 image: function (source) 316 { 317 //if no image exists, set up a blank one 318 if (!source) 319 { 320 source = {src: "", caption: ""}; 321 } 322 323 document.getElementById("image").src = source.src; 324 325 //set up the caption 326 var cap = source.caption; 327 328 //if image has a link, include it with the caption 329 if (source.link) 330 { 331 cap += "<br><a target='_blank' "; 332 cap += "href='" + source.link + "'>"; 333 cap += source.linkInfo + "</a>"; 334 } 335 document.getElementById("caption").innerHTML = cap; 336 },
337 clear: function ()
338 { 339 this.info(""); 340 this.found(""); 341 this.broken(""); 342 this.navigation(""); 343 this.inventory(""); 344 this.image(); 345 this.description(); 346 this.score(true); 347 } 348 }; 349 return display; 350 } 351
352 function getRooms() 353 { 354 var livingRoom = 355 { 356 name: "living room", 357 brokenThing: "fireplace screen", 358 description: "A cozy room with a fireplace.", 359 fixWith: "new wire", 360 points: 25, 361 itemFound: "batteries", 362 exits: 363 { 364 north: "dining room", 365 east: "hallway" 366 }, 367 image: 368 { 369 src: "http://coding.stephenjwolf.com/roomadventure/roomimages/livingroom.jpg", 370 caption: "Photo by Outsite Co", 371 link: "https://unsplash.com/photos/R-LK3sqLiBw", 372 linkInfo: "Courtesy: unsplash.com" 373 } 374 }; 375 376 var diningRoom = 377 { 378 name: "dining room", 379 description: "A great place to enjoy a meal.", 380 brokenThing: "chandelier", 381 fixWith: "light bulb", 382 points: 15, 383 itemFound: "new wire", 384 exits: 385 { 386 south: "living room", 387 east: "kitchen" 388 }, 389 image: 390 { 391 src: "http://coding.stephenjwolf.com/roomadventure/roomimages/diningroom.jpg", 392 caption: "Photo by Erick Lee Hodge", 393 link: "https://unsplash.com/photos/el_V6z_h5nA", 394 linkInfo: "Courtesy: unsplash.com" 395 } 396 }; 397 398 var kitchen = 399 { 400 name: "kitchen", 401 description: "It needs a little attention, but the kitchen has everything you need to have a snack or host a huge party.", 402 brokenThing: "faucet", 403 fixWith: "wrench", 404 points: 35, 405 itemFound: "package with color ink", 406 exits: 407 { 408 south: "hallway", 409 east: "pantry", 410 west: "dining room" 411 }, 412 image: 413 { 414 src: "http://coding.stephenjwolf.com/roomadventure/roomimages/kitchen.jpg", 415 caption: "Photo by Paul", 416 link: "https://unsplash.com/photos/w2DsS-ZAP4U", 417 linkInfo: "Courtesy: unsplash.com" 418 } 419 }; 420 421 var hallway = 422 { 423 name: "hallway", 424 description: "The hallway helps make the house feel grand, though the old carpet curls up and it's easy to trip over.", 425 brokenThing: "rug", 426 fixWith: "special carpet tape", 427 points: 45, 428 itemFound: "light bulb", 429 exits: 430 { 431 north: "kitchen", 432 south: "basement", 433 east: "office", 434 west: "living room", 435 northeast: "bathroom", 436 southeast: "den" 437 }, 438 image: 439 { 440 src: "http://coding.stephenjwolf.com/roomadventure/roomimages/hallway.jpg", 441 caption: "Photo by runnyrem", 442 link: "https://unsplash.com/photos/LfqmND-hym8", 443 linkInfo: "Courtesy: unsplash.com" 444 } 445 }; 446 447 var bathroom = 448 { 449 name: "bathroom", 450 description: "You take pride in your pristine bathroom. It's a relaxing place to take care of necessities.", 451 brokenThing: "mirror", 452 fixWith: "new mirror", 453 points: 20, 454 itemFound: "screwdriver", 455 exits: 456 { 457 southwest: "hallway" 458 }, 459 image: 460 { 461 src: "http://coding.stephenjwolf.com/roomadventure/roomimages/bathroom.jpg", 462 caption: "Photo by Logan Ripley", 463 link: "https://unsplash.com/photos/w8UQkjQ_bS4", 464 linkInfo: "Courtesy: unsplash.com" 465 } 466 }; 467 468 var office = 469 { 470 name: "office", 471 description: "This place is a mess. It's a wonder you ever get any work done in here.", 472 brokenThing: "color printer", 473 fixWith: "package with color ink", 474 points: 40, 475 itemFound: "garbage bag", 476 exits: 477 { 478 west: "hallway" 479 }, 480 image: 481 { 482 src: "http://coding.stephenjwolf.com/roomadventure/roomimages/office.jpg", 483 caption: "Photo by Annie Spratt", 484 link: "https://unsplash.com/photos/FSFfEQkd1sc", 485 linkInfo: "Courtesy: unsplash.com" 486 } 487 }; 488 489 var basement = 490 { 491 name: "basement", 492 description: "You hide your eyes behind your hands so you don't have to see everything that's out of place down here.", 493 brokenThing: "door hinge", 494 fixWith: "screwdriver", 495 points: 30, 496 itemFound: "catnip", 497 exits: 498 { 499 north: "hallway" 500 }, 501 image: 502 { 503 src: "http://coding.stephenjwolf.com/roomadventure/roomimages/basement.jpg", 504 caption: "Photo by S W", 505 link: "https://unsplash.com/photos/mNWsZDYUCFs", 506 linkInfo: "Courtesy: unsplash.com" 507 } 508 }; 509 510 var den = 511 { 512 name: "den", 513 description: "The den is a comfortable spot to watch TV and catch up on the latest movies.", 514 brokenThing: "TV remote", 515 fixWith: "batteries", 516 points: 10, 517 itemFound: "wrench", 518 exits: 519 { 520 northwest: "hallway", 521 south: "cat den" 522 }, 523 image: 524 { 525 src: "http://coding.stephenjwolf.com/roomadventure/roomimages/den.jpg", 526 caption: "Photo by Daniel Barnes", 527 link: "https://unsplash.com/photos/z0VlomRXxE8", 528 linkInfo: "Courtesy: unsplash.com" 529 } 530 }; 531 532 var catDen = 533 { 534 name: "cat den", 535 description: "An offshoot of another room, the cat den is a place the cats come to play, nap, and meow merrily.", 536 brokenThing: "cat toy", 537 fixWith: "catnip", 538 points: 100, 539 itemFound: "new mirror", 540 exits: 541 { 542 north: "den" 543 }, 544 image: 545 { 546 src: "http://coding.stephenjwolf.com/roomadventure/roomimages/catden.jpg", 547 caption: "Photo by Jonathan Fink", 548 link: "https://unsplash.com/photos/Sa1z1pEzjPI", 549 linkInfo: "Courtesy: unsplash.com" 550 } 551 }; 552 553 var pantry = 554 { 555 name: "pantry", 556 description: "You have all shelves organized so you can find the food supplies you need.", 557 brokenThing: "box of spaghetti", 558 fixWith: "garbage bag", 559 points: 15, 560 itemFound: "special carpet tape", 561 exits: 562 { 563 west: "kitchen" 564 }, 565 image: 566 { 567 src: "http://coding.stephenjwolf.com/roomadventure/roomimages/pantry.jpg", 568 caption: "Photo by Annie Spratt", 569 link: "https://unsplash.com/photos/SvBnIWiLbcQ", 570 linkInfo: "Courtesy: unsplash.com" 571 } 572 }; 573 574 var rooms = {}; 575 rooms[livingRoom.name] = livingRoom; 576 rooms[diningRoom.name] = diningRoom; 577 rooms[kitchen.name] = kitchen; 578 rooms[hallway.name] = hallway; 579 rooms[bathroom.name] = bathroom; 580 rooms[office.name] = office; 581 rooms[basement.name] = basement; 582 rooms[den.name] = den; 583 rooms[catDen.name] = catDen; 584 rooms[pantry.name] = pantry; 585 586 return rooms; 587 } 588