![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2020/08/stop-banner.png)
For this project I wanted to create a game, but not one of those kinds where you feel anxious and competitive while playing the game.
So I created this game where you can enjoy the winter scenery and a cute dog running while given a bit of an entertainment of being able to move around the dog and its sled to collect the presents.
How to:
Use the left/right arrow keys to move around the dog and its sled.
Use the space bar to generate more presents (will be falling from the sky)
NEVER HOLD THE KEY DOWN!!!
The sliding motion of the presents was to re-enact the real time inertia of the objects.
//Claire Koh
//juyeonk@andrew.cmu.edu
//Section E
//Final Project
var frames = []; // An array to store the puppy images
var x = 0; // Variable to draw out an image from the array
var houses = []; // An array to store the house images
var housepics = []; // Array to store the passing by houses
var terrainSpeed = 0.0015;
var terrainDetail = 0.01;
var stars = []; // Array to store the snowflakes
var puppyX = 270; // Initial x position of the puppy
var puppyY = 330; // Initial y position of the puppy (remains the same throughout)
var presents = []; //Array to store the newly created presents
function setup() {
createCanvas(600, 426);
frameRate(13)
// Creates the snowflakes at the beginning
for (var g = 0; g < 150; g ++) {
var ry = random(width);
stars[g] = makeStar(ry);
}
// Creates the houses at the beginning
var x = 0;
for(var i = 0; i < 4; i++) {
var newHouse = new House();
newHouse.image = housepics[i];
newHouse.x = x;
if(i == 2) {
newHouse.width = 300;
newHouse.y = 120;
}
x += 300;
houses.push(newHouse);
}
// Creates the presents at the beginning
for (i = 0; i <= width; i +=40) {
presents.push(new Present());
}
}
function preload(){
var filenames = [];
filenames[0] = "https://i.imgur.com/Dv85eeW.png";
filenames[1] = "https://i.imgur.com/kRjE8sW.png";
filenames[2] = "https://i.imgur.com/AZLU597.png";
filenames[3] = "https://i.imgur.com/8wakuK8.png";
filenames[4] = "https://i.imgur.com/7mD1cW9.png";
filenames[5] = "https://i.imgur.com/tqUCgkx.png";
filenames[6] = "https://i.imgur.com/yQ4WaYh.png";
//Loads the images into the frames[] array
for (var i = 0; i < filenames.length; i ++) {
frames[i]= loadImage(filenames[i]);
}
var housepic =[];
housepic[0] = "https://i.imgur.com/RNMEypc.png";
housepic[1] = "https://i.imgur.com/NgL94xZ.png";
housepic[2] = "https://i.imgur.com/TRsZkpd.png";
housepic[3] = "https://i.imgur.com/X6qFGHM.png";
housepic[4] = "https://i.imgur.com/TKd1cpX.png";
housepic[5] = "https://i.imgur.com/uVz8Spc.png";
// Loads teh images into the housepics[] array
for (var j = 0; j < housepic.length; j ++) {
housepics[j] = loadImage(housepic[j]);
}
}
function draw() {
background(200);
var sky1 = color(27, 36, 49);
var sky2 = color(30, 55, 92);
for (var c = 0; c <= height; c += 1) {
var amt = map(c, 0, height/2, 0, 1);
var skygradient1 = lerpColor(sky1, sky2, amt);
noStroke();
fill(skygradient1);
rect(0, c, width, 1);
}
for (var i = houses.length-1; i>=0; i--){
houses[i].render();
houses[i].move();
}
createHillShadow();
createHill();
//SLED
stroke(0);
strokeWeight(1);
line(puppyX-10, puppyY+68, puppyX+25, puppyY+50)
push();
noStroke();
fill(112, 100, 35);
ellipse(puppyX-10, puppyY+68, 8);
strokeWeight(8);
stroke(112,100,35);
line(puppyX-100, puppyY+50, puppyX-80, puppyY+67.5);
noStroke();
rect(puppyX-80, puppyY+64, 70, 8);
pop();
//PUPPY
image(frames[x], puppyX, puppyY, 90, 90);
x += 1;
if (x > 6) {
x = 0;
}
for (var i = 0; i < presents.length; i++) {
presents[i].draw();
presents[i].move();
presents[i].update();
}
//SNOW
updateAndDisplayStars();
removeStarsThatHaveSlippedOutOfView();
addNewStarsWithSomeRandomProbability();
//INSTRUCTIONS
push();
if (frameCount < 50) {
fill(255);
textAlign(CENTER);
text("Use left/right arrow keys to move the puppy", width/2, height/2 - 40)
text("Press the spacebar to generate more presents", width/2, height/2 - 20)
text("Try to collect as many presents as you want but you don't have to!", width/2, height/2)
pop();
}
}
// Function to create the presents
function Present() {
this.x = random(width);
this.y = -50;
this.width = this.height = 20;
this.velocity = random(1,5);
this.R = random(100,255);
this.G = random(100, 255);
this.B = random(100, 255);
this.w = -20
this.draw = function() {
noStroke();
fill(this.R,this.G,this.B,200)
rect(this.x, this.y, this.width, this.height);
push();
stroke(255);
line(this.x, this.y+10, this.x + this.width, this.y + 10)
line(this.x + 10, this.y, this.x + 10, this.y + this.width)
pop();
}
this.move = function() {
this.y += this.velocity;
}
this.update = function() {
if (this.y >= height-52 & this.y <= height && abs((puppyX-50)-this.x) < 40) {
this.y = height-52;
this.velocity = 0;
}
if (keyIsDown(LEFT_ARROW) & this.velocity == 0) {
this.x -= 10;
}
if (keyIsDown(RIGHT_ARROW) & this.velocity == 0) {
this.x += 10;
}
}
}
function keyPressed(){
// Generates more presents
if (keyCode === 32) {
for (i = 0; i <= width; i +=40) {
presents.push(new Present());
}
}
// Moves the puppy with the left/right arrow keys
if (keyCode === LEFT_ARROW) {
puppyX -= 10;
if (Present.velocity == 0) {
presents[i].x -= 10;
}
}
if (keyCode === RIGHT_ARROW) {
puppyX += 10;
if (Present.velocity == 0) {
presents[i].x += 10
}
}
}
// Draws House
function House(){
this.x = width;
this.y = 180;
this.width = 200;
this.speed = 6;
this.image;
this.render = function(){
image(this.image,this.x, this.y, this.width, this.width);
}
this.move = function(){
this.x -= this.speed;
if (this.x < -200) {
this.x = width + 100;
}
this.remove = function() {
if (this.x < -150) {
return true;
}
else {
return false;
}
}
}
}
//BACKGROUND ELEMENTS
// Draws the snowflakes
function updateAndDisplayStars(){
// Update the lantern's positions, and display them.
for (var i = 0; i < stars.length; i++){
stars[i].move();
stars[i].display();
}
}
function removeStarsThatHaveSlippedOutOfView(){
var starsToKeep = [];
for (var i = 0; i < stars.length; i++){
if (stars[i].x> 0) {
starsToKeep.push(stars[i]);
}
}
stars = starsToKeep;
}
function addNewStarsWithSomeRandomProbability() {
// With some possibility, add new snowflakes
var newStarLikelihood = 0.8;
if (random(0,1) < newStarLikelihood) {
stars.push(makeStar(width));
}
}
// Makes the snowflakes move
function starMove() {
this.x -= this.speed*1.2;
}
// Draws the snowflakes
function starDisplay() {
noStroke()
fill(255, this.transparency);
ellipse(this.breadth, this.x, this.size)
}
function makeStar(birthLocationX) {
var star = {x: birthLocationX,
y: random(10,70),
breadth: random(width),
breadthy: random(height),
speed: random(0.1,4),
move: starMove,
display: starDisplay,
size: random(2,7),
transparency: random(150, 255)
}
return star;
}
// Creates the shadow of the hill
function createHillShadow() {
var noiseScale = 0.001;
var forestDetail = 0.0005;
var forestSpeed = 0.0005;
for (var g = 0; g < width; g++) {
h = (g * forestDetail * 7 + millis() * forestSpeed/8);
i = map(noise(h), 0, 1, 40, 100);
stroke(30,70);
line(g, i+200, g, height-80);
}
}
// Creates the hill
function createHill() {
var noiseScale = 0.001;
var forestDetail = 0.0005;
var forestSpeed = 0.0005;
for (var g = 0; g < width; g++) {
h = (g * forestDetail * 8 + millis() * forestSpeed/4);
i = map(noise(h), 0, 1, 40, 100);
stroke(255);
line(g, i+250, g, height);
}
}
Yes, I am aware the snow is going upward and Yes I did that on purpose.