Code Snippets
JavaJump Play Game Here
Code for JavaJump, a browser game written in JavaScript
Game Loop
Show Code
let enableInput = true; $("#GameViewport").on("click", ()=>{ if (!enableInput){return}; if(!$("#GameViewport").hasClass("game-running")) { //If game hasn't started, start game $("#GameViewport").addClass("game-running"); StartGame(); } else { //If game has started, make character jump Jump(); } }) let board; let context; const tick = 10; function StartGame() { board = document.getElementById("Board"); context = board.getContext("2d"); score = 0; InitializeCharacter(); I_update = setInterval(()=>{Update();}, tick); enemySpawnInterval = enemySpawnIntervalBase; I_spawn = setInterval(()=>{DecreaseSpawnInterval();}, enemySpawnIncreaseInterval); T_spawnIncrease = setTimeout(()=>{SpawnEnemy();}, enemySpawnInterval); } function Update() { //Clears board context.clearRect(0, 0, board.width, board.height); CharacterMovement(); EnemyMovement(); UpdateScore(); } let I_update; let I_spawn; let T_spawnIncrease; function GameOver() { clearInterval(I_update); clearInterval(I_spawn); clearTimeout(T_spawnIncrease); //Clears all enemies enemies.length = 0; //Clears board context.clearRect(0, 0, board.width, board.height); $("#GameViewport").removeClass("game-running"); DisableInput(); $(".gameTitle").html(` <h3>You got hit</h3> <h3>Score: ${score}</h3> <h3>Click or Tap to Play Again</h3> `); }
Player
Show Code
const character = { x: 0, y: 40, size : 10, speed: 25, target: 0 } function InitializeCharacter() { character.x = 0; character.y = board.height - character.y; character.target = 0; } function Jump() { //Can only jump if character position is at either end of the board const canJump = character.x === 0 || character.x === board.width - character.size; if (!canJump) { return; } character.target = character.x === 0 ? board.width - character.size : 0; } function CharacterMovement() { //If character is not already at the jump target if (character.x != character.target) { let movement = character.speed; if (character.target < character.x) { //Reverses speed if jump target is left of character movement *= -1; } //Clamps the value so character cannot move off the board character.x = Clamp(character.x + movement, 0, board.width - character.size); } //Draw character as green box context.fillStyle="green"; context.fillRect(character.x, character.y, character.size, character.size); }
Enemies
Show Code
const enemies = []; const enemySpawnIntervalBase = 3000; const enemySpawnIntervalMin = 500; const enemySpawnIncrease = 250; const enemySpawnIncreaseInterval = 5000; let enemySpawnInterval = enemySpawnIntervalBase; let enemyValues = { x: 0, y: 0, size : 15, speed: 1 } function DecreaseSpawnInterval() { enemySpawnInterval = Clamp(enemySpawnInterval - enemySpawnIncrease, enemySpawnIntervalMin, enemySpawnIntervalBase); } function SpawnEnemy() { const spawnTrack = RandomRange(0, 3); const trackWidth = board.width/2; const spawnPos = spawnTrack * (trackWidth - (enemyValues.size/2)); enemies.push([spawnPos, 0]); T_spawnIncrease = setTimeout(()=>{SpawnEnemy();}, enemySpawnInterval); } function EnemyMovement() { let enemiesToRemove = 0; for(let i = 0; i < enemies.length; i++) { let movement = enemyValues.speed; if (enemies[i][1] > board.height) { //Removes enemies that fall offscreen enemiesToRemove ++; } //Clamps the value so character cannot move off the board enemies[i][1] = Clamp(enemies[i][1] + movement, 0, board.width - enemyValues.size); //Draw enemies as red boxes context.fillStyle="red"; context.fillRect(enemies[i][0], enemies[i][1], enemyValues.size, enemyValues.size); //Check collisions with player CheckCollisions(i); } for(let i = 0; i < enemiesToRemove; i++) { //Removes enemies that fall offscreen enemies.shift(); } } function CheckCollisions(i) { let enemy = { x: enemies[i][0], y: enemies[i][1], size : enemyValues.size, } if (DetectCollision(character, enemy)) { GameOver(); } } function DetectCollision(a, b) { let xIntersects = a.x < b.x + b.size && a.x + a.size > b.x; let yIntersects = a.y < b.y + b.size && a.y + a.size > b.y; return xIntersects && yIntersects; }
Score and Helper Functions
Show Code
let score = 0; function UpdateScore() { score++; context.fillStyle="black"; context.font="10px courier"; context.fillText(score, 15, board.height - 10); } /** Clamps a value in between given range * * @param {*} value - Value to clamp * @param {*} min - Minimum possible value * @param {*} max - Maximum possible value * @returns */ function Clamp(value, min, max) { if (value > max){return max;} else if (value < min){return min;} else {return value;} } /** Random Range Function * @param {int} minRaw - Minimum value * @param {int} maxRaw - Maximum value (exclusive) * @returns {int} A random integer between the input values */ function RandomRange(minRaw = 0, maxRaw = 0) { var min = parseInt(minRaw); var max = parseInt(maxRaw); var range = parseInt(max) - parseInt(min); var result = Math.floor(Math.random() * range) + parseInt(min); return result; }
Netmatters Homepage
JavaScript code for my Netmatters Homepage Assessment
Cookies
Show Code
/** Checks whether the Cookies Popup menu should appear * * @returns {bool} Boolean value of whether cookies popup should appear */ function CheckCookiesData() { if (!document.cookie.toString().includes("cookiesAccepted=true")) { OpenCookies(); return true; } else { console.log("Cookies data is " + document.cookie); return false; } } /**Opens Cookies Popup */ function OpenCookies() { console.log("Opening Cookies Popup, data is " + document.cookie); $('body').addClass('stop-scrolling'); $("#CookiesPopup").show(); } //Add click event to accept cookies button $("#AcceptCookies").on("click", ()=>{ CloseCookies(); }); /**Closes Cookies Popup */ function CloseCookies() { //Send cookies closed via AJAX console.log("Closing Cookies Popup"); SetCookiesData(true); $('body').removeClass('stop-scrolling'); $("#CookiesPopup").hide(); console.log("Cookies data is " + document.cookie); } /** Sets Cookies Accepted Value * * @param {bool} value Boolean value for if the cookies have been accepted * * @returns {string} String value representing the new cookies data */ function SetCookiesData(value) { document.cookie = `cookiesAccepted=${value}`; return document.cookie; } /** Deletes all cookies generated * || Not called here, intended to be used in console */ function DeleteAllCookies() { const cookies = document.cookie.split(";"); for (let i = 0; i < cookies.length; i++) { const cookie = cookies[i]; const eqPos = cookie.indexOf("="); const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie; //Sets expiry date in past so it will be deleted document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT"; } }
Sticky Header
Show Code
const navThreshold = 250; let prevScroll = 0; let stickyHeaderActive = true; let scrollUpTimeout; //Adds CheckScroll to scroll event $(".maincontent-inner").on('scroll', CheckScroll); //Determines whether header should be sticky when scrolling function CheckScroll(event) { let scroll = $(".maincontent-inner").scrollTop(); //Checks if scroll direction was up or down if (scroll > prevScroll) { //Show header console.log("scroll down"); if (scroll > navThreshold) { if (stickyHeaderActive) { stickyHeaderActive = false; AnimateHeader(false, 1.3); scrollUpTimeout = setTimeout(() => { $(".sticky-header").removeClass("sticky"); }, 500); } } else { $(".sticky-header").removeClass("sticky"); } } else { //Hide header console.log("scroll up"); if (scroll > navThreshold) { if (!stickyHeaderActive) { stickyHeaderActive = true; clearTimeout(scrollUpTimeout); $(".sticky-header").addClass("sticky"); AnimateHeader(true, 0.6); } } else { $(".sticky-header").removeClass("sticky"); } } prevScroll = scroll; } //Animates the header so it slides up or down function AnimateHeader(down, transitionTime) { from = "0"; to = "-100%"; if (down) { from = $(".sticky-header").css("top"); to = "0"; } $(".sticky-header").css("transition", "all 0s"); $(".sticky-header").css("top", from); setTimeout(() => { $(".sticky-header").css("transition", `all ${transitionTime}s`); $(".sticky-header").css("top", to); }, 200); }