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>
Want A Sprite Cranberry