Aaron Lee – Final Project

sketch

/*
Aaron Lee
Section C
sangwon2@andrew.cmu.edu
Final Project
*/

var canvaswidth = 640;
var canvasheight = 480;

var myCaptureDevice;
var brightnessThreshold = 50;
var darknessThreshold = 45;
var theBrightnessOfTheColorAtPxPy = 100;
var px = 30;
var py = 30;

var gamelogo;
var spacefighter;
var invader = [];
var missile = [];
var score = 0;

var img_Invader, img_spacefighter, img_Missile,img_background;


function setup() {//creating camera for the background
   createCanvas(canvaswidth, canvasheight);
   myCaptureDevice = createCapture(VIDEO);
   myCaptureDevice.size(canvaswidth, canvasheight); // attempt to size the camera. 
   myCaptureDevice.hide(); // this hides an unnecessary extra view.
   
}

function preload(){ //preloading the reference images
    img_Invader = loadImage("https://i.imgur.com/hBZOUxR.png");
    img_spacefighter = loadImage("https://i.imgur.com/wJPVqdo.png");
    img_Missile = loadImage("https://i.imgur.com/0O0UGN4.png");
    gamelogo = loadImage("https://i.imgur.com/hBZOUxR.png");
}

spacefighter = {
    x : 140,
    width : 30,
    y : 400,
    height: 30,
    draw : function() {
        image(img_spacefighter, this.x, this.y, this.width, this.height);
    }
}

//--------------------------------------//invader
function Invader(I) {
    I.active = true;
    I.x =random(640);
    I.y = 0;
    I.width = 50;
    I.height = 50;
    I.speed = 2;
    I.inBounds = function(){
        return I.x >= 0 & I.y >= 0 && I.x < canvaswidth - I.width && I.y < canvasheight - I.height;
    }
    I.draw = function(){
        image(img_Invader, I.x, I.y, I.width, I.height);
    }
    I.update = function(){
        I.active = I.active & I.inBounds();
        I.y += I.speed;
    }
    return I;

    function trlUpdate() { //this is the part where the code unfortunately doesn't work
   //fetch the color of the pixel at the (px,py)
   var theColorAtPxPy = myCaptureDevice.get(this.px, this.py);
   //compute its birghtness
   theBrightnessOfTheColorAtPxPy = brightness(theColorAtPxPy);
   //if the textrainletter is in a bright area, move downwards
   if (theBrightnessOfTheColorAtPxPy > brightnessThreshold) {
   this.py++;
   }
   //else if it's in a dark area, move up until we're in a light area
   while (theBrightnessOfTheColorAtPxPy < darknessThreshold & py > 0) {
     theColorAtPxPy = myCaptureDevice.get(px, py)
     theBrightnessOfTheColorAtPxPy = brightness(theColorAtPxPy);
     this.py--;  
   }
   //reset to initial place if falls off the screen
   if (this.py >= height) {
   this.py = 0;
   }
}
}

//--------------------------------------//missile
function Missile(I){
    I.active = true;
    I.x = spacefighter.x;//because both the missile and spacefighter share same origin
    I.y = spacefighter.y;
    I.width = 30;
    I.height = 30;
    I.speed = 10;
    I.inBounds = function(){
        return I.x >= 0 & I.y >= 0 && I.x < canvaswidth - I.width && I.y < canvasheight -  I.height;
    }
    I.update = function(){
        I.active  = I.active & I.inBounds();
        I.y -= I.speed;
    }
    I.draw = function(){
        image(img_Missile, I.x, I.y, I.width, I.height);
    }
    return I;
}


//--------------------------------------//shooting
function shooting(Invader, Missile){
    return Missile.x + Missile.width >= Invader.x & Missile.x < Invader.x + Invader.width &&
            Missile.y + Missile.height >= Invader.y && Missile.y < Invader.y + Invader.height;
}

function draw(){
    clear();
    myCaptureDevice.loadPixels();
   image(myCaptureDevice, 0,0);
   image(gamelogo, 30, 30);
    fill("red");
    textStyle(BOLD);
    textFont('Sprint2');
    textSize(20);
    text("HIGH SCORE : " + score, canvaswidth / 2 - 80, 20);
    if(keyIsDown(LEFT_ARROW)){              //left key configuration
        if(spacefighter.x - 3 >= 0)
            spacefighter.x -= 3;
        else
            spacefighter.x = 0;
    }
    if(keyIsDown(RIGHT_ARROW)){              //right key configuration
        if(spacefighter.x + 3 <= canvaswidth-spacefighter.width)
            spacefighter.x += 3;
        else
            spacefighter.x = canvaswidth - spacefighter.width;
    }
    if(keyIsDown(UP_ARROW)){              //up key configuration
        if(spacefighter.y - 5 >= 0)
            spacefighter.y -= 5;
        else
            spacefighter.y = 0;
    }
    if(keyIsDown(DOWN_ARROW)){              //down key configuration
        if(spacefighter.y + 5 <= canvasheight-spacefighter.height)
            spacefighter.y += 5;
        else
            spacefighter.y = canvasheight - spacefighter.height;
    }
    if(keyIsDown(32)){
        missile.push(Missile({}));
    }
    spacefighter.draw();              //draw spacefighter
    missile.forEach(function(Missile){//draw and update the missiles
        Missile.update();
        Missile.draw();
    });

    if(Math.random()<0.07){
        invader.push(Invader({}));
    }
    invader = invader.filter(function(Invader){
        return Invader.active;
    });
    invader.forEach(function(Invader){
        Invader.update();
        Invader.draw();
    });

    missile.forEach(function(Missile){
        invader.forEach(function(Invader){
            if(shooting(Invader, Missile)){
                Invader.active = false;
                Missile.active = false;
                score++;
            }
        });
    });

    invader.forEach(function(Invader){
        if(shooting(Invader, spacefighter)){
            Invader.active = false;
            noLoop();
            textStyle(BOLD);
            textFont('Sprint2');
            textSize(40);
            fill("red");
            text("continue? press f5", width / 2 - 160, height /2);
        }
    });
}

Instruction: 1) please allow camera access 2) you are a space fighter on an important mission. Use arrows keys for maneuver, and space bar to terminate space invaders 3) player who gets the higher score wins

*what didn’t work: 1)the pixels of the player in the background were supposed to buffer the velocity of the space invaders 2)the camera notification setting distracts the player in the beginning when the page is refreshed

I personally had lot of fun making this game as it really provoked my child experience with retro arcade games. I wanted to be selective in use of color, font and art in order to mimic the retro feelings.