A Simple Soccer Game - Exercise

Contact Us or call 1-877-932-8228
A Simple Soccer Game - Exercise

A Simple Soccer Game

Duration: 15 to 25 minutes.

In this exercise, you will finish creating a very simple game, in which the user must click a soccer ball before it moves off the field. The field looks like this:

  1. Open HTMLDOM/Exercises/soccer-game.html in your editor and study the code. Don't worry about the moveBall() function. We'll learn more about how to do that kind of thing when we look at Dynamic HTML.
  2. Notice that when the page loads, we attach an event to the Start button that triggers the start() function.
  3. Write code that triggers the miss() function when the user clicks down and up on the field and triggers the hit() function when the user clicks down on the ball.
  4. Make sure that when the user clicks the ball, the miss() function doesn't execute.

Challenge

  1. Add code so that the number of clicks displays next to the Start button:
  2. Add code to the hit() function so that the number of attempts it took to get a hit is displayed in the alert message:

Code Sample:

HTMLDOM/Exercises/soccer-game.html
---- C O D E   O M I T T E D ----

	var timer = null;
	observeEvent(window,"load",function() {
		observeEvent(document.getElementById("start"),"click",start,false);
	});
	
	function miss() {
		alert("Miss!");
	}
	
	function hit(e) {
		alert("Hit! Congrats!");
		clearInterval(timer);
	}
	
	function start() {
		var ball = document.getElementById("ball");
		ball.style.top="92px";
		ball.style.left="92px";	
		timer=setInterval(function() { moveBall(ball); },20);
	}
	
	function moveBall(ball) {
---- C O D E   O M I T T E D ----

	}

---- C O D E   O M I T T E D ----

	<h1>Click the Ball</h1>
	<div>
		<button id="start">Start</button>
	</div>
	<div id="field"><img id="ball" src="../Images/ball.gif" alt="Ball"></div>

---- C O D E   O M I T T E D ----

Solution:

HTMLDOM/Solutions/soccer-game.html
---- C O D E   O M I T T E D ----

	observeEvent(window,"load",function() {
		observeEvent(document.getElementById("field"),"click",miss,false);
		observeEvent(document.getElementById("ball"),"mousedown",hit,false);
		observeEvent(document.getElementById("start"),"click",start,false);
	});
---- C O D E   O M I T T E D ----

Challenge Solution:

HTMLDOM/Solutions/soccer-game-challenge.html
---- C O D E   O M I T T E D ----
function miss() {
		incrementClickCount();
		alert("Miss!");
	}
	
	function hit(e) {
		incrementClickCount();
		alert("Hit! Congrats! You got it in " + document.getElementById("click-count").innerHTML + " clicks.");
		stopPropagation(e);
		clearInterval(timer);
	}
---- C O D E   O M I T T E D ----

	function incrementClickCount() {
		var clickCount = document.getElementById("click-count").innerHTML;
		clickCount++;
		document.getElementById("click-count").innerHTML = clickCount;
	}
</script>
<title>Click the Ball</title>
</head>
<body>

	<h1>Click the Ball</h1>
	<div>
		<button id="start">Start</button>
		<span id="click-count">0</span> Clicks
	</div>
	<div id="field"><img id="ball" src="../Images/ball.gif" alt="Ball"></div>
</body>
</html>
Next