The general idea I had for the game is to have a little ship represented by two LEDs that could move in one dimension to avoid oncoming blocks. I wanted the blocks to come in randomly at intervals at 3 LED columns.
I created the program in the onReload function so that each time i pressed apply it would run.
sync function onReload(){
var posx = 4;
var endGame = [ 56,63,49,54,42,45,35,36,27,28,18,21,9,14,0,7];
var obsticles = [6+(7*4),3+(7*7),7];
const BBblock = await Kitsi.waitForBlock(BlockTypes.Breadboard);
Kitsi.onData(BBblock, function(data){
var joystick = data[1].value;
posx = shiftShip(joystick, posx);
});
//initialise LED block
const LEDblock = await Kitsi.waitForBlock(BlockTypes.LEDMatrix);
while (1){
var i = 0;
while (i<3){
//create ship array
var SHIP=[(posx*8)+7, (posx*8)+7+8];
//check for collision
if (Collision(obsticles, SHIP)){
try{
await Kitsi.APICall('setLights', [endGame], LEDblock);
await Kitsi.delay(2000);
}catch(e){
}
}
//Send coordinates to Display
var LEDpoints = SHIP.concat(obsticles);
try{
await Kitsi.APICall('setLights', [LEDpoints], LEDblock);
}catch(e){
}
//shift obstacles
shiftObsticles(obsticles, i);
i++;
}
}
}
First I set up the initial conditions of the game, such as the starting position of the ship and obstacles, as well as the end game cross.
For this project I found the WebSDK page helpful in configuring the breadboard block to constantly poll the joystick for data. By doing this I could continuously update the posx value that controls the location of the ship on the LED matrix.
The rest of the code goes through a continuous loop of:
- Updating the ship coordinates using the posx value.
- Checking for a collision between the ship and the obstacles
- Updating the LEDMatrix Block to show the new obstacle and ship positions
- Updating the obstacle positions
There is a counter i value that updates the state of the program. The reason for this is explained in the shiftObstacles function.
When a collision occurs the game will display an X and delay the game for 2 seconds before resuming again.
Shift ship
//update the position of the ship
function shiftShip(joystick, posx){
if (joystick > 34000 && posx < 6 ){
posx ++;
} else if (joystick <30000 && posx >0){
posx --;
}
return posx;
}
The shift ship function checks the joystick value as well as checking the current position, so that if you are already at the maximum/minimum positions you can not increment out of the bounds of the LED display. If the conditions are met, the function will return the incremented position of the ship.
shiftObstacles
//Generate obsticles and shift obsticles Right
function shiftObsticles(obsticles, state){
for (var element in obsticles){
obsticles[element] += 1;
}
if (state==1){
obsticles.shift();
} else if (state ==2){
//add random number generator
var next = Math.floor((Math.random() * 7) + 0);
obsticles.push(next*8);
}
}
This function goes through 3 states: an add state, delete state and do nothing state. The diagram I’ve drawn below shows how each state works, where each row represents a state. For this example I have simplified the 8*8 matrix to a 1*8 array. Once an obstacle reaches the end of the screen it must be deleted, which is the “delete” state. As there is a two LED gap between each obstacle there is a “do nothing” state. And after it has gone through the “delete” and “do nothing” state it can add another obstacle randomly.
Collision
//check the ship for collisions
function Collision(obs, ship){
for (var i in obs){
if (obs[i] == ship[1] || obs[i] == ship[0]){
console.log("CRASH");
return 1;
}
}
return 0;
}
The collision function iterates over each element in the ship array and the obstacle array to check that there are no duplicate numbers. Since the LED array has a number corresponding to each position in the matrix, if there are duplicated numbers it means they are occupying the same position and have “crashed”. It will return a 1 if this has occurred, which will trigger the end of the game in the main function.
Improvements
Some improvements that could be implemented in the future are:
-Add a score system by adding a finish line after a set number of rounds
-creating obstacles that move faster as the game progresses
-adding lives to the game
-allowing the ship to move in 2 dimensions.
-creating obstacles that move in diagonals.
-creating obstacles that move at different speeds.