Introduction to PFP For Web-client Game Programming Using HTML, CSS, and JavaScript

Web-client game programming involves developing interactive applications that run directly in a user's web browser.
These games utilize HTML for structure, CSS for styling, and JavaScript for dynamic interactions.
By leveraging the power of modern web technologies, developers can create engaging and responsive gaming experiences.

・HTML

Title Tag: <title>Your Page Title</title> - Defines the title displayed in the browser tab.

For example, this is a web page's title is Introduction

Canvas Tag: <canvas> </canvas> - The `<canvas>` element is used to draw graphics dynamically using JavaScript.
It allows for rendering animations, game graphics, and real-time data visualization.

For example, this is a simple blue rectangle drawn on the canvas: The canvas has a width of 200 pixels and a height of 100 pixels.
The rectangle is drawn at position (50, 25) with a width of 100 pixels and a height of 50 pixels. The fill color is set to blue.

Key attributes used:

width and height - Defines the size of the canvas.
getContext("2d") - Retrieves the 2D rendering context.
fillStyle - Sets the color of the shape.
fillRect(x, y, width, height) - Draws a rectangle at position (x, y) with the specified dimensions.

Below is the JavaScript code used to draw the rectangle:

                
                <script>
                   var canvas = document.getElementById("myCanvas");
                   var ctx = canvas.getContext("2d");
                   ctx.fillStyle = "blue";
                   ctx.fillRect(50, 25, 100, 50);
                </script>

・CSS

CSS Attributes: Follow the key-value format.

Three Ways to Define CSS: Inline, Internal, External.
However, in these five games, we only use Internal CSS to style the elements.
This means that all the styles are written inside the <style> tag within the <head> section of the HTML document.

CSS Selectors: There are three main ways to select elements in CSS.

#id - Selects an element by its unique ID.
.class - Selects elements that share the same class name.
element - Selects all elements of the specified type.

Example:

                
                <style>
                   /* Selects the entire body element */
                   body {
                       background-color: lightgray;
                   }
                   
                   /* Selects all elements with class 'div' */
                   .div {
                       color: blue;
                   }
                   
                   /* Selects all  elements */
                   p {
                       font-size: 18px;
                   }
                </style>

Here are some example attributes:

Examples:

background-color - Defines the background color of an element. It accepts:
- Predefined Color Names (e.g., red, blue, green)
- HEX Values (e.g., #FF0000 for red, #00FF00 for green, #0000FF for blue)
- RGB Values (e.g., rgb(255, 0, 0) for red, rgb(0, 255, 0) for green, rgb(0, 0, 255) for blue)
- HSL Values (e.g., hsl(0, 100%, 50%) for red, hsl(120, 100%, 50%) for green, hsl(240, 100%, 50%) for blue)
cursor - Controls the appearance of the mouse pointer when hovering over an element. Options include:
- pointer - Indicates a clickable item, commonly used for buttons and links.
- default - Resets the cursor to the system's default arrow.
- crosshair - Displays a crosshair, often used in design and drawing tools.
- move - Indicates that an element can be dragged.
- text - Changes the cursor to a text selection icon, commonly used for editable text areas.
- wait - Displays a loading spinner, indicating that the user should wait.
- help - Shows a question mark, typically indicating help information is available.
- not-allowed - Displays a forbidden sign, indicating an action is not possible.
font-family - Specifies the typeface used for text rendering. It supports multiple values as fallbacks in case the preferred font is unavailable.
- font-family: Arial, Helvetica, sans-serif; - Uses Arial if available, otherwise Helvetica, and defaults to any sans-serif font.
- font-family: 'Times New Roman', Times, serif; - Uses Times New Roman if available, otherwise Times, and defaults to any serif font.
- font-family: 'Courier New', Courier, monospace; - Uses Courier New if available, otherwise Courier, and defaults to a monospace font.
text-align: center / left / right; - Controls the horizontal alignment of text within its container. center aligns the text in the middle, left aligns it to the left, and right aligns it to the right.

・JavaScript

Common Methods:

document.getElementById() - Selects an HTML element by its ID.
document.querySelector() - Selects the first element that matches a CSS selector.
document.querySelectorAll() - Selects all elements that match a CSS selector.
innerHTML - Sets or retrieves HTML content inside an element.
textContent - Sets or retrieves the text content of an element.
console.log() - Outputs messages to the browser console for debugging.

Event Listeners:

addEventListener("click", function() {...}) - Listens for a mouse click event.
addEventListener("keydown", function(event) {...}) - Listens for a key press event.
addEventListener("keyup", function(event) {...}) - Listens for a key release event.
addEventListener("mousemove", function(event) {...}) - Detects when the mouse moves.
addEventListener("mouseover", function(event) {...}) - Detects when the mouse hovers over an element.
addEventListener("mouseout", function(event) {...}) - Detects when the mouse leaves an element.

Manipulating Elements:

element.style.property - Changes the style of an element dynamically.
element.classList.add("class-name") - Adds a class to an element.
element.classList.remove("class-name") - Removes a class from an element.
element.classList.toggle("class-name") - Toggles a class on and off.

Timers and Intervals:

setTimeout(function, milliseconds) - Executes a function after a delay.
setInterval(function, milliseconds) - Repeats a function at specified intervals.
clearTimeout(timeoutID) - Cancels a timeout before it executes.
clearInterval(intervalID) - Stops an interval from running.

Math Methods:

Math.random() - Generates a random number between 0 and 1.
Math.floor(number) - Rounds a number down to the nearest integer.
Math.ceil(number) - Rounds a number up to the nearest integer.
Math.round(number) - Rounds a number to the nearest integer.
Math.max(num1, num2, ...) - Returns the largest of the given numbers.
Math.min(num1, num2, ...) - Returns the smallest of the given numbers.