![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2020/08/stop-banner.png)
/*
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.
