I have been exploring using AFrame and vanilla javascript a lot more in the last week to create simple game like experiences. I like A-Frame ease of use and though I think in some ways it can be hard to make something that feels 'polished' with it, for purely experimental fun little side project like these two it can be nice and simple to try out ideas with it. What promoted these two random games was in fact randomness! So I have been playing a bit with generating elements of a level in games for the last 6 months, mostly on playcanvas projects, and looking more into procedural generation, and wanted to apply this in a simple setting. I started as simple as it can get - generating a random numbers of cubes!
CubeGen
CubeGen is a simple game whereby you have to find the white cubes from a randomly generated amount of cubes with a shimmering texture look to them. In the first version of the game I just created it on a typical plane with no walls, and the player had to push through the boxes to find the correct one, but it felt like it lacked a certain dynamic to make it more interesting.
So after a day or two I decided to really start playing with the A-Frame physics system component some more, figured out how to create a fly cam which worked with collisions etc and put it in zero gravity. I go into it more in the video below but the actual code is fairly simple - Do some DOM manipulation with js combined with utilising A-Frames component system to detect collision event and then a fair amount of for loops to create the 'random' cubes to the game area. There is more info below along with an overview on the original prototype if you are interested.
Overviews on CubeGen conception
Final Game
Source:
drnoir
/
find-the-boxes-gen
Small experimental game made with AFrame and JS - find all the white boxes amongst the randomly generated boxes
CubeGen
by Chris Godber
Game Aim
Find the white boxes
Current Version - 3.0
Experimental A-Frame project / game using AFrame, AFrame physics component / vanilla js to create a fun arcade style game.
Procedurally generated cube collection game
Collect all the generated portal cubes (the cube you see on the right) before the
timer runs out and avoid the negative boxes
which will damage your health.
The number of cubes is randomly generated according to the difficulty
Controls: Keyboard: WASD - Movement Mouse: Click and drag to rotate
Play on Itch.io - https://drnoir.itch.io/cubegen
Play:
https://drnoir.itch.io/cubegen
After I made CubeGen I wanted to extend the idea a little further and make something a little different so I of course opted for cats! Much of the code and logic was copied from the CodeGen project but the main difference was trying to create random movement for the cats which was sort of implemented but needs some refining and fixing still. There is a more in-depth overview below.
Overview of Chase the Cats
Source:
drnoir
/
chasethecats
Another experiment in creating random generated stuff in A-Fame- catch the cats in a randomly generated enviroment
Chase the Cats
Experiment with A-Frame by Chris Godber
Funny little experiment with A-Frame and randomness, building on CubeGen project I wanted to create something a bit more zany and to experiment somewhat more with environment generation.
In this project mountains and trees are generated, and a random number of cats (up to 40) which the player then has to catch.
This was made for fun, feel free to fork, build on it, look at it, poke around etc etc
Might work on it again sometime but as I said weird little experiment. It could certainly be made more of a 'game'
Controls
- WASD - Move
- Mouse - Look around
Libraries / Dependencies
- A-Frame
- A-Frame Extras
- A-Frame Physics System
- A-Frame Mountains Component
- A-Frame Simple Sun Sky
Game logic etc is contained in main.js, everything else is just minified js for each dependency
Top comments (0)