Grade 8 Computer Coding Assignment
Please visit the Khan Academy site for tutorials about Coding in Computer Science. We will begin with simple drawing exercises, and then continue with animation.Instructions to begin:
Open the Khan Academy page, then create a new Javascript program using the button on the page.
Copy the code, from this page, for the Pong game you want to edit.
Edit the code according the the required elements listed below. For example, if you are editing the first game of pong, the requirement is to make the ball smaller, slower and yellow.
After completing the first game edits, save it. and start a new program. Copy and paste the code for the second pong game in the javascript window. Edit the game as per instructions below.
There are two stages to this assignment:
Stage 1 Editing: Students will edit the computer code from 3 different levels of paritally finished games. You must complete all three levels in stage 1.
All the basic code for these levels is found in the pickup folder on the school computers.
If you cannot access this, they are also included at the bottom of this page.
Winona>Pickup>Winship>Pong
Level 1 Edit the simple pong game. Do these three things:
- Make the ball smaller
- Make the ball move more slowly
- Make the ball Yellow
Level 2 Edit the pong game with paddles. Do these three things:
- Make the paddles smaller
- Make the right paddle move more slowly than the left
- Make the ball larger and RED
Level 3 Edit the complex pong game. Do two things to make the game unfair. Make it either much easier or more difficult. Add targets to hit in the game.
Include comments in your game to show what changes you made.
Stage 2 Creation (choose One ).
Option 1 - Students will write the computer code that produces an original game, using the techniques learned in previous lessons.
The links on this site may be helpful when designing your gaming project.
Option 2 - Students will write the computer code that produces a picture of an aquarium with flowing plants, and fish that swim back and forth. An interactive element may be included.
Code for simple Pong 1
var DOT_SPEED = 4.8;
var DOT_RADIUS = 24;
// Operator Variables
var dotPositionX = 40;
var dotPositionY = 40;
var dotDirectionX = "forward";
var dotDirectionY = "up";// Begin Game Loop
draw = function(){
// Black screens save power on handheld devices ;)
background(0); // color(greyscale)// Make your point
stroke(255, 255, 255); // Set color
strokeWeight(DOT_RADIUS); // Set
point(dotPositionX, dotPositionY);// If Dot reaches the Border...
if (dotPositionX > 399 - (DOT_RADIUS / 2) ) {
dotDirectionX = "reverse"; // Change its "flag"
} // If it's on the left
if (dotPositionX < 0 + (DOT_RADIUS / 2) ){
dotDirectionX = "forward"; // It must be Red
}// Do the same for the Y Axis
if (dotPositionY < 0 + (DOT_RADIUS / 2) ) {
dotDirectionY = "down";
}
if (dotPositionY > 399 - (DOT_RADIUS / 2) ){
dotDirectionY = "up";
}if(dotDirectionY === "up"){
// Increment the Position each time loop repeats
dotPositionY -= DOT_SPEED; // Subtract DOT_SPEED from Position
}
if(dotDirectionY === "down"){ // otherwise...
dotPositionY += DOT_SPEED; // Add DOT_SPEED
}if(dotDirectionX === "forward"){
dotPositionX += DOT_SPEED; // Add DOT_SPEED
}
else{ // otherwise...
// Since there are only 2 possibilities, anything but "forward" ends up here. You could say dot_Direction = 0
dotPositionX -= DOT_SPEED; // Subtract DOT_SPEED
}}; // end Game Loop
Code for Pong with paddles // How wide the ball is
var ballDiam = 20;// The ball's x and y position
var ballX = 100,
ballY = 200;// How fast the ball moves in the x and y directions
var ballSpeedX = 5,
ballSpeedY = 5;var paddleWidth = 20,
paddleHeight = 100;// The left paddle's position. Measured from its middle
var lPaddleX = 50,
lPaddleY = 100;
var rPaddleX = 350,
rPaddleY = 300;var noIntersect = 0,
sideIntersect = 1,
cornerIntersect = 2;// Every time through the draw loop we can check these to see
// which keys are being pressed.
var qPressed = false,
aPressed = false,
oPressed = false,
lPressed = false;// Mark that the key is being pressed
var keyPressed = function() {
var q = 81, a = 65, o = 79, l = 76;
if (keyCode === q) {
qPressed = true;
} else if (keyCode === a) {
aPressed = true;
} else if (keyCode === o) {
oPressed = true;
} else if (keyCode === l) {
lPressed = true;
}
};// Mark that the key has been released
var keyReleased = function() {
var q = 81, a = 65, o = 79, l = 76;
if (keyCode === q) {
qPressed = false;
} else if (keyCode === a) {
aPressed = false;
} else if (keyCode === o) {
oPressed = false;
} else if (keyCode === l) {
lPressed = false;
}
};// Test whether the paddle and ball are touching
// Returns sideIntersect if the ball hit a side,
// cornerIntersect if the ball hit a corner and noIntersect if
// the ball didn't hit the paddle
var paddleIntersect = function(paddleX, paddleY, ballX, ballY) {
var withinX = abs(ballX - paddleX) <= (paddleWidth + ballDiam) / 2,
withinY = abs(ballY - paddleY) <= (paddleHeight + ballDiam) / 2;
if (withinX && withinY) {
if (abs(abs(ballY - paddleY) - paddleHeight / 2) < ballDiam / 2) {
return cornerIntersect;
}
return sideIntersect;
}
return noIntersect;
};var drawPaddle = function(paddleX, paddleY) {
// We have to calculate the position of the left corner
// since paddleX and paddleY describe the center of the
// paddle
var paddleCornerX = paddleX - paddleWidth / 2,
paddleCornerY = paddleY - paddleHeight / 2;
rect(paddleCornerX, paddleCornerY, paddleWidth, paddleHeight);
};var draw = function() {
background(0, 0, 0);
// Move the left paddle, but not off the screen
if (qPressed && lPaddleY >= paddleHeight / 2) {
lPaddleY -= 5;
}
if (aPressed && lPaddleY <= 400 - paddleHeight / 2) {
lPaddleY += 5;
}
// Move the right paddle, but not off the screen
if (oPressed && rPaddleY >= paddleHeight / 2) {
rPaddleY -= 5;
}
if (lPressed && rPaddleY <= 400 - paddleHeight / 2) {
rPaddleY += 5;
}
// Change the direction of the ball if it hit the paddle
var lIsect = paddleIntersect(lPaddleX, lPaddleY, ballX, ballY),
rIsect = paddleIntersect(rPaddleX, rPaddleY, ballX, ballY),
isect = max(lIsect, rIsect);
if (isect === sideIntersect) {
ballSpeedX *= -1;
} else if (isect === cornerIntersect) {
ballSpeedX *= -1;
ballSpeedY *= -1;
}
// Reverse direction if ball goes too far right or left
if (ballX >= 400 - ballDiam/2 || ballX <= ballDiam / 2) {
ballSpeedX *= -1;
}
// Reverse direction if ball goes too far up or down
if (ballY >= 400 - ballDiam/2 || ballY <= ballDiam / 2) {
ballSpeedY *= -1;
}
// Move the ball
ballX += ballSpeedX;
ballY += ballSpeedY;
// Draw the left paddle
drawPaddle(lPaddleX, lPaddleY);
drawPaddle(rPaddleX, rPaddleY);
// draw the ball
fill(255, 255, 255);
ellipse(ballX, ballY, ballDiam, ballDiam);
};
Code for complex pong game background(0, 255, 30);
var x = 200;
var y = 0;
var isGoingDown = true;
var t = random (-0.5,0.5);
var m;
var score = 0;
var gameOn = true;
var findSlope = function (t){
if (t === 0) {
t = 0.001;
}
m = 1/t;
};
var b = y-m*x;
var jump = 5;var draw = function() {
background(0,255, 30);
fill(0, 0, 0);
rect(mouseX,333,91,22);
if (gameOn===true){
fill(0, 55, 252);
noStroke();
ellipse(x,y,34,34);
fill(0, 230, 255);
ellipse(x,y,17,17);
fill(255, 255, 255);
ellipse(x,y,8.5,8.5);
fill(0, 0, 0);
ellipse(x,y,4.25,4.25);
}else{
background(255, 3, 3);
fill(0, 0, 1);
textSize(50);
text("YOU LOSE!!!",42,200);
}
textSize(30);
fill(3, 154, 255);
text("score "+score,40,30);
if (y>=333-17 && x>mouseX && x<mouseX+91){
findSlope(random (-0.5,0.5));
b=y-m*x;
isGoingDown = false;
if (gameOn){
score ++;
}
textSize(30);
text("score"+score,40,30);
} else if (x<=17) {
findSlope(random (0,0.5));
b=y-m*x;
isGoingDown = true;
} else if (x>=383) {
findSlope(random (-0.5,0));
b=y-m*x;
isGoingDown=true;
} else if (y <= 17) {
findSlope(random(-0.5,0.5));
b=y-m*x;
isGoingDown=true;
} else if (y >=334) {
textSize(50);
fill(240, 14, 14);
gameOn=false;
}
if ((isGoingDown && m>0) || (!isGoingDown && m<0)) {
x=x+jump*1/abs(m);
} else {
x=x-jump*1/abs(m);
}
y=m*x+b;
jump = 3*(min(30,floor(score/15))) + 5;
};
Game with scoring
In this game, you can try to alter the scoring and the speed.
This would be considered Stage 1, but is not part of the levelled assignments.
/**Welcome to pong with pseudo-code! The purpose of this program is to help people better understand computer science, and to show the usefulness of pseudo-code. Let's begin!**/
//This is the array for main character
var a=[5,200];//this is the array for the opponent
var b=[380,200,1.2,1.2];//This is the array for the ball
var c=[200,200,3,0];
var c2=false;
var c3=1;
//these are the two variables for the score
var s=0;
var s2=0;
//everything inside of this loop will be repeated over and over again.draw= function() {
//this code controls speed and difficulty increase
c[2]+=0.005;
b[2]+=0.000006;
//this controls the direction of the ball
if(c2===false){
c[0]-=c[2];
}else if(c2===true){
c[0]+=c[2];
} c[1]+=c[3];
//This code changes the direction of the ball when you hit it
if(c[0]<=6&&c[1]>a[1]-13&&c[1]<a[1]+13&&c[0]>a[0]-5){
c2=true;
if(c[1]<a[1]){
c[3]=-dist(0,c[1],0,a[1])/5;}
if(c[1]>a[1]){
c[3]=dist(0,c[1],0,a[1])/5;}
}
if(c[0]>=375&&c[1]>b[1]-13&&c[1]<b[1]+13&&c[0]<b[0]+5){
c2=false;
if(c[1]<b[1]){
c[3]=-dist(0,c[1],0,b[1])/5;}
if(c[1]>b[1]){
c[3]=dist(0,c[1],0,b[1])/5;}
}
//this is the enemy logic
if(b[1]>c[1]&&b[1]>85){
b[1]-=b[2];
}
if(b[1]<c[1]&&b[1]<315){
b[1]+=b[2];
}
//This function changes the balls direction when it hits the wall
if(c[1]>=318||c[1]<84){
c[3]=-c[3];
}
//This code redraws the y-component of your paddle allowing you to move
if(mouseY<315&&mouseY>85){
a[1]=mouseY;
}
//This code allows the enemy to score
if(c[0]<-5){
s+=1;
c[0]=200;
c[1]=200;
c[2]=3;
c[3]=0;
b[1]=200;
a[1]=200;
b[2]=b[3];
}
//this code allows you to score
if(c[0]>405){
s2+=1;
c[0]=200;
c[1]=200;
c[2]=3;
c[3]=0;
b[1]=200;
a[1]=200;
b[2]=b[3];
}
//Rather than using a regular background I used a rectangle with a semi-translucent fill to give the game that blurry look.
fill(51, 51, 51,200);
rect(-100,-100,600,600);
// This code draws the boundary Lines
stroke(255, 255, 0);
strokeWeight(1);
line(-10,325,410,325);
line(-10,75,410,75);
//The stroke function controls color and thickness of the paddle
stroke(255, 255, 0);
strokeWeight(5);
//This is the code that draws your paddle
rect(a[0],a[1]-10,1,20);
//this is the code that draws the enemy paddle
rect(b[0],b[1]-10,1,20);
//This is the code that draws the ball
rect(c[0]-1,c[1]-1,1,1);
//This shows score
fill(255, 255, 0);
textSize(50);
text(s,300,50);
text(s2,82,50);
//This is the end of the draw loop code posted out of the parenthesis will not be looped;};
