janzeteachesit/chapter-1-tennis_step04.markdown

## chapter-1-tennis_step04.markdown

      
    Raw
  

              chapter-1-tennis_step04.markdown
            
          
    Chapter 1: Tennis_Step04

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/37c5aa307919a299fb9b2a656e20e119
*/

// 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.
*/
var ballX = 75, ballY = 75;
var canvas; ////
var canvasContext; ////

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

setInterval(drawEverything, 1000); ////

function drawEverything() { ////
  ballX += 50;
  // 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/37c5aa307919a299fb9b2a656e20e119
	*/

	// 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.
	*/
	var ballX = 75, ballY = 75;
	var canvas; ////
	var canvasContext; ////

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

	setInterval(drawEverything, 1000); ////

	function drawEverything() { ////
	ballX += 50;
	// 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(); ////
	} ////