In this tutorial, we are going to cover how to create a clone of the mobile game Crossy Road with Three.js. The goal of this game is to move a character through an endless path of static and moving obstacles. We have to go around the trees and avoid getting hit by a car or a truck.
There's a lot to cover in this tutorial: we are going to start with setting up the scene, the camera, and the lights. Then we learn how to draw the player and the map with the trees, the cars, and the trucks. We cover how to animate the vehicles, and we add event handlers to move the player through the map. Finally, we had hit detection between the cars and the player.
👉 You can find the whole game and its source code on
https://JavaScriptGameTutorials.com
0:00 Introduction
0:41 Setting up the Game
12:20 Rendering the Map
23:26 Adding Shadows
26:48 Animating the Vehicles
29:11 Moving the Player
36:46 Restricting Player Movement
39:26 Following the Player
43:04 Generating the Map
48:36 Score Indicator
49:44 Hit Detection and Result Screen
53:21 Next Steps
This game is based on the mobile game Crossy Road: https://en.wikipedia.org/wiki/Crossy_Road
Website — http://javascriptgametutorials.com/
CodePen — https://codepen.io/HunorMarton
LinkedIn — https://www.linkedin.com/in/hunor-marton-borbely
#threejs #javascript #game #canvas #codepen
