Now that AI is attacking us and comments are starting to be heard like: “don't study programming, it's dead” or “it's a waste of time, spend it on something else”, I'm going to spend a few minutes reviewing, with as much detail as I can remember, some of the games I made while studying for my Multimedia degree at the Open University of Catalonia (UOC).
Before starting with the journey, I would like to make my opinion clear by answering that question I hear in many videos and comments on social networks:
Should I study programming or not?
The truth is that I've been doing things with various languages for years: HTML, JavaScript, Processing, PHP, C, C#... enjoying it a lot, as I like programming, but I don't consider myself a professional programmer. What's more, I know that the code I present to you has errors and in some cases will be spaghetti code or poorly structured, but it is what it is! That's how I did it and with it I overcame the problem, and the subjects with the best grades ☺️.
Honestly, I know from my own experience that if you don't practice programming every day, that *know-how* gets lost. The agility, how to build code, evaporates like nothing. You forget it easily. But something remains in your way of thinking: the way of structuring and tackling problems, planning, being decisive, dividing the goal into functions or small “milestones”... I don't know, I think learning to program changes the way you think and the logic of how you analyze problems or make decisions.
For that alone, IT'S WORTH LEARNING TO PROGRAM!
... Now, shall we move on to learning by playing?
All the examples I pass you are commented so that you can see why I do things, also I have ordered the games from low to high difficulty so you can plan the challenge of progressing. Use "View source code" in the browser or download the program with its attached source code.
GAME 1: THE BEGINNINGS (PONG)
Subject: Web Programming (HTML + CSS + JavaScript)
This was the first game I made about 10 years ago. A simple Pong, like the arcade machines of the early 80s, or those video game consoles that worked with 6k of memory or less (Palson).
With it, you can learn the concept of variables, value assignment and how to work with functions easily. We're also going to start touching HTML code and simple styles with CSS and from JavaScript you'll reassign the value of IDs to CSS, which will create the magic on screen.
You have to start by learning to draw a ball (a *box*) that bounces off the wall at the end of the screen. This is the first step. Later you can complicate the experience by creating the paddle, its movement and finally the collisions against the paddle. If you feel like it, I'll create a tutorial on how to do it easily. I'll give you the first lines of code... to get you started. 🙃
<html>
<head>
<style>
/* Ball Style */
#pelota {
width: 10px; /* ball width */
height: 10px; /* ball height */
background-color: black; /* black color */
position: absolute; /* allows moving with left and top */
left: 10px; /* initial horizontal position */
top: 50px; /* initial vertical position */
}
</style>
</head>
<body>
<!-- Element that will be the ball -->
<div id="pelota"></div>
<script>
// Get the HTML element with id "pelota"
const pelota = document.getElementById("pelota");
// Numerical variable that stores the horizontal position
let x = 10;
// Every 1000 ms (1 second), we move the ball 10 pixels to the right
setInterval(function () {
x = x + 10; // add 10 to the current position
pelota.style.left = x + "px"; // update the CSS left property
}, 1000);
</script>
</body>
</html>
SIMPLE GAME - (PONG - Full commented code of a simple PONG)
GAME 2: HANGMAN (Extra)
I didn't make this game for any subject; I designed it as a way to understand and teach my students about *arrays*.
The progression is quite clear: now that you know how to create variables, how to reassign their values and pass them to the DOM with HTML and CSS while generating functions, you must understand how to scale the content of an ARRAY. An *array* is a kind of container of one or several dimensions where we store data.
With a `FOR` type function you can learn to access and list all the content, as well as reassigning values to each of the elements:
// We create an array with several elements
let fruits = ["apple", "pear", "banana", "orange"];
// We traverse the array from position 0
for (let i = 0; i < fruits.length; i++) {
// i is the index: 0, 1, 2, 3...
// fruits[i] is the value in that position
console.log("Position " + i + ": " + fruits[i]);
}
I leave the code commented in case you want to tinker. The game has a simple *array* which is the word to guess, where the letters of the secret word are the elements of the *array* that you will scale and check. This is the natural progression from the first game. If you want, you can complicate it by creating a double *array*, the one with the secret words and the one with the current word to guess… all are ideas for you to progress ;)
HANGMAN GAME - (HANGMAN - Full commented code of hangman)
DOWNLOAD ZIP - (HANGMAN ZIP)
GAME 3: COLLECTING EGGS
Subject: Digital Content Integration
I think that now that you know how to interpret part of the code, define variables, create functions and traverse an *array*, it's time to make things look nice. This is something I've had clear throughout my career: Making things look nice multiplies the user experience by 1000.
Easy code like PONG can become something very attractive with a couple or three images… look at the change.
IMPROVED PONG GAME - COMMENTED CODE
Therefore, I propose you redo PONG by calling images or this alternative with the same code complexity, but applied in another way and in another language: PROCESSING. This will help you understand that when you know how to program, changing the scenario (YOUR LANGUAGE) is simply a matter of adapting to the new environment… it's not complicated.
GAME WITH PROCESSING - Game applying a different language: Processing
GAME 4: Connect 4 with Processing.
Subject: Digital Content Integration
In this game, interaction with two players is worked on, the array technique is deepened, developing multiple data matrices and complex variables. The functions also start to be at another level of difficulty, collecting data and processing results. I recommend reading it calmly and I attach a document that can guide you in the learning and understanding. As always, remember that AI can translate it to your language in a few seconds.
Download the zip with the compiled EXE and sources to understand the programming - PDF
NEW CHALLENGES: THE PHYSICS
Subject: Mathematics and Physics for Video Games
We are going to give this section a bit more space in our blog, as I think it is important for our learning.
In the first game (PONG) you applied movement and collisions which are part of physics in video games, but this gets complicated if you want to do multiple collisions of objects or movements that have acceleration, mass contrast, gravity... all this can be programmed. We will do it later applying laws of kinetics and mathematics, but now in our progress it will help us to make things easy.
Let's load a library like physicsjs from JavaScript and see what can be done with it and a little imagination! And as always, dressing everything up with graphics that help us visually not to bore the product, to make it attractive.
First test: accelerations and collisions with "Crazy Hen"
Second test: the "Enchanted Castle"
Now that we've tinkered a bit with the library, we're going to put it to the test with a couple of games I presented (read the comments to see how the code evolves).
GAME 5: INVADERS (ThreeJS - OOP)
In this test, we apply a 3D library to the delivery project. It's not a great game, but it helps us see how we can easily apply a 3D view to our game. I remember it was an attempt to get closer to object-oriented programming, with classes and so on.
Invaders game: with object-oriented programming
GAME 6: CrazyBirds (HTML + JS + physicsjs + JQUERY)
A game that was very popular, based on one of the many exercises I did with the physics library, with which I took a new honors and my 3rd publication in the official university magazine, MOSAIC.
The goal is to put the eggs in the tree baskets; if you want to get extra time you have to hit the magpie and watch out for the snake not eating the eggs. The truth is it turned out very well! I spent a few hours on the keyboard.
CrazyBirds game: using PhysicsJS
LATEST CHALLENGES: ADVANCED PHYSICS AND VR
We reach the end of the article with the last games, close to the end of my degree, where the complexity has increased notably.
GAME 7: BUBBLE BLOCK (Subject: Physics)
Here the complexity lies in applying collisions, modifications of angles and behaviors based on laws of physics and trigonometry calculations. I do not recommend analyzing the code unless you have an advanced level or want to suffer if you don't love physics.
The interface allows activating the visualization of angles (A) of the application when the ball passes from the sky to a sea where there is a different density, or when it hits a brick. The code describes how scenarios are loaded through *arrays* automatically: you just draw how you want the bricks to come out and the algorithm does the work for you. Very cool.
GAME 7: BUBBLE-BLOCK.EXE - DOWNLOAD CODE ZIP
GAME 8: IN SEARCH OF THE KEYS (HTML + JS + AFRAME)
Made for the Virtual Reality subject, adapting the AFRAME library to replicate RA environments over the web. This experience seeks to investigate how we can make a 3D adventure with user interactions: you can move through the stage and the goal is to select objects with the crosshair. It loads free 3D models corrected with 3D Studio Max.
Experience in VR: using AFRAME
GAME 9: FlyingFree (HTML + CSS + JS + AFRAME)
We reach the end of our journey. This game was worthy of a new honors and praise from the teacher. I remember escaping by motorcycle to Valencia for Christmas and returning to finish it because I was quite obsessed. Yes, I'm a bit obsessive when I get something into my head!
My last degree game: FlyingFree
It's a summary of many things: 3DMax for models and textures, programming at all levels and external libraries for the staff composition. The goal is to capture the musical notes of the melody in order; if you make a mistake, the staff is erased. Also, to get time, you have to shoot the evil pirates who steal the eggs!
With the `W` key you give gas to the plane; with the mouse you move and the `space` key fires projectiles…
And that's all, friends! I hope you've had as much fun as I did learning how to program them. Now it's your turn to make game number 10; this can't stay like this! 🤣
By the way! Programming ROCKS! 😊 Let that be clear!