Game Cycle

Loop

The RayCasting projection needs to be redrawed for every render iteration. In this step, we will create a simple thing that will be just the loop render creation, and the most important function of the tutorial, the RayCasting function. Other function we need also to create is the clear screen function, to clear the draw and do it again.

Create the rayCasting() function. This function will not have the logic yet:

/**
 * Raycasting logic
 */
function rayCasting() {}

And then, create the clear screen function. The content of it is just the canvas cleaner logic:

/**
 * Clear screen
 */
function clearScreen() {
    screenContext.clearRect(0, 0, data.screen.width, data.screen.height);
}

To finish, create the main() function that will be our main loop. In this, we will need a interval to create a render thread. Use the renderDalay data value to be the delay for every render cicle iteration. After create the function, we can call it already where it will be the start function of the code:

// Start
main();

/**
 * Main loop
 */
function main() {
    setInterval(function() {
        clearScreen();
        rayCasting();
    }, data.render.dalay);
}

Good! The next step is the most important step of the entire tutorial. This is the source logic of RayCasting. Good luck!

• Next: RayCasting
• Previous: Utilities