Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

brendon hanson
brendon hanson
6,191 Points
Posted by brendon hanson
brendon hanson
6,191 Points

I need help with a GAME!

I'm working on my first game! It's a crime scene and you have to find certain items in a set amount of time and lives! I'm having lots of issues with it though. First off I want to say that the game isn't finished yet. I still have a lot of work to do. I just wanted to get this stuff to work before I went any farther. Here are my issues 1: When I run out of lives nothing happens. 2: Whenever I find all of the items nothing happens! And the items counter always stays at 10 even though in the console it shows it going down! 3: When I hover over an item it doesn't outline it yellow! 4: The prompts don't show up either I hope you can find the issue and thanks for helping!

<!DOCTYPE html>
<html>
<head>
  <title>Mini Game</title>
  <link rel="stylesheet" href="game.css">
  </head>
<body>
  <h1>Find the Missing Items!</h1>
  <h1 class="lives">Lives Left:</h1>
    <script>
function countDown(secs,elem) {
    var element = document.getElementById(elem);
    element.innerHTML = "You have "+secs+" seconds to find the items!";
    if(secs < 1) {
        clearTimeout(timer);
        window.close();
    }
    secs--;
    var timer = setTimeout('countDown('+secs+',"'+elem+'")',1000);
}
</script>
<div id="status"></div>
<script>countDown(300,"status");</script>







            <img src="https://cdn.pixabay.com/photo/2017/03/10/16/01/room-2133173_960_720.png" width="1200"  class="bedRoom">
  <div class="items" id="items">
       <img src="https://i0.wp.com/freepngimages.com/wp-content/uploads/2017/01/rustic-pine-table.png?resize=624%2C455" width="200" height="200" class="table" id="table">
    <img src="https://cdn.pixabay.com/photo/2017/11/30/20/32/polaroid-2989416__340.png" width="300" height="100" class="picture" id="notItem">
    <img src="https://cdn.pixabay.com/photo/2014/03/25/16/54/fingerprint-297594__340.png" widht="10" height="10" class="finger" id="item">
    <img src="http://sevenedges.com/wp-content/uploads/2015/07/garden_shovel.png" width="100" height="100" class="shovel" id="item"> 
    <img src="https://cdn.pixabay.com/photo/2013/07/12/18/58/computer-154114__340.png" width="100" height="100" class="computer" id="item">
    <img src="https://cdn.pixabay.com/photo/2017/02/15/11/42/t-shirt-2068353__340.png" width="100" height="100" class="shirt" id="item">
    <img src="https://cdn.pixabay.com/photo/2013/07/12/15/34/shirt-150087__340.png" class="redShirt" id="notItem" width="100" height="100">
     <img src="https://cdn.pixabay.com/photo/2013/07/12/18/20/chucks-153310__340.png" width="50" height="50" class="shoe" id="item">
        <img src="https://cdn.pixabay.com/photo/2014/04/02/10/38/bed-304051__340.png" width="200" height="200" class="bed">
     <img src="https://cdn.pixabay.com/photo/2012/04/12/10/13/crime-scene-29308__340.png" class="dead" id="dead" width="200" height="200"> 
  </div>



  <script src="game.js"></script>
  </body>
</html>

body {
  background-image: url(http://f.fwallpapers.com/images/green-background.jpg);
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
  font: Helvetica Neue, Helvectica, Arial, serif;
  font-weight: 300;
  font-size: 1em;
  line-height: 1.5em;
  color: black;
}

a {
  color: #3f8aBf;
  text-decoration: none;
}

a:hover {
  color: #3079ab;
}

a:visited {
  color: #5a6772;
}

h1, h2, h3 {
  font-weight: 600;
  color: darkpurple;
}

h1 {
  font-size: 3em;
  margin: 60px 0 40px;
  position: relative;
  outline-color: black;
  outline-width: 2px;
  left: 250px;
  color: red;
}

h2 {
    font-size: 2em;
    font-weight: 300;
    margin: 0;
    padding: 30px 0 10px 0;
}

#home h2 {
  margin: -40px 0 0;
}

h3 {
  font-size: 2em;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

h3 em {
  font-style: normal;
  font-weight: 500;
  margin: 0 0 10px 5px;
  padding: 0;
  color: #8d9aa5;
}

.lives {
 position:relative;
  bottom: 80px;
  left: 800px;
  color: blue;
}

// part of room
.bedRoom {
    border: solid 2px black;
  position: absolute;

}

.bed {
 position: absolute;
  top: 760px;
  left: 1000px;
  transform: rotate(330deg);
}

.shoe {
 position: absolute;
  top: 860px;
  left: 1160px;
}
.shovel {
  position:absolute;
  top: 790px;
  left: 400px;
  transform: rotate(25deg);

}

.table {
  position: relative;
  bottom: 250px;
  left: 150px;


}


.computer {
 position:absolute;
  top: 680px;
  left: 410px;

}


.shirt {
 position:absolute;
  top: 700px;
  left: 1050px;
}

.redShirt {
 position: absolute; 
  top: 700px;
  left: 1000px;
  transform: rotate(120deg)
}

.dead {
 position: absolute;
  top: 750px;
  left: 680px;
    transform: rotate(180deg)

}

.picture {
 position: absolute;
  top: 450px;
  left: 300px;
}

.finger {
 position: absolute;
  top: 520px;
  left: 350px;
}

let livesLeft = 3;
let itemsLeft = 10; 
let win = false;

 alert("HI, welcome to RoomFinder! Here are the rules: You get 3 lives to start and every time you click the screen on an item that isn't correct you lose a life! You only have 300seconds to complete the game as well. There are 10 items hidden that you must click. If you find them all before the timer runs out you WIN!"
      )

 document.write("Items Left" + itemsLeft);

 const itemClicked = document.querySelectorAll('item');

item.addEventListener('click', () => {

                itemsLeft -= 1;      

                      });

 const lightUp = document.querySelectorAll('item');

item.addEventListener('hover', () => {

               item.style.border.color = 'yellow';       

                      });

const wrongClick = document.querySelectorAll('notItem');

notItem.addEventListener('click', () => {

                livesLeft -= 1;         

                         });

if (itemsLeft < 1) {
const win = prompt("YOU WON! Type YES to leave");
}

if (win === 'YES') {
 window.close(); 
}

if ( livesLeft < 1 ) {

const lose = prompt("GAME OVER! Type OK to leave!");

}

if ( lose === 'OK' ) {
  window.close();
}

2 Answers

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

Cute idea, but you have a good bit of work yet to do. Here are a few observations and suggestions:

  • you don't need to clear a timeout in its handler, but you might not want to restart it again
  • most browsers don't allow a script to close the active window
  • you can't have more than one item with the same ID (but items can share a class)
  • it makes no sense to use "querySelectoAll" with an id, since there can be only one
  • when using "querySelector" with an id selector, the id must be preceded by a "#" symbol
  • class names used in a selector must be preceded by a "." symbol (period)
  • you can't add an event listener to an element collection (only to a single element)
  • you can apply multiple event listeners with a loop, but perhaps a delegated handler would be better
  • handlers should be applied to the variables that represent the elements (not the element property names)
  • you may want to update specific elements instead of using "document.write"
  • when you update a value like "lives" or "items", remember to also update the page display
  • it would be a good idea to move all the script code out of the HTML file and into the .js file
  • tests done outside the event handlers will only happen once when the page loads
  • check image usage rules, your main image appears as a "no direct linking" sign
brendon hanson
brendon hanson
6,191 Points
brendon hanson
brendon hanson
6,191 Points

Alright thanks! Will work on it tonight!

brendon hanson
brendon hanson
6,191 Points
brendon hanson
brendon hanson
6,191 Points

I want to figure out why it won't recognize my click. On the itemClicked! 

let livesLeft = 3;
let itemsLeft = 10; 
let win = false;
let lost;
let won;

 alert("HI, welcome to RoomFinder! Here are the rules: You get 3 lives to start and every time you click the screen on an item that isn't correct you lose a life! You only have 300seconds to complete the game as well. There are 10 items hidden that you must click. If you find them all before the timer runs out you WIN!"
      )

 document.write("Items Left" + itemsLeft);


 const itemClicked = document.getElementById('shoe');

shoe.addEventListener('click', () => {
              itemsLeft -= 1;
                      });

 const lightUp = document.getElementById('shoe');



const wrongClick = document.getElementById('picture');



if (itemsLeft < 1) {
 win = prompt("YOU WON! Type YES to leave");
}

if (won === 'YES') {
 window.close(); 
}

if ( livesLeft < 1 ) {

  lost = prompt("GAME OVER! Type OK to leave!");

}

if ( lost === 'OK' ) {
  window.close();
}
Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

One of my hints was: handlers should be applied to the variables that represent the elements (not the element property names). This is an example of what I was referring to:

const itemClicked = document.getElementById('shoe');
shoe.addEventListener('click', () => {
    itemsLeft -= 1;
});

You create a variable "itemClicked" but instead of using it to create the handler, you try to reference "shoe" which is the contents of the element's "id" property and not defined in the program. So instead of "shoe.addEventListener" it should be "itemClicked.addEventListener".

brendon hanson
brendon hanson
6,191 Points
brendon hanson
brendon hanson
6,191 Points

I tried that and it didn't work, I'm not sure what it could be. It's weird there are no error messages. It seems like everything I do doesn't work with the pictures

brendon hanson
brendon hanson
6,191 Points
brendon hanson
brendon hanson
6,191 Points

Ok, so I was doing some random stuff to see if I could find the issue and I think I did. So I used the exact same code for the shoe and put it on the table and it worked. I got these pictures from different sites.

brendon hanson
brendon hanson
6,191 Points
brendon hanson
brendon hanson
6,191 Points

So, I tried putting the image of the table where the shoe was...didnt work, what is going on?

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

So when you "tried putting the image of the table where the shoe was", does that mean you copied the "top" and "left" values from one to the other? That certainly should move it if you also saved your edits and then refreshed the browser. Otherwise you might need to explain in more detail.

And if you're using workspaces, you can make a snapshot of your workspace and post the link to it here to easily share the entire project.

brendon hanson
brendon hanson
6,191 Points
brendon hanson
brendon hanson
6,191 Points

I think I tried too early to make this. I'm gonna wait until I have a better understanding of the DOM and other aspects and then get back to it. Thanks for your insights as always!

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

It's a cute idea, and will make a nice project when you're ready.