Resources 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

Resources

Resources for Game Developers

1. Visual Studio Code Setup for Game Development

Visual Studio Code (VS Code) is a powerful code editor that is highly customizable and works well for JavaScript and HTML5 game development.

Why Use VS Code?

  • Lightweight and fast.
  • Extensive extensions marketplace.
  • Built-in Git integration.
  • Supports multiple programming languages.

How to Set Up Visual Studio Code for Game Development

  1. Download and Install:

    • Download VS Code from here.
    • Follow the installation instructions for your operating system.

  2. Set Up Extensions:

  3. Set Up Git Integration:

    • VS Code has Git built-in, allowing you to easily manage version control.
    • Check out this tutorial on setting up Git in VS Code: How to Use Git in VS Code

  4. Enable Debugging:

Tutorials for VS Code Setup:

2. GitHub Setup for Game Development

GitHub is a version control platform that helps you manage your game projects and collaborate with other developers.

Why Use GitHub?

  • Helps you track changes and collaborate with others.
  • Essential for deploying games via GitHub Pages.
  • Free hosting for static sites (like your HTML5/JavaScript games).

How to Set Up GitHub for Game Development

  1. Create a GitHub Account:

    • Go to GitHub and sign up for a free account.

  2. Install Git:

  3. Connect VS Code with GitHub:

  4. Creating and Pushing Your First Game Repository:

    • Create a new repository on GitHub for your game project.
    • Learn how to push your local game files to GitHub with this GitHub Beginner's Guide.

  5. Deploy Your Game on GitHub Pages:

GitHub Tutorials:

3. Brackets Setup for Game Development

Brackets is an open-source code editor designed specifically for web development, with built-in support for HTML, CSS, and JavaScript.

Why Use Brackets?

  • Live Preview feature to see changes in real-time.
  • Lightweight and beginner-friendly.
  • Open-source and free to use.

How to Set Up Brackets for Game Development

  1. Download and Install:

    • Download Brackets from here.
    • Follow the installation instructions for your OS.

  2. Set Up Extensions:

  3. Enable Live Preview:

    • Brackets comes with a built-in live preview feature that allows you to see changes instantly in your browser while editing your HTML5/JavaScript game code.
    • Learn how to use Live Preview with this Live Preview Tutorial.

  4. Manage Game Projects:

    • You can organize your game files (HTML, CSS, JavaScript) and access them quickly within Brackets’ file structure.

Tutorials for Brackets Setup:

Additional Tools for Game Development:

  1. Phaser.js – A fast, open-source game development framework for making HTML5 games. Learn more here.
  2. Three.js – A JavaScript library for creating 3D games on the web. Learn more here.
  3. Tiled Map Editor – A tool for creating game maps and levels. Learn more here.

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