Khan Academy CS games

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.

Penalty Shoot-Out (2-players)

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;
    }
};

Cheesy Puzzle Game

/**********************
  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;
    }  

};

Asteroids Game

/*
  =====================
  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);
    }
};