Skip to content

Commit 1a2e2d1

Browse files
jeffThompsonjeffThompson
committed
Games!
1 parent 4467bbf commit 1a2e2d1

27 files changed

+626
-0
lines changed

‎Week10-YouVoteWeLearn/Code/Asteroids/bullet.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
class Bullet {
2+
constructor(ship) {
3+
// set the bullet's position to the ship
4+
// (we have to use copy() otherwise the
5+
// ship will move with the bullet!)
6+
this.position = ship.position.copy();
7+
8+
// fancy math!
9+
// this calculates the amount we need to move
10+
// the bullet in x/y to travel at a particular angle
11+
// we give it the ship's angle, then multiply by
12+
// 5 (or any other number) to give it a speed
13+
this.speed = createVector(
14+
cos(ship.angle) * 5,
15+
sin(ship.angle) * 5
16+
);
17+
}
18+
update() {
19+
this.position.add(this.speed);
20+
}
21+
display() {
22+
fill(255, 150, 0);
23+
noStroke();
24+
circle(this.position.x, this.position.y, 8);
25+
}
26+
}
27+

‎Week10-YouVoteWeLearn/Code/Asteroids/enemy.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
class Enemy {
2+
constructor() {
3+
this.position = createVector(
4+
random(50, width-50),
5+
random(50, height-50)
6+
);
7+
this.dia = int(random(10, 30));
8+
9+
this.angle = random(0, TWO_PI);
10+
this.rotationSpeed = radians(random(-2,2));
11+
12+
// keep track of whether this enemy has been
13+
// hit or not
14+
this.isHit = false;
15+
}
16+
update() {
17+
// spin around!
18+
this.angle += this.rotationSpeed;
19+
20+
// check if hit by a bullet
21+
for (let i=0; i<bullets.length; i++) {
22+
// vectors give us a really easy way to calculate distance!
23+
let d = this.position.dist(bullets[i].position);
24+
25+
// if the distance is less than the enemy's diameter,
26+
// it's a hit! (and return immediately to avoid any
27+
// unecessary looping))
28+
if (d < this.dia/2) {
29+
this.isHit = true;
30+
return;
31+
}
32+
}
33+
}
34+
display() {
35+
push();
36+
translate(this.position.x, this.position.y);
37+
rotate(this.angle);
38+
fill(0,150,255);
39+
noStroke();
40+
rectMode(CENTER);
41+
square(0,0, this.dia);
42+
pop();
43+
}
44+
}
45+

‎Week10-YouVoteWeLearn/Code/Asteroids/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<title>Sketch</title>
8+
9+
<link rel="stylesheet" type="text/css" href="style.css">
10+
11+
<script src="libraries/p5.min.js"></script>
12+
</head>
13+
14+
<body>
15+
<script src="enemy.js"></script>
16+
<script src="bullet.js"></script>
17+
<script src="ship.js"></script>
18+
<script src="sketch.js"></script>
19+
</body>
20+
</html>

‎Week10-YouVoteWeLearn/Code/Asteroids/jsconfig.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es6"
4+
},
5+
"include": [
6+
"*.js",
7+
"**/*.js",
8+
"/Users/jeffthompson/.vscode/extensions/samplavigne.p5-vscode-1.2.13/p5types/global.d.ts"
9+
]
10+
}

‎Week10-YouVoteWeLearn/Code/Asteroids/libraries/p5.min.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Week10-YouVoteWeLearn/Code/Asteroids/libraries/p5.sound.min.js

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Week10-YouVoteWeLearn/Code/Asteroids/ship.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
class Ship {
2+
constructor() {
3+
this.speed = 3;
4+
this.angleIncrement = radians(3);
5+
this.position = createVector(width/2, height/2);
6+
this.angle = 0;
7+
}
8+
update(direction) {
9+
// MOVE for forward!
10+
// (kind of a hack, MOVE is a keyword usually
11+
// used to set the mouse cursor!)
12+
if (direction === MOVE) {
13+
this.position.x += cos(this.angle) * this.speed;
14+
this.position.y += sin(this.angle) * this.speed;
15+
16+
if (this.position.x < 0) this.position.x = width;
17+
else if (this.position.x > width) this.position.x = 0;
18+
if (this.position.y < 0) this.position.y = height;
19+
else if (this.position.y > height) this.position.y = 0;
20+
}
21+
// RIGHT for clockwise, LEFT for counter-clockwise
22+
else if (direction === RIGHT) {
23+
this.angle += this.angleIncrement;
24+
}
25+
else if (direction === LEFT) {
26+
this.angle -= this.angleIncrement;
27+
}
28+
}
29+
display() {
30+
push();
31+
translate(this.position.x, this.position.y);
32+
rotate(this.angle);
33+
fill(0);
34+
noStroke();
35+
triangle(
36+
-10, -10,
37+
10, 0,
38+
-10, 10
39+
);
40+
pop();
41+
}
42+
}
43+

‎Week10-YouVoteWeLearn/Code/Asteroids/sketch.js

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
/*
2+
ASTEROIDS
3+
Jeff Thompson | 2013 | jeffreythompson.org
4+
5+
https://freeasteroids.org
6+
7+
See the other Javascript files for more details!
8+
9+
CHALLENGES
10+
1. Can you draw a more interesting shape for our
11+
asteroids? (Hint: try using randomized vertices,
12+
created in the constructor))
13+
2. Can you make the asteroids move across the
14+
screen? Can you remove them if they go offscreen?
15+
3. Could you limit the number of bullets available?
16+
17+
*/
18+
19+
let ship;
20+
let bullets;
21+
let enemies;
22+
let score = 0;
23+
24+
function setup() {
25+
createCanvas(windowWidth, windowHeight);
26+
noCursor();
27+
28+
// create our ship in the center
29+
ship = new Ship();
30+
31+
// and an empty list of bullets
32+
bullets = [];
33+
34+
// make a few enemies too
35+
enemies = [];
36+
for (let i=0; i<3; i++) {
37+
let e = new Enemy();
38+
enemies.push(e);
39+
}
40+
}
41+
42+
function draw() {
43+
background(220);
44+
45+
fill(0);
46+
noStroke();
47+
text('SCORE: ' + score, 15,20);
48+
49+
// use left/right to rotate the ship,
50+
// up to move forward
51+
// note: keyIsDown() lets us check for
52+
// multiple key presses at once!
53+
if (keyIsDown(UP_ARROW)) {
54+
ship.update(MOVE);
55+
}
56+
if (keyIsDown(LEFT_ARROW)) {
57+
ship.update(LEFT);
58+
}
59+
if (keyIsDown(RIGHT_ARROW)) {
60+
ship.update(RIGHT);
61+
}
62+
if (keyIsDown(32)) { // 32 = space in ASCII
63+
let b = new Bullet(ship);
64+
bullets.push(b);
65+
}
66+
ship.display();
67+
68+
// update and draw the bullets
69+
for (let i=0; i<bullets.length; i++) {
70+
bullets[i].update();
71+
bullets[i].display();
72+
}
73+
74+
// and finally go through the enemies!
75+
// note we do this in reverse order; this is
76+
// so we can remove one that is hit (trying
77+
// this in normal order would cause an error,
78+
// since the length of the list would change!)
79+
for (let i=enemies.length-1; i>=0; i-=1) {
80+
enemies[i].update();
81+
82+
// the isHit variable will be set to true
83+
// in the update() function if it hits an enemy
84+
if (enemies[i].isHit) {
85+
// remove the current enemy from the list!
86+
// (and update the score)
87+
enemies.splice(i, 1);
88+
score += 1;
89+
}
90+
// if not hit, display as usual
91+
else {
92+
enemies[i].display();
93+
}
94+
}
95+
96+
// randomly generate some new enemies
97+
// (or when we've destroyed them all!)
98+
if (random(0, 100) < 0.5 || enemies.length === 0) {
99+
enemies.push(new Enemy());
100+
}
101+
}
102+

‎Week10-YouVoteWeLearn/Code/Asteroids/style.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
html, body {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
canvas {
7+
display: block;
8+
}

‎Week10-YouVoteWeLearn/Code/Pong-MultiBall/ball.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
class Ball {
2+
constructor() {
3+
this.dia = 20;
4+
this.respawn();
5+
}
6+
update() {
7+
this.position.add(this.speed);
8+
9+
// collision with paddle, reverse!
10+
let hit = this.checkCollision(paddle);
11+
if (hit) {
12+
this.speed.x *= -1;
13+
score += 1;
14+
}
15+
// past left edge, respawn!
16+
// (and reduce score by 1)
17+
if (this.position.x < 0) {
18+
this.respawn();
19+
score -= 1;
20+
}
21+
// bounce off left edge
22+
if (this.position.x > width - this.dia/2) {
23+
this.speed.x *= -1;
24+
}
25+
// bounce off top/bottom too
26+
if (this.position.y < this.dia/2 || this.position.y > height - this.dia/2) {
27+
this.speed.y *= -1;
28+
}
29+
}
30+
display() {
31+
fill(0);
32+
noStroke();
33+
circle(this.position.x, this.position.y, this.dia);
34+
}
35+
respawn() {
36+
this.position = createVector(width-this.dia*2, height/2);
37+
this.speed = createVector(
38+
random(-2, -5),
39+
random(-5, 5)
40+
);
41+
}
42+
checkCollision(p) {
43+
if (this.position.x - this.dia/2 < p.x + p.w/2 &&
44+
this.position.y > p.y - p.h/2 &&
45+
this.position.y < p.y + p.h/2 &&
46+
this.speed.x < 0) {
47+
return true;
48+
}
49+
return false;
50+
}
51+
}
52+

0 commit comments

Comments
 (0)