These are games Alex and I made using the Khan Academy's computer science course tools. You can copy the code into the editor window to run these games.
var ballX = 200;
var ballY = 350;
var keeperX = 200;
var ballIsKicked = 0;
var keeperGoingRight = 1;
var keeperSpeed = 5;
var ballSpeed = 5;
var score = 0;
var scoreA = 0;
var scoreB = 0;
var playerUp = 1;
var draw = function(){
background(11, 184, 22);
if(playerUp === 1){
text("Player 1s go...", 170,200);
}
else{
text("Player 2s go...", 170,200);
}
// write the score
text(scoreA, 20,20);
text(scoreB,380,20);
// draw our goal
line(100,10,100,80);
line(300,10,300,80);
line(100,10,300,10);
// draw our keeper
ellipse(keeperX,20,20,20); // head
line(keeperX,30,keeperX,60); // body
line(keeperX,60,keeperX - 10,80); // left leg
line(keeperX,60,keeperX + 10,80); // right leg
line(keeperX,40,keeperX - 10,45); // left arm
line(keeperX,40,keeperX + 10,45); // right arm
// draw the ball
ellipse(ballX,ballY,20,20);
// draw our footballer
ellipse(210,320,20,20); // head
line(210,330,210,360); // body
line(210,360,220,380); // right leg
line(210,340,200,345); // left arm
line(210,340,220,345); // right arm
// kick the ball by pressing 'up'
if(keyIsPressed && keyCode === UP){
ballIsKicked = 1;
}
// move the leg when the ball is kicked
if(ballIsKicked === 0){
line(210,360,200,380); // left leg
}
else{
line(210,360,200,360); // left leg
}
// move the ball when kicked
if(ballIsKicked === 1){
ballY = ballY - ballSpeed;
}
if(keeperGoingRight === 1){
keeperX += keeperSpeed;
}
if(keeperGoingRight === 0){
keeperX -= keeperSpeed;
}
if(ballY < 80 && ballY > 10 && keeperX === ballX){
// Save!
keeperSpeed = 0;
ballSpeed = 0;
if(keyIsPressed && keyCode === DOWN){
ballSpeed = 5;
keeperSpeed = 5;
ballY = 350;
ballIsKicked = 0;
if(playerUp === 1){
playerUp = 2;
text("Player 2s go...", 200,200);
}
else{
playerUp = 1;
text("Player 1s go...", 200,200);
}
}
}
else if(ballY < 1){
//keeperSpeed += 1;
ballIsKicked = 0;
ballY = 350;
if(playerUp === 1){
scoreA ++;
}
else{
scoreB ++;
}
if(playerUp === 1){
playerUp = 2;
}
else{
playerUp = 1;
}
//score ++;
}
if(keeperX > 300){
keeperGoingRight = 0;
}
if(keeperX < 100){
keeperGoingRight = 1;
}
};
/**********************
James' puzzle game
==================
**********************/
// define the characters
var girl = getImage("cute/CharacterPrincessGirl");
var hero = getImage("cute/CharacterBoy");
// define objects
var chestOpen = getImage("cute/ChestOpen");
var chestClosed = getImage("cute/ChestClosed");
var star = getImage("cute/Star");
var gemGreen = getImage("cute/GemGreen");
var gemBlue = getImage("cute/GemBlue");
var gemOrange = getImage("cute/GemOrange");
var heart = getImage("cute/Heart");
var transporter = getImage("cute/Selector");
var thekey = getImage("cute/Key");
// landscape
var grass = getImage("cute/GrassBlock");
// define starting locations
var heroX = 0;
var heroY = 0;
var chestX = 5;
var chestY = 5;
var gemGreenX = 3;
var gemGreenY = 3;
var gemBlueX = 3;
var gemBlueY = 9;
var gemOrangeX = 7;
var gemOrangeY = 11;
var transporterX = 0;
var transporterY = 0;
var keyX = 7;
var keyY = 9;
var starX = chestX;
var starY = chestY - 1;
var girlX = 0;
var girlY = 12;
frameRate(7);
// define the starting states of objects
var gotGemGreen = 0;
var gotGemBlue = 0;
var gotGemOrange = 0;
var chestIsOpen = 0;
var gotKey = 0;
var gotStar = 0;
var gotHeart = 0;
var onTransporter = 0;
var gotGirl = 0;
var heroSizeX = 40;
var heroSizeY = 60;
var done = 0;
// create array of the xy pos of each block
var xPosList = [];
var yPosList = [];
var arrayCounter = 0;
for(var y = -15; y < 400; y+=30){
yPosList[arrayCounter] = y;
arrayCounter ++;
}
arrayCounter = 0;
for(var x = 0; x < 400; x+=40){
xPosList[arrayCounter] = x;
arrayCounter ++;
}
// draw loop
var draw = function(){
// move our hero about
if(keyIsPressed && keyCode === UP){
heroY --;
}
else if(keyIsPressed && keyCode === DOWN){
heroY ++;
}
else if(keyIsPressed && keyCode === RIGHT){
heroX ++;
}
else if(keyIsPressed && keyCode === LEFT){
heroX --;
}
// dodgy hack to slow the draw loop
// if(keyIsPressed){
// for(var futile = 0; futile < 10000000; futile ++){
// futile += 1;
// }
// }
/* ============ draw game objects on the canvas ============ */
background(0, 0, 0);
// draw the grass
for(var y = 0; y < 14; y ++){
for(var x = 0; x < 14; x ++){
image(grass, xPosList[x], yPosList[y], 40, 60);
}
}
// draw the chest closed unless it has been unlocked
if(chestIsOpen === 0){
image(chestClosed,
xPosList[chestX],
yPosList[chestY] - 15,
40,
60);
}
else{
image(chestOpen,
xPosList[chestX],
yPosList[chestY] - 15,
40,
60);
}
// draw the gems unless they have been collected
if(gotGemGreen === 0){
image(gemGreen,
xPosList[gemGreenX],
yPosList[gemGreenY] - 15,
40,
60);
}
if(gotGemBlue === 0){
image(gemBlue,
xPosList[gemBlueX],
yPosList[gemBlueY] - 15,
40,
60);
}
if(gotGemOrange === 0){
image(gemOrange,
xPosList[gemOrangeX],
yPosList[gemOrangeY] - 15,
40,
60);
}
// draw the key unless it has been collected
if(gotKey === 0 &&
gotGemGreen === 1 &&
gotGemOrange === 1 &&
gotGemOrange === 1){
image(thekey,
xPosList[keyX],
yPosList[keyY] - 15,
40,
60);
}
// draw the star if the chest is opened
// and when collected draw star above hero
if(chestIsOpen === 1 && gotStar === 0){
image(star,
xPosList[starX],
yPosList[starY] - 15,
40,
60);
}
else if(chestIsOpen === 1 && gotStar === 1){
image(star,
xPosList[heroX],
yPosList[heroY] - 45,
40,
60);
}
// draw the girl if the star has been collected
if(gotStar === 1 && gotGirl === 0){
image(girl,
xPosList[girlX],
yPosList[girlY] - 15,
40,
60);
}
// draw the transporter if the girl has been collected
if(gotGirl === 1){
image(transporter,
xPosList[transporterX],
yPosList[transporterY] - 15,
40,
60);
}
// draw collected objects at the top right, half size
if(gotKey === 1){
image(thekey,
330,
0,
20,
30);
}
if(gotStar === 1){
image(star,
350,
0,
20,
30);
}
if(gotGemGreen === 1){
image(gemGreen,
310,
5,
10,
15);
}
if(gotGemBlue === 1){
image(gemBlue,
290,
5,
10,
15);
}
if(gotGemOrange === 1){
image(gemOrange,
270,
5,
10,
15);
}
if(gotGirl === 1){
image(girl,
370,
0,
20,
30);
}
// draw our hero
image(hero,
xPosList[heroX],
yPosList[heroY] - 15,
40,
60);
// if the game is complete, black the bg and grow the hero
if(done === 1){
background(0, 0, 0);
image(hero,
xPosList[heroX],
yPosList[heroY] - 15,
heroSizeX,
heroSizeY);
heroSizeX ++;
heroSizeY ++;
heroSizeY ++;
}
/* ============ update state of game objects ============ */
// mark the key as collected
if(
keyX === heroX &&
keyY === heroY &&
gotGemGreen === 1 &&
gotGemOrange === 1 &&
gotGemOrange === 1
){
gotKey = 1;
}
// mark the gems as collected
if( gemGreenX === heroX && gemGreenY === heroY){
gotGemGreen = 1;
}
if( gemBlueX === heroX && gemBlueY === heroY){
gotGemBlue = 1;
}
if( gemOrangeX === heroX && gemOrangeY === heroY){
gotGemOrange = 1;
}
// mark the chest as opened
if(heroX === chestX && heroY === chestY && gotKey === 1){
chestIsOpen = 1;
}
// mark the star as collected
if(
heroX === starX &&
heroY === starY &&
chestIsOpen === 1
){
gotStar = 1;
}
// mark the girl as visited
if(
heroX === girlX &&
heroY === girlY
){
gotGirl = 1;
}
// mark the puzzle as complete
if(
gotGirl === 1 &&
heroX === transporterX &&
heroY === transporterY
){
done = 1;
}
};
/*
=====================
James' Asteroids game
=====================
*/
var boy = getImage("space/beetleship");
var speedMultiplier = 2;
var boyX = 20;
var boyY = 100;
var boyXspeed = 3 * speedMultiplier;
var boyYspeed = 3 * speedMultiplier;
var rock = getImage("cute/Rock");
var rockX = random(410,500);
var rockYmin = 50;
var rockYmax = 280;
var rockY = random(rockYmin,rockYmax);
var rockSpeed = 2 * speedMultiplier;
var starSpeed = 1 * speedMultiplier;
var starArrayX = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var starArrayY = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
for(var i = 1; i < 14; i++){
starArrayX[i] = random(0,400);
starArrayY[i] = random(0,400);
}
var score = 0;
var draw = function(){
// make it harder as time goes on
speedMultiplier *= 1.0001;
// draw the background
background(0, 0, 0);
fill(255, 255, 128);
text('your score: ',20,20);
text(score,85,20);
// draw the star field
for(var i = 1; i < 14; i++){
ellipse(starArrayX[i],starArrayY[i],3,3);
starArrayX[i] -= starSpeed * speedMultiplier;
if(starArrayX[i] < 0){
starArrayX[i] = 400;
}
}
// move the ship up
if (keyIsPressed && keyCode === UP) {
boyY -= boyYspeed * speedMultiplier;
}
// move the ship down
else if (keyIsPressed && keyCode === DOWN) {
boyY += boyYspeed * speedMultiplier;
}
// fire!
if (keyIsPressed && keyCode === RIGHT) {
fill(255,0,0);
rect(boyX+50,boyY+130,400,10);
// check if we hit the rock
// turn screen yellow and reset rock if so
// rock dimendions are ~80*80
if(boyY + 50 > rockY - 20 && boyY + 50 < rockY + 80 && rockX > boyX + 100){
rockX = random(410,500);
rockY = random(rockYmin,rockYmax);
background(255, 255, 0);
score ++;
}
}
// check for rock impact with ship
// see if the top of the rock is
// inbetween the top and bottom of the ship...
if(rockX < boyX + 120 && rockY + 70 > boyY + 110 && rockY + 70 < boyY + 170 ){
rockX = random(410,500);
rockY = random(rockYmin,rockYmax);
background(255, 0, 0);
score = 0;
}
// see if the bottom of the rock is
// inbetween the top and bottom of the ship...
if(rockX < boyX + 120 && rockY + 150 > boyY + 110 && rockY + 150 < boyY + 170 ){
rockX = random(410,500);
rockY = random(rockYmin,rockYmax);
background(255, 0, 0);
score = 0;
}
image(boy, boyX, boyY);
image(rock, rockX, rockY);
rockX -= rockSpeed * speedMultiplier;
if(rockX < -100){
rockX = random(410,500);
rockY = random(rockYmin,rockYmax);
}
};