Input and Ouput PBL Blog
In this blog I will explain the concepts of inputs and outputs by relating it to our adventure game.
Inputs and Outputs
When creating an interactive game, like my Adventure game for example, the combination of HTML and JavaScript plays a crucial role in handling user input and updating the game interface. In my Adventure game project, I used JavaScript to code the game logic, but I still relied on HTML elements to collect player input and display information. For example, the “NPC tracker” button was written in HTML, as it is part of the front end, while the player’s speed was defined in JavaScript, since it controls the game logic in the backend.
<!-- Example of HTML Being used in the game -->
<div id="npcTrackerPopup"> <!-- A container (division) for the NPC tracker popup. -->
<h2>NPCs Met:</h2> <!-- A heading inside the popup. -->
<ul id="npcTrackerList"></ul> <!-- An unordered list where NPC names will be added dynamically. -->
</div>
%%js
// Example of JS being used for the backend (The following code was directly taken from GameLevelCave.js. It is for explanation purposes only, so don't be surprised if the code doesn't run)
// Player Data
const sprite_src_player = path + "/images/gamify/you.png";
console.log(`Loading player sprite from: ${sprite_src_player}`); // Log image path
const PLAYER_SCALE_FACTOR = 5;
const sprite_data_player = {
id: 'Player',
name: 'mainplayer',
greeting: "Hi I am Chill Guy, the cave wanderer. I am looking for wisdom and adventure!",
src: sprite_src_player,
SCALE_FACTOR: PLAYER_SCALE_FACTOR,
STEP_FACTOR: 1000, // This is is what defines the player's speed
ANIMATION_RATE: 50,
INIT_POSITION: { x: 0, y: height - (height / PLAYER_SCALE_FACTOR) },
pixels: { height: 256, width: 192 },
orientation: { rows: 4, columns: 3 },
down: { row: 0, start: 0, columns: 3 },
left: { row: 1, start: 0, columns: 3 },
right: { row: 2, start: 0, columns: 3 },
up: { row: 3, start: 0, columns: 3 },
hitbox: { widthPercentage: 0.45, heightPercentage: 0.2 },
keypress: { up: 87, left: 65, down: 83, right: 68 } // W, A, S, D
};
Handling Player Input with JavaScript
While HTML structures the game’s visual elements, JavaScript is responsible for handling user input and controlling gameplay mechanics. In my Adventure game, I wrote the player movement system entirely in JavaScript, using event listeners to detect when a player presses W, A, S, or D. When a key is pressed, JavaScript updates the player’s position based on the STEP_FACTOR, changing their movement speed and direction dynamically. Although player input doesn’t come from an HTML form, JavaScript still interacts with the DOM to update the game screen. For example, when the player meets an NPC, JavaScript modifies the NPC tracker list in the DOM by adding new < li > elements, ensuring that changes are reflected visually.
%%js
// Example of JS being used for the backend (The following code was directly taken from GameLevelCave.js. It is for explanation purposes only, so don't be surprised if the code doesn't run)
// Player Data
const sprite_src_player = path + "/images/gamify/you.png";
console.log(`Loading player sprite from: ${sprite_src_player}`); // Log image path
const PLAYER_SCALE_FACTOR = 5;
const sprite_data_player = {
id: 'Player',
name: 'mainplayer',
greeting: "Hi I am Chill Guy, the cave wanderer. I am looking for wisdom and adventure!",
src: sprite_src_player,
SCALE_FACTOR: PLAYER_SCALE_FACTOR,
STEP_FACTOR: 1000, // This is is what defines the player's speed
ANIMATION_RATE: 50,
INIT_POSITION: { x: 0, y: height - (height / PLAYER_SCALE_FACTOR) },
pixels: { height: 256, width: 192 },
orientation: { rows: 4, columns: 3 },
down: { row: 0, start: 0, columns: 3 },
left: { row: 1, start: 0, columns: 3 },
right: { row: 2, start: 0, columns: 3 },
up: { row: 3, start: 0, columns: 3 },
hitbox: { widthPercentage: 0.45, heightPercentage: 0.2 },
keypress: { up: 87, left: 65, down: 83, right: 68 } // W, A, S, D is defined here
};
Ensuring Valid Inputs
In a game, handling input correctly is not just about detecting key presses—it also involves validating inputs to prevent errors or unintended behavior. In my Adventure game, JavaScript ensures that the player cannot move outside the game boundaries by checking their position before updating it. If the player tries to move beyond the playable area, the game stops them from going further. Another form of validation is filtering inputs—only the keys W, A, S, and D control movement, while other key presses are ignored. This way, the game prevents invalid inputs from affecting gameplay, ensuring a smooth and bug-free experience.
Updating DOM with JS
Beyond handling movement and input, JavaScript also interacts with the HTML Document Object Model (DOM) to update game elements dynamically. In my Adventure game, whenever the player meets a new NPC, JavaScript updates the NPC Tracker by adding a new <li> element to the list inside the <div id="npcTrackerPopup">. This is done using document.createElement(“li”) and appendChild() to modify the existing HTML structure. By updating the DOM instead of relying on static HTML, the game keeps track of progress in real time, making the experience more interactive and engaging.
Overall summary
Overall, developing my Adventure game based off of a simple strutcure showed me how HTML and JavaScript work together to create an interactive experience. While JavaScript handled player input, movement, and game logic, HTML provided the structure for displaying important information like the NPC Tracker. By using event listeners, input validation, and DOM manipulation. And although, I wasn’t actively working on the NPC tracker it helped me understand how front-end and back-end elements connect in web development, and it gave me a deeper appreciation for the way interactive games are built.