Tutorials or Blog Skip to main content

I'm Back

 Hi guy!... If You're one of the few people that come to this blog, you know for sure that it's been quite some time since the last post. I had a lot to do in the past couple of years. Almost 2 years already. Time flies by so fast! I got my Bachelor's degree. Currently, i'm pursing a Master's degree in Information System Management. But since i wanted to come back, i wanted to relearn myself all that i had forgotten. This Tutorial i'm about to give to you is how i relearned things step by step after so long. With AI these days, people sometimes think that they can do work more faster, but they don't work at all. They AI is making the work for them. And while trying to relearn things, i was tempted to use AI to go faster. But getting code from AI makes you dumber than you think when you are a beginner and don't have solid foundation. So this blog is dedicated to the creation of games using JavaScript. One of the best tools you could use in JavaScript to m...
Post a Comment

Tutorials or Blog

View all tutorials

Comments

Post a Comment

Popular posts from this blog

Mastering Collision Detection in HTML5 Games: A Complete Guide

Introduction: Creating interactive and dynamic gameplay often relies heavily on collision detection. Whether you're creating platformers, puzzle games, or even fast-paced shooters, mastering collision mechanics can significantly enhance the feel and playability of your game. In this post, we’ll dive deep into how to implement collision detection using JavaScript and HTML5’s canvas , discussing key methods, common issues, and optimizations. 1. What is Collision Detection? At its core, collision detection is a way of determining when two objects in your game occupy the same space. When two game elements—like a player and an enemy—collide, we need the game to recognize that event so we can react appropriately, such as reducing health, triggering an animation, or moving an object. 2. Types of Collision Detection There are several types of collision detection methods, but here are the most common for 2D games: Axis-Aligned Bounding Box (AABB): The simplest method, where you check if t...
Post a Comment
Read more

Adding Menus and Shop Systems to Your Ball Shooter Game

 Introduction In this part of the tutorial, we will take the Ball Shooter Game to the next level by adding essential game components like a menu system and a shop . The menu will provide options to start a new game, access the shop, or quit. The shop will allow players to purchase new beam shapes and other in-game features. By the end of this post, you’ll have a functional menu and shop system integrated into your game. So, let’s dive in! 1. Adding a Menu System First, we’ll create a basic menu that will include buttons to start the game, go to the shop, and exit. We’ll be using HTML, CSS, and JavaScript to build this. HTML Let’s start by creating a simple menu in the HTML file. HTML < div id = "menu" class = "menu" > < h1 > Ball Shooter Game </ h1 > < button onclick = "startGame()" > Start New Game </ button > < button onclick = "openShop()" > Shop </ button > < button oncli...
Post a Comment
Read more

Creating Games with HTML5: The Basics of the "canvas" Element

Introduction: In this tutorial, we’ll dive into one of the most powerful features in HTML5 for game development: the <canvas> element. This is what you’ll use to render graphics and create interactive animations in your browser-based games. We’ll start by learning how to set up a canvas, draw simple shapes, and build the foundation for more complex game mechanics. What is the <canvas> Element? The <canvas> element in HTML5 provides a drawable region in your webpage, allowing you to use JavaScript to draw 2D shapes, images, and animations dynamically. It is one of the fundamental building blocks of many modern browser games. Step 1: Setting Up the Canvas First, let’s set up a basic canvas in your HTML file. Create a new HTML file and add the following code: html <!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, ini...
Post a Comment
Read more