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.