Mission Control
By
@Aamina
- 3 Devlogs
- 6 Total hours
a game where you move the ship by you head!
Ship #1
Changes requested
I built Mission Control, a browser game where you steer a spaceship using your webcam and it tracks motion by comparing video frames. I’m most proud of the motion tracking itself, since something that simple ends up feeling responsive, and the pause button, which matters more than it seems in a webcam game where you might need to stop mid-session! also also it can also track hands!! yayy
The trickiest part wasn’t turning the camera on, but everything around it ! keeping the mirrored movement intuitive, tuning the motion-sensitivity threshold so it’s neither jittery nor unresponsive, and making sure the ship holds its position instead of snapping to a corner when you’re not moving.
2h 14m 8s logged
DEVLOG # 3:
FINAL DEVLOG yaayyayyayyyayyyyy
sooo MISSION CONTROL is a browser game you play by moving your head in front of your webcam In case you dont have webcam, dont worry, you can use keyboard!
Sooo I wrotw the JS and CSS code and it all finaallyy works.
In JavaScript I set the camera setup, motion tracking, game state, physics/collision, rendering, main loop.For asteroids,spawnInterval inside update() controls how fast asteroids start appearing.The 0.35 smoothing factor in sampleMotion() and the dt*8 easing in update() control how snappy or floaty the ship feels.Defined all colors once as CSS variables at the top of css file. The canvas size is determined by width/height attributes on canvas (both the HTML attribute and the W/H constants near the top of the script). This runs entirely client-side, at low resolution, so it’s cheap enough to do every frame without a GPU or external API. There’s no face/head-detection model involved.
56m 26s logged
DEVLOG # 2:
Guyss everything is going southh evrything that coud go wrong went wrong! i cant see the google font i imported, the enable camera button is not working maybe once i write the complete script it will start to function properly..defined te resettgame, startcamera and sampleMotion , the start camera is NOT working idk i should look into it however this is how it looks till now:
(same as before ik lol)
2h 27m 30s logged
Heyy guys im gonna be making a simple game in HTML,CS and JS where you have a spaceship and have to avoid asteroids(the obstacles) and try to catch the orbs(that increase your score), the twist however is that you dont move with keyboard keys but rather with your head!
Wanted to post a devlog on my progress earlier but power got cut and internet was gonee anyways here is my DEVLOG:
DEVLOG # 1:
In my HTML file, I determined the structure of the project,to stream the wbecam used the video tag and canvas tag for where the game is to be played and then used 3 overlays for start,game over and camera denied screen, also added track sensitivity just in case its no picking up your motion
The CSS fIle gave the look of my game, I first determined the colors,made the background a gradient,then positioned 4 L-shaped boders at each corner.
idk why my google fonts is not working tho
Still need to work on the JS file to determine the logic and functionality
should i change the font size?
