janzeteachesit/chapter-1-tennis_step05.markdown

## chapter-1-tennis_step05.markdown

      
    Raw
  

              chapter-1-tennis_step05.markdown
            
          
    Chapter 1: Tennis_Step05

A Pen by janzeteachesit on CodePen.
License.

  
## index.html
<!--
As long	as	it's	between	the	start and	end marks	then it's	a	valid comment	and	won't	show up on the page. But people can View	Source in	their	browser	and	see	it!
-->

<canvas id="gameCanvas" width="1200" height="900"></canvas><!-- //// -->

## script.js
/*
Utilising CodePen JavaScript Console (//codepen.io/nullobject/pen/cngzI)
made with love by @nullobject (http://joshbassett.info), 2014.

Stuff from tutorial not needed in CodePen
<!DOCTYPE>, <html>, <head> <body> tags
window.onload = function script

grist for this pen:
https://gist.github.com/janzeteachesit/1d7ba59dae3c993ee6438b63ca953308
*/

// console.log("Hello, World!");
// console.log("Here's another line of text going to the JavaScript console");
// console.log("Jimmy Joe Bob!"); example of commenting out.
// console.log("PROGRAMMING RULES OMB WHEEEEEEE!!1!!1!ONE");
/*Here's how a multi-line comment looks in JavaScript. Just like the HTML one it won't be used by the browser, but is still visible when someone does a View  Source.*/

/*
////; a signal that this needs to/will be changed later.
*/
// variables to keep track of ball position //// 05
var ballX = 75, ballY = 75; //// 05

// save the canvas for dimensions, and its 2d context for drawing it //// 05
var canvas, canvasContext; //// 05

canvas = document.getElementById('gameCanvas'); ////
canvasContext = canvas.getContext('2d'); ////

// these next few lines set up our game logic and redner to happen times a second //// 05
var framesPerSecond = 30; //// 05
setInterval(function() { //// 05
  moveEverything();  //// 05
  drawEverything(); //// 05
}, 1000/framesPerSecond); //// 05

function moveEverything() {   //// 05
  ballX += 2; // move the ball to the right by a small amount  //// 05
} //// 05

function drawEverything() { ////
  // console.log("ballX is now: " + ballX)
  // clear the game view by filling it with black
  canvasContext.fillStyle = '#222'; ////
  canvasContext.fillRect(0, 0, canvas.width, canvas.height); ////

  // draw a white circle
  canvasContext.fillStyle = '#fff'; ////
  canvasContext.beginPath(); ////
  canvasContext.arc(ballX, ballY, 10, 0, Math.PI*2, true); ////
  canvasContext.fill(); ////
} ////


## scripts
<script src="//codepen.io/nullobject/pen/cngzI"></script>

## styles
<link href="//codepen.io/nullobject/pen/cngzI" rel="stylesheet" />
	<!--
	As long as it's between the start and end marks then it's a valid comment and won't show up on the page. But people can View Source in their browser and see it!
	-->

	<canvas id="gameCanvas" width="1200" height="900"></canvas><!-- //// -->
	/*
	Utilising CodePen JavaScript Console (//codepen.io/nullobject/pen/cngzI)
	made with love by @nullobject (http://joshbassett.info), 2014.

	Stuff from tutorial not needed in CodePen
	<!DOCTYPE>, <html>, <head> <body> tags
	window.onload = function script

	grist for this pen:
	https://gist.github.com/janzeteachesit/1d7ba59dae3c993ee6438b63ca953308
	*/

	// console.log("Hello, World!");
	// console.log("Here's another line of text going to the JavaScript console");
	// console.log("Jimmy Joe Bob!"); example of commenting out.
	// console.log("PROGRAMMING RULES OMB WHEEEEEEE!!1!!1!ONE");
	/Here's how a multi-line comment looks in JavaScript. Just like the HTML one it won't be used by the browser, but is still visible when someone does a View Source./

	/*
	////; a signal that this needs to/will be changed later.
	*/
	// variables to keep track of ball position //// 05
	var ballX = 75, ballY = 75; //// 05

	// save the canvas for dimensions, and its 2d context for drawing it //// 05
	var canvas, canvasContext; //// 05

	canvas = document.getElementById('gameCanvas'); ////
	canvasContext = canvas.getContext('2d'); ////

	// these next few lines set up our game logic and redner to happen times a second //// 05
	var framesPerSecond = 30; //// 05
	setInterval(function() { //// 05
	moveEverything(); //// 05
	drawEverything(); //// 05
	}, 1000/framesPerSecond); //// 05

	function moveEverything() { //// 05
	ballX += 2; // move the ball to the right by a small amount //// 05
	} //// 05

	function drawEverything() { ////
	// console.log("ballX is now: " + ballX)
	// clear the game view by filling it with black
	canvasContext.fillStyle = '#222'; ////
	canvasContext.fillRect(0, 0, canvas.width, canvas.height); ////

	// draw a white circle
	canvasContext.fillStyle = '#fff'; ////
	canvasContext.beginPath(); ////
	canvasContext.arc(ballX, ballY, 10, 0, Math.PI*2, true); ////
	canvasContext.fill(); ////
	} ////