HackMIT Blueprint


Last weekend, I attended [LancerHacks](https://lancerhacks.com), which was an
in-person, 12 hour hackathon held at St. Francis High School. I teamed up with
Shubham (<GitHub>ShubhamPatilsd</GitHub>) and Gautam
(<GitHub>eternalmoon1234</GitHub>) and we created
[GeoChattr](https://geochattr.netlify.app), a chat webapp that allows you to
chat through drawings. GeoChattr also puts you into a chat room based on the
city you're located in, allowing you to chat with those who are close by.

## Opening Ceremony

This was cool! I found Shubham because he was wearing a
:fn[[CodeDay](https://codeday.org) hoodie]{#1}. The organizers talked about the
schedule and events and stuff and there were speeches by :fn[Paula Golden]{#2}
and Prasanthi Sathyaprakash. Then we went to the main event venue to start
hacking!

## Coming up with an Idea

We had already brainstormed some ideas for the theme of **Doodle the Future**,
and we decided to create GeoChattr. To get started, we needed to create a
design. Taking inspiration from Paula Golden's speech, where she mentioned
doodling on napkins, we decided to draw our design on a napkin instead of using
a tool like Figma.

![](./napkin_design.jpeg)

Despite the pen tearing the napkin, it was quite effective; 10/10, would
recommend.

## Hacking

Then we started coding. I mostly worked on the
[frontend](https://github.com/GeoChattr/website) of the chat app, while Gautam
worked on the [backend](https://github.com/GeoChattr/api) and Shubham worked on
connecting the two. Initially, the process went pretty smoothly; we chose a
stack of

- Next.js for the frontend
- TailwindCSS for styling
- Socket.IO for realtime chatting

After dealing with some CORS errors and the school's wifi blocking railway.app,
we were able to get chatting working. However, when we tried to integrate user
authentication, we ran into lots of issues. We didn't know how to connect the
sign in on the backend with the client on the frontend, and ended up scrapping
the entire auth system and just storing usernames in localstorage. By that time,
we were running short on time so we had to rush to finish everything up.

We also had problems deploying the backend; initially we wanted to deploy to
[Railway](https://railway.app), however, it was blocked by the school's wifi. So
we settled on putting it on [Replit](https://repl.it) with
[Uptime Robot](https://uptimerobot.com) to ping the Repl and keep it awake. It
was pretty slow, but it worked! And by the time we were scheduled to demo, we
had a working and deployed webapp!

## Other Events

Throughout the entire day, there were speakers from various companies and other
events going on. For the scavenger hunt, we were tasked with finding 3D-printed
llamas and letters that spelled out **Doodle the Future**. Shubham and I went
around the library and hacking area looking for them. We didn't find them all
but it was still nice to take a break from hacking.

![a 3d printed llama](./llama.jpg)

## Presentations and Results

We barely prepared for the presentation, only outlining what we were going to
say (inspiration, problems we faced, then a demo). I think our presentation went
pretty well and the judges seemed engaged. We saw that almost every team had
made a presentation, which we had not, so we were a bit nervous about that.

After we presented, there was some time for the judges to deliberate so Shubham
and I went around and advertised CodeDay. People seemed pretty interested but we
didn't get many signups 😢.

At the awards ceremony, I was super surprised to see that we had won third
place! Afterwards, it was fun to check out everyone else's project on
[Devpost](https://lancerhacks-v.devpost.com/project-gallery).

## Overall Thoughts

LancerHacks was definitely super fun; even though we were a bit rushed for time
with our project, I had a great time actually meeting people irl. Thank you to
all the organizers who made LancerHacks possible and Shubham and Gautam for
being amazing teammates!

If you want to check out our project, links below:

- [Website](https://geochattr.netlify.app)
- [Github Organization](https://github.com/GeoChattr)
- [Devpost Submission](https://devpost.com/software/geochattr)

[^1]: Sign up for CodeDay!!
[^2]: Which we were _quite_ inspired by, as you'll see later


LancerHacks V


import player from "./player.png";

I decided to try out [Hack Club's Game Lab](https://gamelab.hackclub.com); it's
a super easy way to make a game. To test it out, I implemented a simple
[dino game](https://gamelab.hackclub.com/?id=a9257c9fb5c19a077842fd7e0048e419).

![A video of gameplay](./game.mp4)

## Tutorial

<div className="py-4 not-prose bg-yellow-100 dark:bg-yellow-700 px-6 rounded-2xl">
<h3 className="mt-0 font-medium text-lg text-yellow-700 dark:text-yellow-50 mb-1">Warning!</h3>

This tutorial was made with gamelab version `0.2.3`. If the code doesn't work,
try switching to that version.

</div>

Go to [gamelab.hackclub.com](https://gamelab.hackclub.com). On the left, you'll
see the editor, which has some starter code in it. the top right has the console
where the game will run, and the bottom right has an editor for sprites and
tunes.

![The gamelab editor](./editor.png)

Here's the example code:

```js
const engine = createEngine(gameCanvas, 300, 300);
engine.start();
```

The first line initializes the game engine, and you can pass in the width and
height of the canvas as the second and third parameters to `createEngine`. The
second line starts the engine.

For our dino game, we'll create a canvas that is $600$ by $300$.

```js
const e = createEngine(gameCanvas, 600, 300);
e.start();
```

### Adding a sprite

Add a sprite named `player` in the sprite editor. You can then draw your player;
mine is shown below. Once you've added a sprite, you can access it in the code
by using the variable `player`.

<Image
  className="image-pixelated"
  height="320"
  width="320"
  src={player}
  quality={100}
/>

Let's add the player to the game! Using the `e.add()` function, we can add an
object.

```js
const e = createEngine(gameCanvas, 600, 300);
e.start();

// add the player
e.add({
  sprite: player,
  solid: true,
  x: 70,
  y: 250,
  scale: 2,
});
```

With that, our player will be added to the game. Run the game (you can use the
shortcut <kbd>Shift</kbd> + <kbd>Enter</kbd>), and you'll see the player appear
on the screen!

Coordinates are calculated such that the top left corner is at $(0, 0)$, and `x`
increases as we move left, while `y` increases as we move down. The default
origin for our object is at the top left, though this can be changed by setting
`origin` in the options passed to `e.add()`. So for our player, the top left of
the sprite is at $(70, 250)$.

![The player's sprite](./player_in_game.png)

Similarly, we can add a floor by making a sprite named `floor`, then updating
our code with:

```js
// add the floor
e.add({
  tags: ["floor"],
  solid: true,
  sprite: floor,
  x: 0,
  y: 290,
  scale: 20,
});
```

We've also included a tag for the floor, which will be used later to identify
it.

### Making movement

Our game objects can also include a `collides()` function, which will be called
when the object collides with another object. The `collides()` function is
passed two arguments: the object itself and the object it has collided with.

We can get keypresses with the `e.pressedKey()` function, so we'll have the
player jump when the spacebar is pressed. We only want the player to be able to
jump when it's on the floor, so we'll check that the object we are colliding
with has a tag of `floor`. If the player is on the floor and the spacebar is
pressed, we can give it an upwards velocity, which will make it jump.

```js
e.add({
  sprite: player,
  solid: true,
  x: 70,
  y: 250,
  scale: 2,
  collides(me, them) {
    // jump when space key is pressed
    if (e.pressedKey(" ")) {
      if (them.hasTag("floor")) {
        me.vy = -680;
      }
    }
  },
});
```

Now the player will go up when the spacebar is pressed, but it won't come back
down. To do that, we need to simulate gravity. Game objects can also have an
`update()` function that will be called every frame, so we can use this to
increase the y-velocity every frame. Feel free to play around with these values
to make the jumping seem realistic.

```js
e.add({
  sprite: player,
  solid: true,
  x: 70,
  y: 250,
  scale: 2,
  collides(me, them) {
    // jump when space key is pressed
    if (e.pressedKey(" ")) {
      if (them.hasTag("floor")) {
        me.vy = -680;
      }
    }
  },
  update(me) {
    // gravity
    me.vy += 48;
  },
});
```

### Adding obstacles

Draw a sprite with name `obstacle`, then we can add it to the game.

```js
// add an obstacle
e.add({
  tags: ["obstacle"],
  sprite: obstacle,
  origin: [1, 1],
  x: 300,
  y: 290,
  scale: 2,
});
```

![The game with an obstacle added](./added_obstacle.png)

In the dino game, obstacles move left towards the player, while the player stays
in the same positions, so this is what we'll do. Give the obstacle an `update()`
function that moves it left at a constant speed. When the obstacle is off the
screen, we can remove it from the game.

```js
e.add({
  tags: ["obstacle"],
  sprite: obstacle,
  origin: [1, 1],
  x: 300,
  y: 290,
  scale: 2,
  update(me) {
    me.x -= 5;
    if (me.x < 0) {
      e.remove(me);
    }
  },
});
```

Since we'll want to continually add obstacles to the game, we can make an
`addObstacle()` function to reuse our code. We'll pass in the `x` position of
the obstacle. Replace the `e.add()` call with the code below:

```js
const addObstacle = (x) => {
  e.add({
    tags: ["obstacle"],
    sprite: obstacle,
    origin: [1, 1],
    x,
    y: 290,
    scale: 2,
    update(me) {
      me.x -= 5;
      if (me.x < 0) {
        e.remove(me);
      }
    },
  });
};

addObstacle(300);
```

After the obstacle goes off the screen, we'll want to add another obstacle. We
can do this by calling the `addObstacle` function when the current obstacle
leaves the screen. We'll also add the initial obstacle at a position of $620$ so
it comes in from the right of the screen.

```js
const addObstacle = (x) => {
  e.add({
    tags: ["obstacle"],
    sprite: obstacle,
    origin: [1, 1],
    x,
    y: 290,
    scale: 2,
    update(me) {
      me.x -= 5;
      if (me.x < 0) {
        e.remove(me);
        addObstacle(620);
      }
    },
  });
};

addObstacle(620);
```

### Ending the game

If the player runs into an obstacle, we need to end the game. In the player
object's `collides()` function, we'll check if the player has collided with an
obstacle, and if so, we can use the `e.end()` function to end the game. We'll
also add some text with the `e.addText()` function.

```js
collides(me, them) {
  // jump when space key is pressed
  // ...

  // end the game if the player hits an obstacle
  if (them.hasTag("obstacle")) {
    e.end();
    e.addText("GAME OVER", 300, 100, {
      size: 28
    });
  }
},
```

### Randomizing obstacles

We now have a playable dino game, but the obstacles all start at the same
position. Let's add some randomness to make this more interesting. To add
obstacles at random positions, we'll store the current obstacles in an array,
`obstacles`. When we need to add a new obstacle, we'll add it at a random
obstacle from the last obstacle in the array, which makes sure that the
obstacles have enough space between them.

We can use this function to get a random number between two values:

```js
const randInRange = (min, max) => Math.random() * (max - min) + min;
```

And apply it by updating the `addObstacle()` function:

```js
// list of obstacles
const obstacles = [];

const addObstacle = (x) => {
  const obs = e.add({
    tags: ["obstacle"],
    sprite: obstacle,
    origin: [1, 1],
    x,
    y: 290,
    scale: 2,
    update(obj) {
      obj.x -= 5;
      if (obj.x < 0) {
        e.remove(obj);
        const nxt = Math.max(
          620,
          obstacles[obstacles.length - 1].x + randInRange(180, 400)
        );
        obstacles.shift();
        addObstacle(nxt);
      }
    },
  });
  obstacles.push(obs);
};

// initialize 3 obstacles
addObstacle(randInRange(620, 700));
addObstacle(randInRange(900, 1050));
addObstacle(randInRange(1250, 1400));
```

Now, the obstacles will start at random positions, making the game a lot more
fun!

![Randomized obstacles](./random_obstacles.mp4)

## Final code

Here's the code for the entire game. You can try it out here:
[https://gamelab.hackclub.com/?id=a9257c9fb5c19a077842fd7e0048e419](https://gamelab.hackclub.com/?id=a9257c9fb5c19a077842fd7e0048e419).
Let me know in the comments below if you make your own version of this game!

```js
const e = createEngine(gameCanvas, 600, 300);

// add the player
e.add({
  sprite: player,
  solid: true,
  x: 70,
  y: 250,
  scale: 2,
  collides(me, them) {
    // jump when space key is pressed
    if (e.pressedKey(" ")) {
      if (them.hasTag("floor")) {
        me.vy = -680;
      }
    }
    // end the game if the player hits an obstacle
    if (them.hasTag("obstacle")) {
      e.end();
      e.addText("GAME OVER", 300, 100, {
        size: 28,
      });
    }
  },
  update(me) {
    // gravity
    me.vy += 48;
  },
});

// add the floor
e.add({
  tags: ["floor"],
  solid: true,
  sprite: floor,
  x: 0,
  y: 290,
  scale: 20,
});

const randInRange = (min, max) => Math.random() * (max - min) + min;

// list of obstacles
const obstacles = [];

const addObstacle = (x) => {
  const obs = e.add({
    tags: ["obstacle"],
    sprite: obstacle,
    origin: [1, 1],
    x,
    y: 290,
    scale: 2,
    update(obj) {
      obj.x -= 5;
      if (obj.x < 0) {
        e.remove(obj);
        const nxt = Math.max(
          620,
          obstacles[obstacles.length - 1].x + randInRange(180, 400)
        );
        obstacles.shift();
        addObstacle(nxt);
      }
    },
  });
  obstacles.push(obs);
};

// initialize 3 obstacles
addObstacle(randInRange(620, 700));
addObstacle(randInRange(900, 1050));
addObstacle(randInRange(1250, 1400));

e.start();
```


If you made your own version of this game, leave a comment below with the link!

HackMIT Blueprint

Learnathon

Hackathon

General Thoughts

Footnotes

Table of Contents

Tags

Previous post

Next post