Lightnews — Scholar-powered news

Elijah Seed-Arita [INTDEV] @elij.dev · 1d

thanks! my original intention was to switch to a proper blog, but maybe i'll stick with the threads for now!

1

Elijah Seed-Arita [INTDEV] @elij.dev · 1d

glad you liked it, maybe i'll continue this way!

Elijah Seed-Arita [INTDEV] @elij.dev · 2d

That's it. Here's the final product. You have a player that can move around. This is a very basic game, but I hope it gets your imagination running. I plan to continue this series with a lot more info.

What medium would people prefer? Video, blog, or continuing like this?

1 6

Elijah Seed-Arita [INTDEV] @elij.dev · 2d

Cool, now the screen gets cleared. Lastly, to make this a "game", let's add some basic controls. Instead of blindly incrementing x and y every frame, let's do it if keys are pressed down. We can add keydown and keyup listeners and toggle some booleans.

1 3

Elijah Seed-Arita [INTDEV] @elij.dev · 2d

1 1

Elijah Seed-Arita [INTDEV] @elij.dev · 2d

Something happened, but it looks like it's dragging across the screen! We just need to clear the screen before we redraw.

1 1

Elijah Seed-Arita [INTDEV] @elij.dev · 2d

1

Elijah Seed-Arita [INTDEV] @elij.dev · 2d

We can start to make this square move around. Let's create variables for x and y and use them for the position of the square. Then we can move rendering of the square into an "update" function, and update the x and y every frame. Then we set the function to be called repeatedly to make it move.

1 1

Elijah Seed-Arita [INTDEV] @elij.dev · 2d

Now, we can use the context (ctx) to draw something on the screen. The parameters for fillRect are (x, y, width, height). Now our program is already doing something!

1 2

Elijah Seed-Arita [INTDEV] @elij.dev · 2d

To start the script, we can get the canvas and make a context out of it.

1 1

Elijah Seed-Arita [INTDEV] @elij.dev · 2d

Next, we can add a canvas element and a script. The canvas is where the game will render and it has an ID of "c" so we can get it in the code later. And the script will contain the javascript code for the game.

1 1

Elijah Seed-Arita [INTDEV] @elij.dev · 2d

We only need one file. I'll create index.html somewhere convenient, with a basic HTML structure.

1 1

Elijah Seed-Arita [INTDEV] @elij.dev · 2d

Wanted to share how easy it is to create a simple game in JavaScript. Set aside about 20 minutes, this is what we'll create today - a player you can control with WASD.

2 9 39

Elijah Seed-Arita [INTDEV] @elij.dev · Aug 25

yeah, i don't think i had a single element that was not auto layout actually. i almost wonder if i'm slowing myself down by overusing it haha

1 3

Elijah Seed-Arita [INTDEV] @elij.dev · Aug 25

welcome back to the trenches, you shall remember the rage of battle soon enough

1 1

Elijah Seed-Arita [INTDEV] @elij.dev · Aug 24

engineer's design practice 0x3
linear sidebar study

compared to writing code, figma makes me feel like a slug. rn it takes me longer to build out a design in figma than to literally code it. but it's important to try new mediums, and it may help me learn to think differently!

1 12

Elijah Seed-Arita [INTDEV] @elij.dev · Aug 24

FEAR NOT WE WILL TRIUMPH

1 2

Elijah Seed-Arita [INTDEV] @elij.dev · Aug 24

NOOOOOOOOOOOOOOO

1 1

Elijah Seed-Arita [INTDEV] @elij.dev · Aug 7

always so many things to do. but i'm doing what i love! : )

4

Elijah Seed-Arita [INTDEV] @elij.dev · Jul 11

today's release, super basic text formatting

1 4

Elijah Seed-Arita [INTDEV] @elij.dev · Jul 11

wasn't able to finish it tonight, but got somethin cool-ish dropping tomorrow. for now GN🛏️

5

Elijah Seed-Arita [INTDEV] @elij.dev · Jul 9

another quick diagram.page fix from this morning

- first node being place at the wrong position due to a missing useEffect dependency

editing process is starting to feel a lot smoother, but still lots to do!

diagram.page

Simple flowchart builder

diagram.page

1 3

Elijah Seed-Arita [INTDEV] @elij.dev · Jul 8

just published some bug fixes for diagram.page

- shift+click not selecting multiple nodes
- node menu getting hidden by other nodes
- delete hotkey removing nodes that were previously selected and then deselected
- google auth
- nodes not selectable after dragging

1 3

Elijah Seed-Arita [INTDEV] @elij.dev · Jul 4

seems like svg paths are starting to become a common thread in my work B)

2

Elijah Seed-Arita [INTDEV] @elij.dev · Jun 10

more work on pathfinding for diagram.page. trying to preserve the bezier lines when there's an obstruction, instead of defaulting to hard angles.

it's pretty janky rn but i'm starting to feel fairly confident about shipping this feature in the near future once fixed!

4