Please pay attention to my Github repo and hope to learn more from each other! Github.com/mia1232/Cla…
If you like, please support Star 🌹🌹 will continue to update!
Super Mario Has always been one of our childhood memories, the classic background music, familiar game graphics and rich gameplay make it one of the most popular games in the 90’s, and also a classic IP in the game history. Mario was the most common game in the 1990s, whether on the red and white machines or computers. It was both simple and difficult, and different levels shaped different themes to create a rich and unique game world.
When I was writing this classic 2D side-scrolling game, I wondered if I could write it using javascript’s native API without any popular libraries and frameworks in the market.
Without a two-way binding framework like Vue, how to make the position changes of characters in the game reflect on the canvas in real time becomes a challenge
Obviously we need a Timer, and that’s where the requestAnimationFrame comes in. It constantly redraws the game at the browser’s own pace. For graphics, we can use Canvas’s native API to define different elements in the game with Sprite diagrams, whether it’s Mario himself, or bricks/ground/sky/enemies. Then draw them to the game canvas according to the config file. For Mario’s characters, we modeled their speed, gravity, and other familiar movements, and bound their actions, such as walking and jumping, to the corresponding mouse events, so that they could move flexibly in the level card.
During each frame of the game, we do collision detection, and if Mario hits bricks or the ground, we should stop him by setting his speed in that direction to zero. Also, think about how to eliminate blocks if Mario goes up on them.
Only the first level of the game has been written, there are more features to be expanded, so stay tuned!
