www.webdeveloper.com
Results 1 to 5 of 5

Thread: Returning images

Hybrid View

  1. #1
    Join Date
    Mar 2014
    Posts
    6

    Returning images

    I would like to return an image for my rock paper scissors game. I'm not sure if it is possible, but I have the pictures ready. I want the picture to take up the whole screen and after 4 seconds or a good amount of time, I want a replay button to fade in. Also I was wondering if this is possible.
    HTML Code:
    <!doctype html>
    <html>
    <head>
    	<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    	<script>
    	function play(userChoice) {
    		$("#game").append("<br>");
    		var computerChoice = Math.random();
    		if(computerChoice < 0.34) {
    			computerChoice = "rock";
    		} else if(computerChoice <= 0.67) {
    			computerChoice = "paper";
    		} else {
    			computerChoice = "scissors";
    		}
    
    		$("#game").fadeIn(1000).prepend(compare(userChoice, computerChoice)+"<br>");
    	}
    
    	var compare = function(choice1, choice2) {
    		choice1 = choice1.toLowerCase();
    		choice2 = choice2.toLowerCase();
    		if(choice1 === choice2) {
    			return "You tied, you are not a loser but you are not any closer to being a winner!";
    		} else if(choice1 === "rock") {
    			if (choice2 === "scissors") {
    				return "Thank you Based God!";
    			} else {
    				return "Get rekt";
    			}
    		} else if(choice1 === "paper") {
    			if (choice2 === "rock") {
    				return "Thank you Based God";
    			} else {
    				return "Get rekt";
    			}
    		} else if(choice1 === "scissors") {
    			if (choice2 === "rock") {
    				return "Thank you Based God!";
    			} else {
    				return "Get rekt";
    			}
    		}
    		return "Why did you have to test my game like that?!?! Next time choose rock, paper, or scissors!!"
    	};
    	</script>
    </head>
    <body>
    	<button onclick="play('rock')">Rock</button>
    	<button onclick="play('paper')">Paper</button>
    	<button onclick="play('scissors')">Scissors</button>
    	<span id = "game"></span>
    </body>
    </html>
    I tried to make the text fade in but it wouldn't work. I want the picture to reduce spam from my friends playing.

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    868
    I'm not sure on everything you want to accomplish, but I will note that your fadeIn() isn't working because the element is already visible. An element must be hidden in order to fade it in.

    I guess with the pictures I'm just not following what is being displayed and how it relates to this code. I don't know if this is what you had in mind, but my thoughts on how the concept would take place is: you click a rock, paper or scissors button (or image?), the game hides the choices, decides the winner and then displays this on the screen (as a big image or text?). A few seconds later a 'Replay' button fades in somewhere on the screen. Clicking this hides the giant result from the last game and displays your choices again?

    I'm just trying to clarify because it seems to be a bit different from what you already have, thus I don't want to make a bunch of changes and have them be wrong.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Mar 2014
    Posts
    6
    I want the user to click the one of the buttons. Then I want one of the images to come up with an image of rock beating scissors and so on. I want this to block the buttons so the user can't spam. Also a replay button would be nice. I don't want you to do it for me. I just want you to teach me if you have the time. Also how do you hide something?

  4. #4
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    868
    Alright, so let's start with the simplest part, hiding things. You can inversely use .fadeOut() the same way as you would use .fadeIn(). But that's assuming you want to add the effect as well as hiding it. jQuery also sports a .hide() function which will instantly hide an element, after which you could fade it back in.

    So moving on, to display these fullscreen images you will likely want to create a new element on the page. Granted this could be done with jQuery itself but I think it's always easier and a lot safer to manually add a new <div> element to the page and just use that. Give it an ID and use CSS to have it cover the screen. You could use:
    Code:
    #newImageDiv {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #FFF;
      background: rgba(255, 255, 255, 0.8);
      text-align: center;
      display: none;
      z-index: 9001;
    }
    This will have the <div> cover your screen when visible, but it will be hidden to start. Then in each logic statement that determines the winner you would do something like:
    Code:
    $("#newImageDiv").html('<img src="/some/folder/rock_v_scissors.jpg" alt="" />').fadeIn(1000);
    So then each time a game has been decided you should see your new <div> fade in, covering up the screen (and the play buttons) while displaying the appropriate image.

    The last step would be using setTimeout() each time a game ends to show the replay button. Since this is a global action (not specific to the choices) it doesn't have to be inside of any decision logic. It would just call a .prepend()/.append() and .fadeIn() on that same new <div> to add a button that runs a function you will create. Your new function just has to use .hide() on your new <div> so users can play again.

    This is a pretty rough outline and you'll probably want to clean up some of these things (like the large image. It wouldn't be vertically centered). I also didn't really address your results list that shows the text version of each result. I'm not sure what you want to do with that if you are adding images to represent this.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  5. #5
    Join Date
    Mar 2014
    Posts
    6
    Thank you so much. The images will have text on them explaining the results.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles