in2science Breakout
Template for Breakout game prep task for in2science Summer School 2016.
by Paras
HTML
<!--Create a canvas in HTML for our JS to work in.-->
<canvas id="myCanvas" width="480" height="320"></canvas>
<!--No need to type anything else in here.-->CSS
/* Give the canvas a grey background. */
canvas { background: #eee; }
/* No need to type in here either! */JavaScript
/*
-----------------------------------------
**** in2science Summer School 2016 ****
-----------------------------------------
Hello summer students!
To get started coding your Breakout game,
click the 'Fork' option in the taskbar
at the top of the screen to create a copy
of this fiddle that you can edit. Then,
click your username in the top right and
choose 'Your public fiddles', where you
should find your copy.
As you type, remember to keep hitting the
"UPDATE" button at the top every so often
,so as not to lose your progress!
And just a reminder, make sure to //comment
your code as you go! This is a very good
practice to get into such that others
(us, in this case) can keep track of what
you're trying to do with your code.
Follow the guide and you shouldn't go far
wrong. We're looking forward to seeing
what else you might come up with also!
Best wishes:)
- James & the team
-----------------------------------------
TUTORIAL LINK: https://mzl.la/2apyHOJ
-----------------------------------------
*/
// Set up canvas in HTML for 2D game.
// (This just creates a space for your
// game to sit in.)
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// YOUR JAVASCRIPT CODE HERE:
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;
var brickRowCount = 5;
var brickColumnCount = 3;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;
var score = 0;
var lives = 3;
var bricks = [];
for(c=0; c<brickColumnCount; c++) {
bricks[c] = [];
for(r=0; r<brickRowCount; r++) {
bricks[c][r] = { x: 0, y: 0, status: 1 };
}
}
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
document.addEventListener("mousemove",...