JavaScript Hacks
Quick launch into Variables, Functions, Arrays, Classes, HTML.
Hacks
One key to these hacks is to build confidence with me going into final grade, I would like to see each student adapt this frontend work in their final project. Second key is the finished work can serve as review for the course, notes for the future in relationship to frontend.
- Adapt this tutorial to your own work
As of Now, my Trimester 3 team is using a lot of JavaScript Code for the Final Night at the Museum project. Currently, we are using Javascript code to code a multiplayer game that allows the user to move a character in a game of red light green light. We are using Phaser, which is an additional javascript library that is used to make the framework for a game. It uses a lot of different sets of tools, functions, and components than traditional javascript code, but it does have similarities to this tutorial. While they have different functionality, the red light green light game utilizes classes. The classes for phaser are normally used to built apond other phaser attributes like events or physics. However, they work similarly because of their purpose to handle objects and their data to different functions. The code typed out below is using Javascript 2D Animation and its build in functions and tools that allow the creation of a character moving around a canvas. The code focuses mostly on the animation of the sprite frames coming together to make the character look like it is walking.
- Consider what you need to work on to be a stronger developer
There are many things I need to do in order to become a stronger developer. The two main areas I would need to focus on if I choose to continue code,code,coding in the future is environment/tool handling and backend development/management. The actual coding part of the code process is what I found the most easiest. It was still challenging but there was so much resources to assist me including youtude videos, W3schools lessons, and even Chatgpt. However, my ability to do code got pushed back or paused due to the changes needed to be made to my environments and the tools in it. I could never fulled understand what was truly happening behind the scenes on my computer and why these new or updated environments and tools were necessary and how I could use them to code. The other area is backend development and management. I thought I knew how backend develop functions and how it connects with the frontend but whenever I tried to do it, I never got it to work. For me to become stronger in these areas, I would need to do resource that explains the importance of the area, the set up of them, and to do it muiltiple times to get a good amount of practice.
%%html
<html lang="en">
<head>
<title>Want A Sprite Cranberry</title>
</head>
<body>
<canvas width="500" height="500" id="canvas"></canvas>
<script>
const SCALE = 3;
const WIDTH = 16; // width to fit one sprite
const HEIGHT = 18; // height to fit one sprite
const SCALED_WIDTH = SCALE * WIDTH;
const SCALED_HEIGHT = SCALE * HEIGHT;
const CYCLE_LOOP = [0, 1, 0, 2]; //goes through row
const FACING_DOWN = 2; //value of column
const FACING_UP = 0; //value of column
const FACING_LEFT = 3; //value of column
const FACING_RIGHT = 1; //value of column
const FRAME_LIMIT = 12;
const MOVEMENT_SPEED = 3;
let canvas = document.querySelector('canvas'); // Get the canvas element and create a 2D rendering context
let ctx = canvas.getContext('2d');
let keyPresses = {};
let currentDirection = FACING_DOWN; //value of column
let currentLoopIndex = 0; //value of row
let frameCount = 0;
let positionX = 226; // Math: maxX/2 - (Scale*Width)/2
let positionY = 223; // Math: maxY/2 - (Scale*Height)/2
let img = new Image(); // Create image object for the spritesheet
window.addEventListener('keydown', keyDownListener); // Pressing a key resulting in an outcome
function keyDownListener(event) {
keyPresses[event.key] = true;
}
window.addEventListener('keyup', keyUpListener); // Releasing a key resulting in a pause in the outcome
function keyUpListener(event) {
keyPresses[event.key] = false;
}
// Function to load the image and start the game loop
function loadImage() {
img.src = 'https://opengameart.org/sites/default/files/4thsheetpreview.png';
img.onload = function() {
window.requestAnimationFrame(gameLoop);
};
}
function drawFrame(frameX, frameY, canvasX, canvasY) { // Drawing sprite frame
ctx.drawImage(img,
frameX * WIDTH, frameY * HEIGHT, WIDTH, HEIGHT,
canvasX, canvasY, SCALED_WIDTH, SCALED_HEIGHT);
}
loadImage(); //show image
function gameLoop() { // keep updating the game
ctx.fillStyle = 'rgb(255, 192, 203)'; // Set canvas to pink
ctx.fillRect(0, 0, canvas.width, canvas.height); // Fill the canvas
let hasMoved = false; // make the sprite stand still.
if (keyPresses.w) { // move the sprite
moveCharacter(0, -MOVEMENT_SPEED, FACING_UP);
hasMoved = true;
} else if (keyPresses.s) {
moveCharacter(0, MOVEMENT_SPEED, FACING_DOWN);
hasMoved = true;
}
if (keyPresses.a) {
moveCharacter(-MOVEMENT_SPEED, 0, FACING_LEFT);
hasMoved = true;
} else if (keyPresses.d) {
moveCharacter(MOVEMENT_SPEED, 0, FACING_RIGHT);
hasMoved = true;
}
if (hasMoved) { // loop the animation of the sprite
frameCount++;
if (frameCount >= FRAME_LIMIT) {
frameCount = 0;
currentLoopIndex++;
if (currentLoopIndex >= CYCLE_LOOP.length) {
currentLoopIndex = 0;
}
}
}
if (!hasMoved) {
currentLoopIndex = 0;
}
drawFrame(CYCLE_LOOP[currentLoopIndex], currentDirection, positionX, positionY); // draw the current frame of the sprite
window.requestAnimationFrame(gameLoop); // repeat the game loop
}
function moveCharacter(deltaX, deltaY, direction) {
if (positionX + deltaX > 0 && positionX + SCALED_WIDTH + deltaX < canvas.width) { // define borders
positionX += deltaX;
}
if (positionY + deltaY > 0 && positionY + SCALED_HEIGHT + deltaY < canvas.height) { // define borders
positionY += deltaY;
}
currentDirection = direction; // Set the current direction
}
</script>
</body>
</html>