From 9caedc7c581062f5842a43f935c91824707a3c20 Mon Sep 17 00:00:00 2001 From: Steve Ortiz Date: Fri, 6 Apr 2018 11:35:00 -0500 Subject: [PATCH] Add short format version --- short-format.js | 200 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 200 insertions(+) create mode 100644 short-format.js diff --git a/short-format.js b/short-format.js new file mode 100644 index 0000000..d9251cd --- /dev/null +++ b/short-format.js @@ -0,0 +1,200 @@ +// Recreate Asteroids +// https://www.youtube.com/watch?v=WYSupJ5r2zo + +// There are lots of suggestions to try changing and enhancing this game. +// Look for the word TRY in comments below. + +// You may find this website helpful to learn more about the p5.js, used +// to make drawing easy: +// https://p5js.org/reference/ + +const ship = { + x: 0, + y: 0, + vx: 0, + vy: 0, + heading: -90 +}; + +function drawShip() { + push(); + stroke('white'); // TRY changing the ship color to 'yellow' + translate(ship.x, ship.y); + rotate(ship.heading); + + // The front of the ship points along the X-axis and the left wing is + // along the Y-axis. The center of your ship should be at 0, 0. + + // TRY changing the shape of the ship + // Can you add a cockpit to the design? + + beginShape(); + vertex(10, 0); + vertex(-10, 10); + vertex(-5, 0); + vertex(-10, -10); + endShape(CLOSE); + + pop(); +} + +function checkInput() { + let turn = 0; // 0 goes straight, -1 turns left and 1 turns right + let accelerate = false; + let fire = false; + + if (keyIsDown(UP_ARROW)) { + accelerate = true; + } + if (keyIsDown(LEFT_ARROW)) { + turn = -1; + } + if (keyIsDown(RIGHT_ARROW)) { + turn = 1; + } + if (keyIsDown(32)) { + fire = true; + } + + updateShip(turn, accelerate); + updateWeapons(fire); +} + +// TRY changing how your ship flies by adjusting these... +const TURN_SPEED = 3.0; +const ACCELERATION = 0.1; +const MAX_SPEED = 5.0; + +function updateShip(turn, accelerate) { + ship.heading += turn * TURN_SPEED; + ship.x += ship.vx; + ship.y += ship.vy; + if (accelerate) { + ship.vx += cos(ship.heading) * ACCELERATION; + ship.vy += sin(ship.heading) * ACCELERATION; + const speed = sqrt(sq(ship.vx) + sq(ship.vy)); + if (speed > MAX_SPEED) { + ship.vx *= MAX_SPEED / speed; + ship.vy *= MAX_SPEED / speed; + } + } + wrap(ship); +} + +function wrap(object) { + + // Reference: + // top of the screen is y = 0 + // bottom of the screen is y = windowHeight + // left edge of the screen is x = 0 + // right edge of the screen is x = windowWidth + + if (object.y < 0) { + object.y += windowHeight; + } + if (object.y > windowHeight) { + object.y -= windowHeight; + } + + if (object.x < 0) { + object.x += windowWidth; + } + if (object.x > windowWidth) { + object.x -= windowWidth; + } + +} + +function draw() { + clear(); + background(0); // black + stroke(255); // white, the default color if not set elsewhere + noFill(); + + checkInput(); + drawShip(); + drawWeapons(); +} + +function centerShip() { + ship.x = windowWidth/2; + ship.y = windowHeight/2; +} + +function setup() { + angleMode(DEGREES); + centerShip(); + createCanvas(windowWidth, windowHeight); +} + +function windowResized() { + resizeCanvas(windowWidth, windowHeight); +} + +// Weapon Systems +// For more information on arrays, see +// https://www.w3schools.com/js/js_arrays.asp + +const weapons = { + chargeTime: 0, // 0 is ready to fire + bullets: [] +}; + +// TRY changing some properties of how the ship fires its weapons +const BULLET_RADIUS = 5; +const BULLET_SPEED = 7.0; +const CHARGE_TIME_PER_SHOT = 20; + +function drawWeapons() { + weapons.bullets.forEach((bullet) => { + push(); + stroke('white'); // TRY changing the bullet colors + // Can you make each bullet a different color? + translate(bullet.x, bullet.y); + ellipse(0, 0, BULLET_RADIUS, BULLET_RADIUS); + pop(); + }); +} + +function updateWeapons(fire) { + if (fire && weapons.chargeTime <= 0) { + + // TRY firing more than one direction when the user holds shift + + weapons.bullets.push(newBullet(ship.heading)); + weapons.chargeTime = CHARGE_TIME_PER_SHOT; + } else if (weapons.chargeTime > 0) { + // decrease weapon chargeTime until it is 0 + weapons.chargeTime--; + } + + // advance bullets + weapons.bullets.forEach((bullet) => { + bullet.x += bullet.vx; + bullet.y += bullet.vy; + // TRY making the bullets wrap + }); + + // keep only those bullets that are still in view + weapons.bullets = weapons.bullets.filter( + // TRY making the bullets dissapear after 5 seconds instead + b => b.x >= 0 && b.y <= windowWidth && b.y >= 0 && b.y <= windowHeight + ); +} + +function newBullet(heading) { + const cosHeading = cos(heading); + const sinHeading = sin(heading); + return { + x: ship.x + cosHeading * 10, + y: ship.y + sinHeading * 10, + vx: cosHeading * BULLET_SPEED, + vy: sinHeading * BULLET_SPEED + }; +} + +// Still looking for more to try? +// TRY adding asteroids +// TRY adding collision detection between all the things +// - asteroids destroy your ship +// - bullets destroy asteroids and your ship