Use the keyboard to walk left and right. Also, press up to jump.
\r\n\r\n \r\n\r\n \r\n\r\n\r\n"
},
{
"path": "content/animation/animation.js",
"content": "// Frank Poth 12/23/2017\r\n\r\n/* This example will show you how to do custom sprite animation in JavaScript.\r\nIt uses an Animation class that handles updating and changing a sprite's current\r\nframe, and a sprite_sheet object to hold the source image and the different animation\r\nframe sets. */\r\n\r\n(function() { \"use strict\";\r\n\r\n /* Each sprite sheet tile is 16x16 pixels in dimension. */\r\n const SPRITE_SIZE = 16;\r\n\r\n /* The Animation class manages frames within an animation frame set. The frame\r\n set is an array of values that correspond to the location of sprite images in\r\n the sprite sheet. For example, a frame value of 0 would correspond to the first\r\n sprite image / tile in the sprite sheet. By arranging these values in a frame set\r\n array, you can create a sequence of frames that make an animation when played in\r\n quick succession. */\r\n var Animation = function(frame_set, delay) {\r\n\r\n this.count = 0;// Counts the number of game cycles since the last frame change.\r\n this.delay = delay;// The number of game cycles to wait until the next frame change.\r\n this.frame = 0;// The value in the sprite sheet of the sprite image / tile to display.\r\n this.frame_index = 0;// The frame's index in the current animation frame set.\r\n this.frame_set = frame_set;// The current animation frame set that holds sprite tile values.\r\n\r\n };\r\n\r\n Animation.prototype = {\r\n\r\n /* This changes the current animation frame set. For example, if the current\r\n set is [0, 1], and the new set is [2, 3], it changes the set to [2, 3]. It also\r\n sets the delay. */\r\n change:function(frame_set, delay = 15) {\r\n\r\n if (this.frame_set != frame_set) {// If the frame set is different:\r\n\r\n this.count = 0;// Reset the count.\r\n this.delay = delay;// Set the delay.\r\n this.frame_index = 0;// Start at the first frame in the new frame set.\r\n this.frame_set = frame_set;// Set the new frame set.\r\n this.frame = this.frame_set[this.frame_index];// Set the new frame value.\r\n\r\n }\r\n\r\n },\r\n\r\n /* Call this on each game cycle. */\r\n update:function() {\r\n\r\n this.count ++;// Keep track of how many cycles have passed since the last frame change.\r\n\r\n if (this.count >= this.delay) {// If enough cycles have passed, we change the frame.\r\n\r\n this.count = 0;// Reset the count.\r\n /* If the frame index is on the last value in the frame set, reset to 0.\r\n If the frame index is not on the last value, just add 1 to it. */\r\n this.frame_index = (this.frame_index == this.frame_set.length - 1) ? 0 : this.frame_index + 1;\r\n this.frame = this.frame_set[this.frame_index];// Change the current frame value.\r\n\r\n }\r\n\r\n }\r\n\r\n };\r\n\r\n var buffer, controller, display, loop, player, render, resize, sprite_sheet;\r\n\r\n buffer = document.createElement(\"canvas\").getContext(\"2d\");\r\n display = document.querySelector(\"canvas\").getContext(\"2d\");\r\n\r\n /* I made some changes to the controller object. */\r\n controller = {\r\n\r\n /* Now each key object knows its physical state as well as its active state.\r\n When a key is active it is used in the game logic, but its physical state is\r\n always recorded and never altered for reference. */\r\n left: { active:false, state:false },\r\n right: { active:false, state:false },\r\n up: { active:false, state:false },\r\n\r\n keyUpDown:function(event) {\r\n\r\n /* Get the physical state of the key being pressed. true = down false = up*/\r\n var key_state = (event.type == \"keydown\") ? true : false;\r\n\r\n switch(event.keyCode) {\r\n\r\n case 37:// left key\r\n\r\n /* If the virtual state of the key is not equal to the physical state\r\n of the key, we know something has changed, and we must update the active\r\n state of the key. By doing this it prevents repeat firing of keydown events\r\n from altering the active state of the key. Basically, when you are jumping,\r\n holding the jump key down isn't going to work. You'll have to hit it every\r\n time, but only if you set the active key state to false when you jump. */\r\n if (controller.left.state != key_state) controller.left.active = key_state;\r\n controller.left.state = key_state;// Always update the physical state.\r\n\r\n break;\r\n case 38:// up key\r\n\r\n if (controller.up.state != key_state) controller.up.active = key_state;\r\n controller.up.state = key_state;\r\n\r\n break;\r\n case 39:// right key\r\n\r\n if (controller.right.state != key_state) controller.right.active = key_state;\r\n controller.right.state = key_state;\r\n\r\n break;\r\n\r\n }\r\n\r\n //console.log(\"left: \" + controller.left.state + \", \" + controller.left.active + \"\\nright: \" + controller.right.state + \", \" + controller.right.active + \"\\nup: \" + controller.up.state + \", \" + controller.up.active);\r\n\r\n }\r\n\r\n };\r\n\r\n /* The player object is just a rectangle with an animation object. */\r\n player = {\r\n\r\n animation:new Animation(),// You don't need to setup Animation right away.\r\n jumping:true,\r\n height:16, width:16,\r\n x:0, y:40 - 18,\r\n x_velocity:0, y_velocity:0\r\n\r\n };\r\n\r\n /* The sprite sheet object holds the sprite sheet graphic and some animation frame\r\n sets. An animation frame set is just an array of frame values that correspond to\r\n each sprite image in the sprite sheet, just like a tile sheet and a tile map. */\r\n sprite_sheet = {\r\n\r\n frame_sets:[[0, 1], [2, 3], [4, 5]],// standing still, walk right, walk left\r\n image:new Image()\r\n\r\n };\r\n\r\n loop = function(time_stamp) {\r\n\r\n if (controller.up.active && !player.jumping) {\r\n\r\n controller.up.active = false;\r\n player.jumping = true;\r\n player.y_velocity -= 2.5;\r\n\r\n }\r\n\r\n if (controller.left.active) {\r\n\r\n /* To change the animation, all you have to do is call animation.change. */\r\n player.animation.change(sprite_sheet.frame_sets[2], 15);\r\n player.x_velocity -= 0.05;\r\n\r\n }\r\n\r\n if (controller.right.active) {\r\n\r\n player.animation.change(sprite_sheet.frame_sets[1], 15);\r\n player.x_velocity += 0.05;\r\n\r\n }\r\n\r\n /* If you're just standing still, change the animation to standing still. */\r\n if (!controller.left.active && !controller.right.active) {\r\n\r\n player.animation.change(sprite_sheet.frame_sets[0], 20);\r\n\r\n }\r\n\r\n player.y_velocity += 0.25;\r\n\r\n player.x += player.x_velocity;\r\n player.y += player.y_velocity;\r\n player.x_velocity *= 0.9;\r\n player.y_velocity *= 0.9;\r\n\r\n if (player.y + player.height > buffer.canvas.height - 2) {\r\n\r\n player.jumping = false;\r\n player.y = buffer.canvas.height - 2 - player.height;\r\n player.y_velocity = 0;\r\n\r\n }\r\n\r\n if (player.x + player.width < 0) {\r\n\r\n player.x = buffer.canvas.width;\r\n\r\n } else if (player.x > buffer.canvas.width) {\r\n\r\n player.x = - player.width;\r\n\r\n }\r\n\r\n player.animation.update();\r\n\r\n render();\r\n\r\n window.requestAnimationFrame(loop);\r\n\r\n };\r\n\r\n render = function() {\r\n\r\n /* Draw the background. */\r\n buffer.fillStyle = \"#7ec0ff\";\r\n buffer.fillRect(0, 0, buffer.canvas.width, buffer.canvas.height);\r\n buffer.strokeStyle = \"#8ed0ff\";\r\n buffer.lineWidth = 10;\r\n buffer.beginPath();\r\n buffer.moveTo(0, 0);\r\n buffer.bezierCurveTo(40, 20, 40, 0, 80, 0);\r\n buffer.moveTo(0, 0);\r\n buffer.bezierCurveTo(40, 20, 40, 20, 80, 0);\r\n buffer.stroke();\r\n buffer.fillStyle = \"#009900\";\r\n buffer.fillRect(0, 36, buffer.canvas.width, 4);\r\n\r\n /* When you draw your sprite, just use the animation frame value to determine\r\n where to cut your image from the sprite sheet. It's the same technique used\r\n for cutting tiles out of a tile sheet. Here I have a very easy implementation\r\n set up because my sprite sheet is only a single row. */\r\n\r\n /* 02/07/2018 I added Math.floor to the player's x and y positions to eliminate\r\n antialiasing issues. Take out the Math.floor to see what I mean. */\r\n buffer.drawImage(sprite_sheet.image, player.animation.frame * SPRITE_SIZE, 0, SPRITE_SIZE, SPRITE_SIZE, Math.floor(player.x), Math.floor(player.y), SPRITE_SIZE, SPRITE_SIZE);\r\n\r\n display.drawImage(buffer.canvas, 0, 0, buffer.canvas.width, buffer.canvas.height, 0, 0, display.canvas.width, display.canvas.height);\r\n\r\n };\r\n\r\n resize = function() {\r\n\r\n display.canvas.width = document.documentElement.clientWidth - 32;\r\n\r\n if (display.canvas.width > document.documentElement.clientHeight) {\r\n\r\n display.canvas.width = document.documentElement.clientHeight;\r\n\r\n }\r\n\r\n display.canvas.height = display.canvas.width * 0.5;\r\n\r\n display.imageSmoothingEnabled = false;\r\n\r\n };\r\n\r\n ////////////////////\r\n //// INITIALIZE ////\r\n ////////////////////\r\n\r\n buffer.canvas.width = 80;\r\n buffer.canvas.height = 40;\r\n\r\n window.addEventListener(\"resize\", resize);\r\n\r\n window.addEventListener(\"keydown\", controller.keyUpDown);\r\n window.addEventListener(\"keyup\", controller.keyUpDown);\r\n\r\n resize();\r\n\r\n sprite_sheet.image.addEventListener(\"load\", function(event) {// When the load event fires, do this:\r\n\r\n window.requestAnimationFrame(loop);// Start the game loop.\r\n\r\n });\r\n\r\n sprite_sheet.image.src = \"animation.png\";// Start loading the image.\r\n\r\n})();\r\n"
},
{
"path": "content/animation-game-loop/animation.css",
"content": "/* Frank Poth 08/12/2017 */\r\n\r\n* {\r\n\r\n box-sizing:border-box;\r\n margin:0;\r\n padding:0;\r\n\r\n}\r\n\r\nhtml, body {\r\n\r\n height:100%;\r\n width:100%;\r\n\r\n}\r\n\r\nbody {\r\n\r\n align-content:space-around;\r\n background-color:#202830;\r\n color:#ffffff;\r\n display:grid;\r\n justify-content:center;\r\n\r\n}\r\n\r\ncanvas {\r\n\r\n background-color:#ffffff;\r\n\r\n}\r\n"
},
{
"path": "content/animation-game-loop/animation.html",
"content": "\r\n\r\n\r\n\r\n \r\n\r\n \r\n Animation\r\n \r\n\r\n \r\n\r\n \r\n\r\n
PoP Vlog - Animation
\r\n \r\n\r\n \r\n\r\n \r\n\r\n\r\n"
},
{
"path": "content/animation-game-loop/animation.js",
"content": "// Frank Poth 08/12/2017\r\n\r\nvar context, rectangle, loop;\r\n\r\ncontext = document.querySelector(\"canvas\").getContext(\"2d\");\r\n\r\ncontext.canvas.height = 180;\r\ncontext.canvas.width = 320;\r\n\r\nrectangle = {\r\n\r\n height:32,\r\n width:32,\r\n x:0,\r\n y:72, // Center of the canvas\r\n\r\n};\r\n\r\nloop = function() {\r\n\r\n rectangle.x += 1;\r\n\r\n context.fillStyle = \"#202020\";\r\n context.fillRect(0, 0, 320, 180);// x, y, width, height\r\n context.fillStyle = \"#ff0000\";// hex for red\r\n context.beginPath();\r\n context.rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);\r\n context.fill();\r\n\r\n if (rectangle.x > 320) {// if rectangle goes past right boundary\r\n\r\n rectangle.x = -32;\r\n\r\n }\r\n\r\n // call update when the browser is ready to draw again\r\n window.requestAnimationFrame(loop);\r\n\r\n};\r\n\r\nwindow.requestAnimationFrame(loop);\r\n"
},
{
"path": "content/better-tile/better-tile.html",
"content": "\r\n\r\n\r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n Better Tile\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n"
},
{
"path": "content/better-tile/better-tile.js",
"content": "(() => {\r\n\r\n // The display canvas' context. Draw the tile buffer here.\r\n const DISPLAY = document.querySelector('canvas').getContext('2d', { alpha:false, desynchronized:false });\r\n // The tile buffer canvas' context. Draw individual tiles here.\r\n const BUFFER = document.createElement('canvas').getContext('2d', { alpha:false, desynchronized:true });\r\n\r\n // This is the width and height for every tile.\r\n const TILE_SIZE = 16;\r\n\r\n // The TILES object contains \"tile\" objects with keys that correspond to the map values.\r\n // Each tile object has a color.\r\n const TILES = {\r\n\r\n 0: { color:'#d8f4f4' }, // sky\r\n 1: { color:'#ffffff' }, // cloud\r\n 2: { color:'#3e611e' }, // grass\r\n 3: { color:'#412823' } // dirt\r\n\r\n }\r\n\r\n // The map holds all the info about the map we will be drawing, including the tile indices array.\r\n const MAP = {\r\n\r\n columns: 16,\r\n rows: 14,\r\n height: 14 * TILE_SIZE,\r\n width: 16 * TILE_SIZE,\r\n\r\n // This is used during image scaling to ensure the rendered image is not skewed.\r\n width_height_ratio: 16 / 14,\r\n\r\n // The values in this array correspond to the keys in the TILES object.\r\n tiles:[1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,\r\n 0,1,1,0,0,0,0,0,0,0,0,0,1,1,1,1,\r\n 0,0,0,0,1,1,1,0,0,0,0,1,1,1,1,0,\r\n 0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,\r\n 0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,\r\n 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\r\n 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\r\n 0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,2,\r\n 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\r\n 0,0,0,0,0,0,0,0,0,0,0,2,2,0,0,0,\r\n 2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,\r\n 2,2,0,0,0,0,0,0,0,0,0,0,0,0,0,2,\r\n 3,2,2,2,2,2,2,0,0,0,2,2,2,2,2,2,\r\n 3,3,3,3,3,3,3,0,0,0,3,3,3,3,3,3]\r\n\r\n };\r\n\r\n // This will render tiles to the buffer.\r\n function renderTiles() {\r\n\r\n var map_index = 0; // This represents the position in the MAP.tiles array we're getting our tile value from.\r\n\r\n // Increment by the actual TILE_SIZE to avoid having to multiply on every iteration.\r\n for (var top = 0; top < MAP.height; top += TILE_SIZE) {\r\n\r\n for (var left = 0; left < MAP.width; left += TILE_SIZE) {\r\n\r\n var tile_value = MAP.tiles[map_index]; // Get the tile value from the map.\r\n \r\n var tile = TILES[tile_value]; // Get the specific tile object from the TILES object.\r\n\r\n BUFFER.fillStyle = tile.color; // Now that we have the tile we can access its properties.\r\n\r\n BUFFER.fillRect(left, top, TILE_SIZE, TILE_SIZE); // Draw the tile at the left, top position and TILE_SIZE.\r\n\r\n map_index ++; // Make sure to increment the map_index so we can get the next tile from the map.\r\n\r\n }\r\n\r\n }\r\n\r\n }\r\n\r\n // Render the buffer to the display.\r\n // If this example required a game loop or repeated draws, this would be your main rendering function.\r\n // The benefit of this approach is that you only make 1 drawImage call here instead of 1 call for every tile.\r\n function renderDisplay() {\r\n\r\n DISPLAY.drawImage(BUFFER.canvas, 0, 0);\r\n\r\n }\r\n\r\n // This function resizes the CSS width and height of the DISPLAY canvas to force it to scale to fit the window.\r\n function resize(event) {\r\n\r\n // Get the height and width of the window\r\n var height = document.documentElement.clientHeight;\r\n var width = document.documentElement.clientWidth;\r\n\r\n // This makes sure the DISPLAY canvas is resized in a way that maintains the MAP's width / height ratio.\r\n if (width / height < MAP.width_height_ratio) height = Math.floor(width / MAP.width_height_ratio);\r\n else width = Math.floor(height * MAP.width_height_ratio);\r\n\r\n // This sets the CSS of the DISPLAY canvas to resize it to the scaled height and width.\r\n DISPLAY.canvas.style.height = height + 'px';\r\n DISPLAY.canvas.style.width = width + 'px';\r\n\r\n }\r\n\r\n // Set the initial width and height of the BUFFER and the DISPLAY canvases.\r\n BUFFER.canvas.width = DISPLAY.canvas.width = MAP.width;\r\n BUFFER.canvas.height = DISPLAY.canvas.height = MAP.height;\r\n\r\n // To ensure there is no anti-aliasing when drawing to the canvas, set image smoothing to false on both canvases.\r\n BUFFER.imageSmoothingEnabled = DISPLAY.imageSmoothingEnabled = false;\r\n\r\n // Draw the individual tiles to the buffer.\r\n renderTiles();\r\n\r\n // Draw the BUFFER to the DISPLAY canvas.\r\n renderDisplay();\r\n\r\n // Add the resize event listener.\r\n window.addEventListener('resize', resize);\r\n\r\n // Calling resize forces the DISPLAY canvas to be scaled by the CSS.\r\n resize();\r\n\r\n})();"
},
{
"path": "content/better-tile-graphics/better-tile-graphics.html",
"content": "\r\n\r\n\r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n Better Tile Graphics\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n"
},
{
"path": "content/better-tile-graphics/better-tile-graphics.js",
"content": "(() => {\r\n\r\n // The display canvas' context. Draw the tile buffer here. It's important not to desynchronize when using CSS to scale.\r\n const DISPLAY = document.querySelector('canvas').getContext('2d', { alpha:false, desynchronized:false });\r\n // The tile buffer canvas' context. Draw individual tiles here.\r\n const BUFFER = document.createElement('canvas').getContext('2d', { alpha:false, desynchronized:true });\r\n\r\n // This is the width and height for every tile.\r\n const TILE_SIZE = 16;\r\n\r\n // This image will hold the tile sheet once it is loaded.\r\n const TILE_SHEET_IMAGE = new Image();\r\n\r\n // The map holds all the info about the map we will be drawing, including the tile indices array.\r\n const MAP = {\r\n\r\n columns: 16,\r\n rows: 14,\r\n height: 14 * TILE_SIZE,\r\n width: 16 * TILE_SIZE,\r\n\r\n // This is used during image scaling to ensure the rendered image is not skewed.\r\n width_height_ratio: 16 / 14,\r\n\r\n // The values in this array correspond to the keys in the TILES object.\r\n tiles:[10,22,22,22,22,22,22,22,22,22,22,22,23,-1, 8,15,\r\n 20, 1, 2, 3, 2, 1, 1, 3, 3, 2, 1, 1, 3,-1, 9,19,\r\n 20,-1, 7, 5, 0, 6, 6,-1,-1,-1,-1,-1, 4, 5, 6,19,\r\n 20,-1, 8,15,16,17,18,-1,-1,-1, 6, 5,15,16,17,10,\r\n 20,-1, 8,19,11,12,23,-1,-1,-1,15,17,10,11,10,10,\r\n 20,-1, 8,19,10,23, 3,-1,-1,-1,21,22,22,22,22,13,\r\n 20,-1, 8,19,20, 2,-1,-1,-1,-1, 3, 2, 1, 1, 2,19,\r\n 20,-1, 8,19,20,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,19,\r\n 20,-1, 8,19,20, 5, 5, 6, 4, 6, 5, 4, 4, 0, 6,19,\r\n 20,-1, 8,19,10,17,16,17,17,16,17,17,17,17,16,10,\r\n 20,-1, 8,21,22,22,22,22,22,22,22,22,22,22,22,10,\r\n 20,-1, 9, 3, 1, 1, 2, 3, 3, 2, 1, 2, 3, 1, 1,19,\r\n 20, 4, 5, 6, 6, 5, 4, 4, 5, 4, 6, 5, 6,-1, 7,19,\r\n 10,16,17,17,16,17,17,17,16,17,17,16,18,-1, 8,19]\r\n\r\n };\r\n\r\n // This will calculate the tile's source position in the tile sheet given the number of columns in the tile sheet and the index of the tile in the tile sheet.\r\n function calculateTileSourcePosition(tile_index, tile_sheet_columns) {\r\n\r\n return {\r\n \r\n x: tile_index % tile_sheet_columns * TILE_SIZE,\r\n y:Math.floor(tile_index / tile_sheet_columns) * TILE_SIZE\r\n \r\n };\r\n\r\n }\r\n\r\n // This will render tiles to the buffer.\r\n function renderTiles() {\r\n\r\n var map_index = 0; // This represents the position in the MAP.tiles array we're getting our tile value from.\r\n\r\n // Increment by the actual TILE_SIZE to avoid having to multiply on every iteration.\r\n for (var top = 0; top < MAP.height; top += TILE_SIZE) {\r\n\r\n for (var left = 0; left < MAP.width; left += TILE_SIZE) {\r\n\r\n var tile_value = MAP.tiles[map_index]; // Get the tile value from the map.\r\n\r\n map_index ++; // Make sure to increment the map_index so we can get the next tile from the map.\r\n\r\n if (tile_value == -1) continue; // If the tile space is meant to be empty, skip this iteration.\r\n \r\n var tile_source_position = calculateTileSourcePosition(tile_value, 6); // Get the specific tile object from the TILES object.\r\n\r\n BUFFER.drawImage(TILE_SHEET_IMAGE, tile_source_position.x, tile_source_position.y, TILE_SIZE, TILE_SIZE, left, top, TILE_SIZE, TILE_SIZE);\r\n\r\n }\r\n\r\n }\r\n\r\n }\r\n\r\n // Render the buffer to the display.\r\n // If this example required a game loop or repeated draws, this would be your main rendering function.\r\n // The benefit of this approach is that you only make 1 drawImage call here instead of 1 call for every tile.\r\n function renderDisplay() {\r\n\r\n DISPLAY.drawImage(BUFFER.canvas, 0, 0);\r\n\r\n }\r\n\r\n // This function resizes the CSS width and height of the DISPLAY canvas to force it to scale to fit the window.\r\n function resize(event) {\r\n\r\n // Get the height and width of the window\r\n var height = document.documentElement.clientHeight;\r\n var width = document.documentElement.clientWidth;\r\n\r\n // This makes sure the DISPLAY canvas is resized in a way that maintains the MAP's width / height ratio.\r\n if (width / height < MAP.width_height_ratio) height = Math.floor(width / MAP.width_height_ratio);\r\n else width = Math.floor(height * MAP.width_height_ratio);\r\n\r\n // This sets the CSS of the DISPLAY canvas to resize it to the scaled height and width.\r\n DISPLAY.canvas.style.height = height + 'px';\r\n DISPLAY.canvas.style.width = width + 'px';\r\n\r\n }\r\n\r\n // Set the initial width and height of the BUFFER and the DISPLAY canvases.\r\n BUFFER.canvas.width = DISPLAY.canvas.width = MAP.width;\r\n BUFFER.canvas.height = DISPLAY.canvas.height = MAP.height;\r\n\r\n // To ensure there is no anti-aliasing when drawing to the canvas, set image smoothing to false on both canvases.\r\n BUFFER.imageSmoothingEnabled = DISPLAY.imageSmoothingEnabled = false;\r\n\r\n // Add the resize event listener.\r\n window.addEventListener('resize', resize);\r\n\r\n TILE_SHEET_IMAGE.addEventListener('load', function(event) {\r\n\r\n // Draw the individual tiles to the buffer.\r\n renderTiles();\r\n\r\n // Draw the BUFFER to the DISPLAY canvas.\r\n renderDisplay();\r\n\r\n // Calling resize forces the DISPLAY canvas to be scaled by the CSS.\r\n resize();\r\n\r\n }, { once:true });\r\n \r\n TILE_SHEET_IMAGE.src = 'better-tile-graphics.png';\r\n\r\n})();"
},
{
"path": "content/blit/blit.css",
"content": "/* Frank Poth 12/26/2017 */\r\n\r\n* {\r\n\r\n box-sizing:border-box;\r\n margin:0;\r\n padding:0;\r\n user-select:none;\r\n\r\n}\r\n\r\nhtml {\r\n\r\n height:100%;\r\n width:100%;\r\n\r\n}\r\n\r\nbody {\r\n\r\n align-content:space-around;\r\n background-color:#202830;\r\n color:#ffffff;\r\n display:grid;\r\n grid-template-columns:auto;\r\n grid-template-rows:auto auto auto auto;\r\n height:100%;\r\n justify-items:center;\r\n padding:0 8px;\r\n width:100%;\r\n\r\n}\r\n\r\ndiv {\r\n\r\n align-content:space-around;\r\n display:grid;\r\n grid-column-gap:8px;\r\n grid-row-gap:8px;\r\n grid-template-areas:\"input input\" \"button1 button2\" \"average1 average2\" \"output1 output2\";\r\n grid-template-columns:auto auto;\r\n grid-template-rows:auto auto auto auto;\r\n min-width:50%;\r\n\r\n}\r\n\r\n#number-of-tests-input {\r\n\r\n background-color:rgba(0, 0, 0, 0);\r\n border:none;\r\n color:#ffffff;\r\n font-size:1.0em;\r\n grid-area:input;\r\n text-align:center;\r\n\r\n}\r\n\r\n#draw-image-button {\r\n\r\n grid-area:button1;\r\n\r\n}\r\n\r\n#draw-image-average {\r\n\r\n grid-area:average1;\r\n\r\n}\r\n\r\n#draw-image-output {\r\n\r\n grid-area:output1;\r\n\r\n}\r\n\r\n#image-data-button {\r\n\r\n grid-area:button2;\r\n\r\n}\r\n\r\n#image-data-average {\r\n\r\n grid-area:average2;\r\n\r\n}\r\n\r\n#image-data-output {\r\n\r\n grid-area:output2;\r\n\r\n}\r\n\r\n.button {\r\n\r\n border-color:#ffffff;\r\n border-radius:16px;\r\n border-style:solid;\r\n border-width:1px;\r\n cursor:pointer;\r\n padding:4px;\r\n text-align:center;\r\n\r\n}\r\n\r\n.output {\r\n\r\n font-size:1.0em;\r\n height:6.0em;\r\n overflow-y:auto;\r\n\r\n}\r\n"
},
{
"path": "content/blit/blit.html",
"content": "\r\n\r\n\r\n\r\n \r\n\r\n \r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n
PoP Vlog - Blit Test
\r\n\r\n
Which method is faster: CanvasRenderingContext2D.drawImage or CanvasRenderingContext2D.putImageData? Type clear to clear tests.
Two circles collide when the distance between their center points is less\r\n than or equal to the sum of their radii. In this example, the distance between\r\n circles is represented by the white line. Its length is 0.\r\n the sum of the radii is 0. change radii
To resolve collision between two circles, one of the circles must be \"pushed\"\r\n out of the other until the distance between their center points is greater than\r\n the sum of their radii. The circle should be moved out of collision along the\r\n vector between the center points of the two circles. Its length is 0.\r\n the sum of the radii is 0. change radii
\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n\r\n"
},
{
"path": "content/collision/collision.js",
"content": "// Frank Poth 08/29/2017\r\n\r\nvar context, controller, Rectangle, red, white, loop, resize;\r\n\r\ncontext = document.querySelector(\"canvas\").getContext(\"2d\");\r\n\r\ncontroller = {\r\n\r\n // mouse or finger position\r\n pointer_x:0,\r\n pointer_y:0,\r\n\r\n move:function(event) {\r\n\r\n // This will give us the location of our canvas element\r\n var rectangle = context.canvas.getBoundingClientRect();\r\n\r\n // store the position of the move event inside the pointer variables\r\n controller.pointer_x = event.clientX - rectangle.left;\r\n controller.pointer_y = event.clientY - rectangle.top;\r\n\r\n }\r\n\r\n};\r\n\r\nRectangle = function(x, y, width, height, color) {\r\n\r\n this.x = x;\r\n this.y = y;\r\n this.width = width;\r\n this.height = height;\r\n\r\n this.color = color;\r\n\r\n};\r\n\r\nRectangle.prototype = {\r\n\r\n draw:function() {// draws rectangle to canvas\r\n\r\n context.beginPath();\r\n context.rect(this.x, this.y, this.width, this.height);\r\n context.fillStyle = this.color;\r\n context.fill();\r\n\r\n },\r\n\r\n // get the four side coordinates of the rectangle\r\n get bottom() { return this.y + this.height; },\r\n get left() { return this.x; },\r\n get right() { return this.x + this.width; },\r\n get top() { return this.y; },\r\n\r\n testCollision:function(rectangle) {\r\n\r\n if (this.top > rectangle.bottom || this.right < rectangle.left || this.bottom < rectangle.top || this.left > rectangle.right) {\r\n\r\n return false;\r\n\r\n }\r\n\r\n return true;\r\n\r\n }\r\n\r\n};\r\n\r\nred = new Rectangle(0, 0, 64, 64, \"#ff0000\");\r\nwhite = new Rectangle(context.canvas.width * 0.5 - 32, context.canvas.height * 0.5 - 32, 64, 64, \"#ffffff\");\r\n\r\nloop = function(time_stamp) {\r\n\r\n red.x = controller.pointer_x - 32;\r\n red.y = controller.pointer_y - 32;\r\n\r\n context.fillStyle = \"#303840\";\r\n context.fillRect(0, 0, context.canvas.width, context.canvas.height);\r\n\r\n white.draw();\r\n red.draw();\r\n\r\n if (red.testCollision(white)) {\r\n\r\n context.beginPath();\r\n context.rect(red.x, red.y, red.width, red.height);\r\n context.rect(white.x, white.y, white.width, white.height);\r\n context.strokeStyle = \"#ffffff\";\r\n context.stroke();\r\n\r\n }\r\n\r\n window.requestAnimationFrame(loop);\r\n\r\n};\r\n\r\n// just keeps the canvas element sized appropriately\r\nresize = function(event) {\r\n\r\n context.canvas.width = document.documentElement.clientWidth - 32;\r\n\r\n if (context.canvas.width > document.documentElement.clientHeight) {\r\n\r\n context.canvas.width = document.documentElement.clientHeight;\r\n\r\n }\r\n\r\n context.canvas.height = Math.floor(context.canvas.width * 0.5625);\r\n\r\n white.x = context.canvas.width * 0.5 - 32;\r\n white.y = context.canvas.height * 0.5 - 32;\r\n\r\n};\r\n\r\ncontext.canvas.addEventListener(\"mousemove\", controller.move);\r\ncontext.canvas.addEventListener(\"touchmove\", controller.move, {passive:true});\r\n\r\nwindow.addEventListener(\"resize\", resize, {passive:true});\r\n\r\nresize();\r\n\r\n// start the game loop\r\nwindow.requestAnimationFrame(loop);\r\n"
},
{
"path": "content/control/control.css",
"content": "/* Frank Poth 08/13/2017 */\r\n\r\n* {\r\n\r\n box-sizing:border-box;\r\n margin:0;\r\n padding:0;\r\n\r\n}\r\n\r\nhtml, body {\r\n\r\n height:100%;\r\n width:100%;\r\n\r\n}\r\n\r\nbody {\r\n\r\n align-content:space-around;\r\n background-color:#202830;\r\n color:#ffffff;\r\n display:grid;\r\n justify-content:center;\r\n\r\n}\r\n\r\ncanvas {\r\n\r\n background-color:#ffffff;\r\n\r\n}\r\n"
},
{
"path": "content/control/control.html",
"content": "\r\n\r\n\r\n\r\n \r\n\r\n \r\n PoP Vlog - Control\r\n \r\n\r\n \r\n\r\n \r\n\r\n
PoP Vlog - Control
\r\n\r\n \r\n\r\n
Use the keyboard to move the red square.
\r\n\r\n \r\n\r\n \r\n\r\n\r\n"
},
{
"path": "content/control/control.js",
"content": "// Frank Poth 08/13/2017\r\n\r\nvar context, controller, rectangle, loop;\r\n\r\ncontext = document.querySelector(\"canvas\").getContext(\"2d\");\r\n\r\ncontext.canvas.height = 180;\r\ncontext.canvas.width = 320;\r\n\r\nrectangle = {\r\n\r\n height:32,\r\n jumping:true,\r\n width:32,\r\n x:144, // center of the canvas\r\n x_velocity:0,\r\n y:0,\r\n y_velocity:0\r\n\r\n};\r\n\r\ncontroller = {\r\n\r\n left:false,\r\n right:false,\r\n up:false,\r\n keyListener:function(event) {\r\n\r\n var key_state = (event.type == \"keydown\")?true:false;\r\n\r\n switch(event.keyCode) {\r\n\r\n case 37:// left key\r\n controller.left = key_state;\r\n break;\r\n case 38:// up key\r\n controller.up = key_state;\r\n break;\r\n case 39:// right key\r\n controller.right = key_state;\r\n break;\r\n\r\n }\r\n\r\n }\r\n\r\n};\r\n\r\nloop = function() {\r\n\r\n if (controller.up && rectangle.jumping == false) {\r\n\r\n rectangle.y_velocity -= 20;\r\n rectangle.jumping = true;\r\n\r\n }\r\n\r\n if (controller.left) {\r\n\r\n rectangle.x_velocity -= 0.5;\r\n\r\n }\r\n\r\n if (controller.right) {\r\n\r\n rectangle.x_velocity += 0.5;\r\n\r\n }\r\n\r\n rectangle.y_velocity += 1.5;// gravity\r\n rectangle.x += rectangle.x_velocity;\r\n rectangle.y += rectangle.y_velocity;\r\n rectangle.x_velocity *= 0.9;// friction\r\n rectangle.y_velocity *= 0.9;// friction\r\n\r\n // if rectangle is falling below floor line\r\n if (rectangle.y > 180 - 16 - 32) {\r\n\r\n rectangle.jumping = false;\r\n rectangle.y = 180 - 16 - 32;\r\n rectangle.y_velocity = 0;\r\n\r\n }\r\n\r\n // if rectangle is going off the left of the screen\r\n if (rectangle.x < -32) {\r\n\r\n rectangle.x = 320;\r\n\r\n } else if (rectangle.x > 320) {// if rectangle goes past right boundary\r\n\r\n rectangle.x = -32;\r\n\r\n }\r\n\r\n context.fillStyle = \"#202020\";\r\n context.fillRect(0, 0, 320, 180);// x, y, width, height\r\n context.fillStyle = \"#ff0000\";// hex for red\r\n context.beginPath();\r\n context.rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);\r\n context.fill();\r\n context.strokeStyle = \"#202830\";\r\n context.lineWidth = 4;\r\n context.beginPath();\r\n context.moveTo(0, 164);\r\n context.lineTo(320, 164);\r\n context.stroke();\r\n\r\n // call update when the browser is ready to draw again\r\n window.requestAnimationFrame(loop);\r\n\r\n};\r\n\r\nwindow.addEventListener(\"keydown\", controller.keyListener)\r\nwindow.addEventListener(\"keyup\", controller.keyListener);\r\nwindow.requestAnimationFrame(loop);\r\n"
},
{
"path": "content/cube/cube.html",
"content": "\r\n\r\n\r\n\r\n \r\n\r\n \r\n \r\n Cube\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n\r\n"
},
{
"path": "content/dino/dino.css",
"content": "/* Frank Poth 12/24/2017 */\r\n\r\n* {\r\n\r\n box-sizing:border-box;\r\n margin:0;\r\n padding:0;\r\n user-select:none;\r\n\r\n}\r\n\r\nhtml {\r\n\r\n height:100%;\r\n width:100%;\r\n\r\n}\r\n\r\nbody {\r\n\r\n align-content:space-around;\r\n background-color:#202830;\r\n color:#ffffff;\r\n display:grid;\r\n grid-template-columns:auto;\r\n grid-template-rows:auto auto auto;\r\n height:100%;\r\n justify-items:center;\r\n padding:0 8px;\r\n width:100%;\r\n\r\n}\r\n"
},
{
"path": "content/dino/dino.html",
"content": "\r\n\r\n\r\n\r\n \r\n\r\n \r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n
PoP Vlog - Dino Run
\r\n\r\n \r\n\r\n
Click or tap to jump!
\r\n\r\n \r\n\r\n \r\n\r\n\r\n"
},
{
"path": "content/dino/dino.js",
"content": "// Frank Poth 12/24/2017\r\n\r\n/* This example has a lot packed into it. It has a scrolling tile based background.\r\nThe rightmost column is randomly generated when scrolling. There is animation.\r\nThere is collision detection between all moving objects and the world as well as\r\nthe player and the meteors and tarpits. There is an effect that turns the screen\r\nred when a meteor spawns using image data. I implement object pooling to avoid using\r\n\"new\" to create new objects. Some of this stuff I've covered in old tutorials, and\r\nsome stuff I have not covered. */\r\n\r\n(function() { \"use strict\";\r\n\r\n const TILE_SIZE = 16;\r\n const WORLD_HEIGHT = 144;\r\n const WORLD_WIDTH = 256;\r\n\r\n //// CLASSES ////\r\n\r\n var Animation = function(frame_set, delay) {\r\n\r\n this.count = 0;// Counts the number of game cycles since the last frame change.\r\n this.delay = delay;// The number of game cycles to wait until the next frame change.\r\n this.frame_value = frame_set[0];// The value in the sprite sheet of the sprite image / tile to display.\r\n this.frame_index = 0;// The frame's index in the current animation frame set.\r\n this.frame_set = frame_set;// The current animation frame set that holds sprite tile values.\r\n\r\n };\r\n\r\n Animation.prototype = {\r\n\r\n /* This changes the current animation frame set. For example, if the current\r\n set is [0, 1], and the new set is [2, 3], it changes the set to [2, 3]. It also\r\n sets the delay. */\r\n change:function(frame_set, delay = 15) {\r\n\r\n if (this.frame_set != frame_set) {// If the frame set is different:\r\n\r\n this.count = 0;// Reset the count.\r\n this.delay = delay;// Set the delay.\r\n this.frame_index = 0;// Start at the first frame in the new frame set.\r\n this.frame_set = frame_set;// Set the new frame set.\r\n this.frame_value = this.frame_set[this.frame_index];// Set the new frame value.\r\n\r\n }\r\n\r\n },\r\n\r\n /* Call this on each game cycle. */\r\n update:function() {\r\n\r\n this.count ++;// Keep track of how many cycles have passed since the last frame change.\r\n\r\n if (this.count >= this.delay) {// If enough cycles have passed, we change the frame.\r\n\r\n this.count = 0;// Reset the count.\r\n /* If the frame index is on the last value in the frame set, reset to 0.\r\n If the frame index is not on the last value, just add 1 to it. */\r\n this.frame_index = (this.frame_index == this.frame_set.length - 1) ? 0 : this.frame_index + 1;\r\n this.frame_value = this.frame_set[this.frame_index];// Change the current frame value.\r\n\r\n }\r\n\r\n }\r\n\r\n };\r\n\r\n /* A frame just keeps track of a physical position inside the tile sheet for blitting. */\r\n var Frame = function(x, y, width, height) {\r\n\r\n this.height = height;\r\n this.width = width;\r\n this.x = x;\r\n this.y = y;\r\n\r\n };\r\n\r\n /* A Pool object manages objects. The objects array holds all objects that are\r\n currently in use, and the pool holds objects that are not in use. By storing objects\r\n that would otherwise be deleted, we can reuse them instead of creating totally new\r\n instances with the new operator. Recycling saves memory. Do it. */\r\n var Pool = function(object) {\r\n\r\n this.object = object;// The constructor of the object we are pooling.\r\n this.objects = [];// The array of objects in use.\r\n this.pool = [];// The array of objects not in use.\r\n\r\n };\r\n\r\n Pool.prototype = {\r\n\r\n /* Get an object from the pool or create a new object. Pool expects objects to\r\n have a few basic functions, like reset. */\r\n get:function(parameters) {\r\n\r\n if (this.pool.length != 0) {\r\n\r\n let object = this.pool.pop();\r\n object.reset(parameters);\r\n this.objects.push(object);\r\n\r\n } else {\r\n\r\n this.objects.push(new this.object(parameters.x, parameters.y));\r\n\r\n }\r\n\r\n },\r\n\r\n store:function(object) {\r\n\r\n let index = this.objects.indexOf(object);\r\n\r\n if (index != -1) {\r\n\r\n this.pool.push(this.objects.splice(index, 1)[0]);\r\n\r\n }\r\n\r\n },\r\n\r\n storeAll:function() {\r\n\r\n for (let index = this.objects.length - 1; index > -1; -- index) {\r\n\r\n this.pool.push(this.objects.pop());\r\n\r\n }\r\n\r\n }\r\n\r\n };\r\n\r\n var Meteor = function(x, y) {\r\n\r\n this.alive = true;// Meteor dies when it goes offscreen.\r\n this.animation = new Animation(display.tile_sheet.frame_sets[1], 8);\r\n this.grounded = false;\r\n this.smoke = false;// smoke values are used for spawning smoke particles.\r\n this.smoke_count = 0;\r\n this.smoke_delay = Math.floor(Math.random() * 10 + 5);\r\n this.height = Math.floor(Math.random() * 16 + 24); this.width = this.height;\r\n this.x = x; this.y = y - this.height * 0.5;\r\n let direction = Math.PI * 1.75 + Math.random() * Math.PI * 0.1;// The trajectory.\r\n this.x_velocity = Math.cos(direction) * 3; this.y_velocity = -Math.sin(direction) * 3;\r\n\r\n };\r\n\r\n /* All game objects are expected to have collideWorld and CollideObject functions,\r\n as well as update and reset functions. If this were a strongly typed language, I\r\n would be using a base class called GameObject or something. */\r\n Meteor.prototype = {\r\n\r\n constructor:Meteor,\r\n\r\n collideObject:function(player) {\r\n\r\n let vector_x = player.x + player.width * 0.5 - this.x - this.width * 0.5;\r\n let vector_y = player.y + player.height * 0.5 - this.y - this.height * 0.5;\r\n let combined_radius = player.height * 0.5 + this.width * 0.5;\r\n\r\n if (vector_x * vector_x + vector_y * vector_y < combined_radius * combined_radius) {\r\n\r\n player.alive = false;\r\n player.animation.change(display.tile_sheet.frame_sets[5], 10);\r\n\r\n }\r\n\r\n },\r\n\r\n collideWorld:function() {\r\n\r\n if (this.x + this.width < 0) {\r\n\r\n this.alive = false;\r\n return;\r\n\r\n }\r\n\r\n if (this.y + this.height > WORLD_HEIGHT - 6) {\r\n\r\n this.x_velocity = -game.speed;\r\n this.grounded = true;\r\n this.y = WORLD_HEIGHT - this.height - 6;\r\n\r\n }\r\n\r\n },\r\n\r\n reset:function(parameters) {\r\n\r\n this.alive = true;\r\n this.animation.change(display.tile_sheet.frame_sets[1], 8);\r\n this.grounded = false;\r\n this.x = parameters.x;\r\n let direction = Math.PI * 1.75 + Math.random() * Math.PI * 0.1;\r\n this.x_velocity = Math.cos(direction) * 3;\r\n this.y = parameters.y;\r\n this.y_velocity = -Math.sin(direction) * 3;\r\n\r\n },\r\n\r\n update:function() {\r\n\r\n if (!this.grounded) {\r\n\r\n this.animation.update();\r\n this.y += this.y_velocity;\r\n\r\n } else {\r\n\r\n this.x_velocity = -game.speed;\r\n\r\n }\r\n\r\n this.x += this.x_velocity;\r\n\r\n this.smoke_count ++;\r\n if (this.smoke_count == this.smoke_delay) {\r\n\r\n this.smoke_count = 0;\r\n this.smoke = true;\r\n\r\n }\r\n\r\n }\r\n\r\n };\r\n\r\n var Smoke = function(x, y, x_velocity, y_velocity) {\r\n\r\n this.alive = true;\r\n this.animation = new Animation(display.tile_sheet.frame_sets[2], 8);\r\n this.life_count = 0;\r\n this.life_time = Math.random() * 20 + 30;\r\n this.height = 8 + Math.floor(Math.random() * 8); this.width = this.height;\r\n this.x = x; this.y = y;\r\n this.x_velocity = x_velocity; this.y_velocity = y_velocity;\r\n\r\n };\r\n\r\n Smoke.prototype = {\r\n\r\n constructor:Smoke,\r\n\r\n collideWorld:function() {\r\n\r\n if (this.x > WORLD_WIDTH || this.y > WORLD_HEIGHT - 20) {\r\n\r\n this.alive = false;\r\n\r\n }\r\n\r\n },\r\n\r\n reset:function(parameters) {\r\n\r\n this.alive = true;\r\n this.life_count = 0;\r\n this.life_time = Math.random() * 20 + 30;\r\n this.x = parameters.x;\r\n this.x_velocity = parameters.x_velocity;\r\n this.y = parameters.y;\r\n this.y_velocity = parameters.y_velocity;\r\n\r\n },\r\n\r\n update:function() {\r\n\r\n this.animation.update();\r\n this.x += this.x_velocity;\r\n this.y += this.y_velocity;\r\n\r\n this.life_count ++;\r\n\r\n if (this.life_count > this.life_time) {\r\n\r\n this.alive = false;\r\n\r\n }\r\n\r\n }\r\n\r\n };\r\n\r\n var TarPit = function(x, y) {\r\n\r\n this.alive = true;\r\n this.animation = new Animation(display.tile_sheet.frame_sets[0], 8);\r\n this.height = 30; this.width = Math.floor(Math.random() * 64 + 48);\r\n this.x = x; this.y = y;\r\n\r\n };\r\n\r\n TarPit.prototype = {\r\n\r\n constructor:TarPit,\r\n\r\n collideObject:function(player) {\r\n\r\n },\r\n\r\n collideObject:function(object) {\r\n\r\n if (!object.jumping && object.x + object.width * 0.5 > this.x + this.width * 0.2 && object.x + object.width * 0.5 < this.x + this.width * 0.8) {\r\n\r\n object.alive = false;\r\n object.animation.change(display.tile_sheet.frame_sets[4], 10);\r\n\r\n }\r\n\r\n },\r\n\r\n collideWorld:function() {\r\n\r\n if (this.x + this.width < 0) this.alive = false;\r\n\r\n },\r\n\r\n reset:function(parameters) {\r\n\r\n this.alive = true;\r\n this.width = Math.floor(Math.random() * 64 + 48);\r\n this.x = parameters.x;\r\n this.y = parameters.y;\r\n\r\n },\r\n\r\n update:function(){\r\n\r\n this.animation.update();\r\n this.x -= game.speed;\r\n\r\n }\r\n\r\n };\r\n\r\n var controller, display, game;\r\n\r\n /* This is awesome. I can use the same event handler for all mouseup, mousedown,\r\n touchstart, and touchend events. This controller works on everything! */\r\n controller = {\r\n\r\n active:false, state:false,\r\n\r\n onOff:function(event) {\r\n\r\n event.preventDefault();\r\n\r\n let key_state = (event.type == \"mousedown\" || event.type == \"touchstart\") ? true : false;\r\n\r\n if (controller.state != key_state) controller.active = key_state;\r\n controller.state = key_state;\r\n\r\n }\r\n\r\n };\r\n\r\n display = {\r\n\r\n buffer:document.createElement(\"canvas\").getContext(\"2d\"),\r\n context:document.querySelector(\"canvas\").getContext(\"2d\"),\r\n\r\n tint:0,// The red tint value to add to the buffer's red channel when a meteor is on screen.\r\n\r\n tile_sheet: {\r\n\r\n columns:undefined,// Set up in INITIALIZE section.\r\n frames: [new Frame( 0, 32, 24, 16), new Frame(24, 32, 24, 16),// tar pit\r\n new Frame(64, 32, 16, 16), new Frame(80, 32, 16, 16),// Meteor\r\n new Frame(96, 32, 8, 8), new Frame(104,32, 8, 8), new Frame(96, 40, 8, 8), new Frame(104,40, 8, 8),// smoke\r\n new Frame( 0, 48, 28, 16), new Frame(28, 48, 28, 16), new Frame(56, 48, 28, 16), new Frame(84, 48, 28, 16), new Frame( 0, 64, 28, 16), new Frame(28, 64, 28, 16), new Frame(56, 64, 28, 16), new Frame(84, 64, 28, 16),//dino run\r\n new Frame( 0, 80, 28, 16), new Frame(28, 80, 28, 16), new Frame(56, 80, 28, 16), new Frame(84, 80, 28, 16), new Frame( 0, 96, 28, 16), new Frame(28, 96, 28, 16),//dino sink\r\n new Frame(56, 96, 28, 16), new Frame(84, 96, 28, 16), new Frame( 0,112, 28, 16), new Frame(28,112, 28, 16), new Frame(56,112, 28, 16), new Frame(84,112, 28, 16)//dino crisp\r\n ],\r\n\r\n frame_sets:[[ 0, 1],//tar pit\r\n [ 2, 3],//Meteor\r\n [ 4, 5, 6, 7],//smoke\r\n [ 8, 9,10,11,12,13,14,15],//dino run\r\n [16,17,18,19,20,21],//dino sink\r\n [22,23,24,25,26,27]//dino crisp\r\n\r\n ],\r\n image:new Image()// The tile sheet image is loaded at the bottom of this file.\r\n\r\n },\r\n\r\n render:function() {\r\n\r\n // Draw Tiles\r\n for (let index = game.area.map.length - 1; index > -1; -- index) {\r\n\r\n let value = game.area.map[index];\r\n\r\n this.buffer.drawImage(this.tile_sheet.image, (value % this.tile_sheet.columns) * TILE_SIZE, Math.floor(value / this.tile_sheet.columns) * TILE_SIZE, TILE_SIZE, TILE_SIZE, (index % game.area.columns) * TILE_SIZE - game.area.offset, Math.floor(index / game.area.columns) * TILE_SIZE, TILE_SIZE, TILE_SIZE);\r\n\r\n }\r\n\r\n // Draw distance\r\n this.buffer.font = \"20px Arial\";\r\n this.buffer.fillStyle = \"#ffffff\";\r\n this.buffer.fillText(String(Math.floor(game.distance/10) + \" / \" + Math.floor(game.max_distance/10)), 10, 20);\r\n\r\n // Draw TarPits\r\n for (let index = game.object_manager.tarpit_pool.objects.length - 1; index > -1; -- index) {\r\n\r\n let tarpit = game.object_manager.tarpit_pool.objects[index];\r\n\r\n let frame = this.tile_sheet.frames[tarpit.animation.frame_value];\r\n\r\n this.buffer.drawImage(this.tile_sheet.image, frame.x, frame.y, frame.width, frame.height, tarpit.x, tarpit.y, tarpit.width, tarpit.height);\r\n\r\n }\r\n\r\n // Draw Player\r\n let frame = this.tile_sheet.frames[game.player.animation.frame_value];\r\n\r\n this.buffer.drawImage(this.tile_sheet.image, frame.x, frame.y, frame.width, frame.height, game.player.x, game.player.y, game.player.width, game.player.height);\r\n\r\n // Draw Meteors\r\n for (let index = game.object_manager.meteor_pool.objects.length - 1; index > -1; -- index) {\r\n\r\n let meteor = game.object_manager.meteor_pool.objects[index];\r\n\r\n let frame = this.tile_sheet.frames[meteor.animation.frame_value];\r\n\r\n this.buffer.drawImage(this.tile_sheet.image, frame.x, frame.y, frame.width, frame.height, meteor.x, meteor.y, meteor.width, meteor.height);\r\n\r\n }\r\n\r\n // Draw Smoke\r\n for (let index = game.object_manager.smoke_pool.objects.length - 1; index > -1; -- index) {\r\n\r\n let smoke = game.object_manager.smoke_pool.objects[index];\r\n\r\n let frame = this.tile_sheet.frames[smoke.animation.frame_value];\r\n\r\n this.buffer.drawImage(this.tile_sheet.image, frame.x, frame.y, frame.width, frame.height, smoke.x, smoke.y, smoke.width, smoke.height);\r\n\r\n }\r\n\r\n // Draw tint if a meteor is on screen\r\n if (game.object_manager.meteor_pool.objects.length != 0) {\r\n\r\n this.tint = (this.tint < 80) ? this.tint + 1 : 80;\r\n\r\n } else {// Reduce tint otherwise\r\n\r\n this.tint = (this.tint > 0) ? this.tint - 2 : 0;\r\n\r\n }\r\n\r\n if (this.tint != 0) {// If there is a tint to draw, apply it to the buffer\r\n\r\n let image_data = this.buffer.getImageData(0, 0, WORLD_WIDTH, WORLD_HEIGHT);\r\n let data = image_data.data;\r\n\r\n for (let index = data.length - 4; index > -1; index -= 4) {\r\n\r\n data[index] += this.tint;\r\n\r\n }\r\n\r\n this.buffer.putImageData(image_data, 0, 0);\r\n\r\n }\r\n\r\n this.context.drawImage(this.buffer.canvas, 0, 0, WORLD_WIDTH, WORLD_HEIGHT, 0, 0, this.context.canvas.width, this.context.canvas.height);\r\n\r\n },\r\n\r\n resize:function(event) {\r\n\r\n display.context.canvas.width = document.documentElement.clientWidth - 16;\r\n\r\n if (display.context.canvas.width > document.documentElement.clientHeight - 16) {\r\n\r\n display.context.canvas.width = document.documentElement.clientHeight - 16;\r\n\r\n }\r\n\r\n display.context.canvas.height = display.context.canvas.width * 0.5625;\r\n\r\n display.buffer.imageSmoothingEnabled = false;\r\n display.context.imageSmoothingEnabled = false;\r\n\r\n display.render();\r\n\r\n }\r\n\r\n };\r\n\r\n game = {\r\n\r\n distance:0,\r\n max_distance:0,\r\n speed:3,\r\n\r\n area: {\r\n\r\n columns:17,\r\n offset:0,\r\n map:[ 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 1, 1, 1, 1, 0,\r\n 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 1,\r\n 1, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 1, 1, 1,\r\n 1, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1,\r\n 0, 1, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 0, 0, 1, 0,\r\n 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0,\r\n 1, 1, 1, 1, 1, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 1, 0,\r\n 2, 2, 2, 3, 2, 2, 3, 2, 4, 6, 7, 7, 6, 9, 2, 3, 2,\r\n 10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10],\r\n\r\n /* Takes care of scrolling the background and generating the next column to\r\n display on the far right of the map. */\r\n scroll:function() {\r\n\r\n game.distance += game.speed;\r\n\r\n if (game.distance > game.max_distance) game.max_distance = game.distance;\r\n\r\n this.offset += game.speed;\r\n if (this.offset >= TILE_SIZE) {\r\n\r\n this.offset -= TILE_SIZE;\r\n\r\n /* This loop removes the first column and inserts a randomly generated\r\n last column for the top 7 rows. This handles random sky generation. */\r\n for (let index = this.map.length - this.columns * 3 ; index > -1; index -= this.columns) {\r\n\r\n this.map.splice(index, 1);\r\n this.map.splice(index + this.columns - 1, 0, Math.floor(Math.random() * 2));\r\n\r\n }\r\n\r\n /* This next part replaces the grass with an appropriate grass tile. I\r\n made it a bit more complex than it needed to be, but the tiles actually\r\n reconcile their edges with the tile directly to the left. */\r\n this.map.splice(this.columns * 7, 1);\r\n\r\n let right_index = this.columns * 8 - 1;\r\n let value = this.map[right_index - 1];\r\n\r\n switch(value) {\r\n\r\n case 2: case 3: value = [2, 3, 2, 3, 2, 3, 2, 3, 4, 5][Math.floor(Math.random() * 10)]; break;\r\n case 4: case 5: value = [6, 7][Math.floor(Math.random() * 2)]; break;\r\n case 6: case 7: value = [6, 7, 8, 9][Math.floor(Math.random() * 4)]; break;\r\n case 8: case 9: value = [2, 3][Math.floor(Math.random() * 2)]; break;\r\n\r\n }\r\n\r\n this.map.splice(right_index, 0, value);\r\n\r\n // The last row stays the same. It's just dirt.\r\n\r\n }\r\n\r\n }\r\n\r\n },\r\n\r\n engine: {\r\n\r\n /* Fixed time step game loop!! */\r\n afrequest:undefined,// animation frame request reference\r\n accumulated_time:window.performance.now(),\r\n time_step:1000/60,// update rate\r\n\r\n loop:function(time_stamp) {\r\n\r\n /* How easy does this look? This is a fixed step loop with frame dropping.\r\n Amazingly it's super simple and only a few lines. This will make your game\r\n run at the same speed on all devices. Now that I look at it, I think there\r\n may be a better way to implement this because entire frames can be dropped\r\n without updating or rendering. Rather than fixing this now, I will just leave it.\r\n Ideally, I would utilize the free time and not do both updates and renderings\r\n at the same time unless I have to... Another day... This does work fine, though. */\r\n if (time_stamp >= game.engine.accumulated_time + game.engine.time_step) {\r\n\r\n if (time_stamp - game.engine.accumulated_time >= game.engine.time_step * 4) {\r\n\r\n game.engine.accumulated_time = time_stamp;\r\n\r\n }\r\n\r\n while(game.engine.accumulated_time < time_stamp) {\r\n\r\n game.engine.accumulated_time += game.engine.time_step;\r\n\r\n game.engine.update();\r\n\r\n }\r\n\r\n display.render();\r\n\r\n }\r\n\r\n window.requestAnimationFrame(game.engine.loop);\r\n\r\n },\r\n\r\n start:function() {// Start the game loop.\r\n\r\n this.afrequest = window.requestAnimationFrame(this.loop);\r\n\r\n },\r\n\r\n update:function() {// Update the game logic.\r\n\r\n /* Slowly increase speed and cap it when it gets too high. */\r\n game.speed = (game.speed >= TILE_SIZE * 0.5)? TILE_SIZE * 0.5 : game.speed + 0.001;\r\n /* Make sure the player's animation delay is keeping up with the scroll speed. */\r\n game.player.animation.delay = Math.floor(10 - game.speed);\r\n game.area.scroll();// Scroll!!!\r\n\r\n if (game.player.alive) {\r\n\r\n if (controller.active && !game.player.jumping) {// Get user input\r\n\r\n controller.active = false;\r\n game.player.jumping = true;\r\n game.player.y_velocity -= 15;\r\n game.player.animation.change([10], 15);\r\n\r\n }\r\n\r\n if (game.player.jumping == false) {\r\n\r\n game.player.animation.change(display.tile_sheet.frame_sets[3], Math.floor(TILE_SIZE - game.speed));\r\n\r\n }\r\n\r\n game.player.update();\r\n\r\n if (game.player.y > TILE_SIZE * 6 - TILE_SIZE * 0.25) {// Collide with floor\r\n\r\n controller.active = false;\r\n game.player.y = TILE_SIZE * 6 - TILE_SIZE * 0.25;\r\n game.player.y_velocity = 0;\r\n game.player.jumping = false;\r\n\r\n }\r\n\r\n } else {\r\n\r\n game.player.x -= game.speed;\r\n game.speed *= 0.9;\r\n\r\n if (game.player.animation.frame_index == game.player.animation.frame_set.length - 1) game.reset();\r\n\r\n }\r\n\r\n game.player.animation.update();\r\n\r\n game.object_manager.spawn();\r\n game.object_manager.update();\r\n\r\n }\r\n\r\n },\r\n\r\n /* Manages all non player objects. */\r\n object_manager: {\r\n\r\n count:0,\r\n delay:100,\r\n\r\n meteor_pool:new Pool(Meteor),\r\n smoke_pool:new Pool(Smoke),\r\n tarpit_pool:new Pool(TarPit),\r\n\r\n spawn:function() {\r\n\r\n this.count ++;\r\n\r\n if (this.count == this.delay) {\r\n\r\n this.count = 0;\r\n this.delay = 100;// + Math.floor(Math.random() * 200 - 10 * game.speed);\r\n\r\n /* Pick randomly between tarpits and meteors */\r\n if (Math.random() > 0.5) {\r\n\r\n this.tarpit_pool.get( {x: WORLD_WIDTH, y:WORLD_HEIGHT - 30} );\r\n\r\n } else {\r\n\r\n this.meteor_pool.get( {x: WORLD_WIDTH * 0.2, y: -32 } );\r\n\r\n }\r\n\r\n }\r\n\r\n },\r\n\r\n update:function() {\r\n\r\n for (let index = this.meteor_pool.objects.length - 1; index > -1; -- index) {\r\n\r\n let meteor = this.meteor_pool.objects[index];\r\n\r\n meteor.update();\r\n\r\n meteor.collideObject(game.player);\r\n\r\n meteor.collideWorld();\r\n\r\n if (meteor.smoke) {\r\n\r\n meteor.smoke = false;\r\n\r\n let parameters = { x:meteor.x + Math.random() * meteor.width, y:undefined, x_velocity:undefined, y_velocity:undefined };\r\n\r\n if (meteor.grounded) {\r\n\r\n parameters.y = meteor.y + Math.random() * meteor.height * 0.5;\r\n parameters.x_velocity = Math.random() * 2 - 1 - game.speed;\r\n parameters.y_velocity = Math.random() * -1;\r\n\r\n } else {\r\n\r\n parameters.y = meteor.y + Math.random() * meteor.height;\r\n parameters.x_velocity = meteor.x_velocity * Math.random();\r\n parameters.y_velocity = meteor.y_velocity * Math.random();\r\n\r\n }\r\n\r\n this.smoke_pool.get(parameters);\r\n\r\n }\r\n\r\n if (!meteor.alive) {\r\n\r\n this.meteor_pool.store(meteor);\r\n\r\n };\r\n\r\n }\r\n\r\n for (let index = this.smoke_pool.objects.length - 1; index > -1; -- index) {\r\n\r\n let smoke = this.smoke_pool.objects[index];\r\n\r\n smoke.update();\r\n\r\n smoke.collideWorld();\r\n\r\n if (!smoke.alive) this.smoke_pool.store(smoke);\r\n\r\n }\r\n\r\n for (let index = this.tarpit_pool.objects.length - 1; index > -1; -- index) {\r\n\r\n let tarpit = this.tarpit_pool.objects[index];\r\n\r\n tarpit.update();\r\n\r\n tarpit.collideObject(game.player);\r\n\r\n tarpit.collideWorld();\r\n\r\n if (!tarpit.alive) this.tarpit_pool.store(tarpit);\r\n\r\n }\r\n\r\n }\r\n\r\n },\r\n\r\n player: {\r\n\r\n alive:true,\r\n animation:new Animation([15], 10),\r\n jumping:false,\r\n height: 32, width: 56,\r\n x:8, y:TILE_SIZE * 6 - TILE_SIZE * 0.25,\r\n y_velocity:0,\r\n\r\n reset:function() {\r\n\r\n this.alive = true;\r\n this.x = 8;\r\n\r\n },\r\n\r\n update:function() {\r\n\r\n game.player.y_velocity += 0.5;\r\n game.player.y += game.player.y_velocity;\r\n game.player.y_velocity *= 0.9;\r\n\r\n }\r\n\r\n },\r\n\r\n reset:function() {\r\n\r\n this.distance = 0;\r\n this.player.reset();\r\n\r\n /* Put all of our objects away. */\r\n this.object_manager.meteor_pool.storeAll();\r\n this.object_manager.smoke_pool.storeAll();\r\n this.object_manager.tarpit_pool.storeAll();\r\n\r\n this.speed = 3;\r\n\r\n }\r\n\r\n };\r\n\r\n ////////////////////\r\n //// INITIALIZE ////\r\n ////////////////////\r\n\r\n display.buffer.canvas.height = WORLD_HEIGHT;\r\n display.buffer.canvas.width = WORLD_WIDTH;\r\n\r\n display.tile_sheet.image.src = \"dino.png\";\r\n display.tile_sheet.image.addEventListener(\"load\", function(event) {\r\n\r\n display.tile_sheet.columns = this.width / TILE_SIZE;\r\n\r\n display.resize();\r\n\r\n game.engine.start();\r\n\r\n });\r\n\r\n window.addEventListener(\"resize\", display.resize);\r\n window.addEventListener(\"mousedown\", controller.onOff);\r\n window.addEventListener(\"mouseup\", controller.onOff);\r\n window.addEventListener(\"touchstart\", controller.onOff);\r\n window.addEventListener(\"touchend\", controller.onOff);\r\n\r\n})();\r\n"
},
{
"path": "content/dominiques-doors/area0.json",
"content": "{\r\n\r\n \"message\":\"~The Tiny Closet~\",\r\n \"background_color\":\"#052623\",\r\n \"floor\":62,\r\n \"height\":64,\r\n \"width\":128,\r\n\r\n \"doors\":[\r\n\r\n { \"area\":\"area1.json\", \"x\":48, \"new_x\":112 }\r\n\r\n ]\r\n\r\n}\r\n"
},
{
"path": "content/dominiques-doors/area1.json",
"content": "{\r\n\r\n \"message\":\"~The Main Lobby~\",\r\n \"background_color\":\"#003333\",\r\n \"floor\":120,\r\n \"height\":128,\r\n \"width\":256,\r\n\r\n \"doors\":[\r\n\r\n { \"area\":\"area2.json\", \"x\":48, \"new_x\":48 },\r\n { \"area\":\"area0.json\", \"x\":112, \"new_x\":48 },\r\n { \"area\":\"area3.json\", \"x\":176, \"new_x\":16 }\r\n\r\n ]\r\n\r\n}\r\n"
},
{
"path": "content/dominiques-doors/area2.json",
"content": "{\r\n\r\n \"message\":\"~The Giant Pointless Room~\",\r\n \"background_color\":\"#006666\",\r\n \"floor\":250,\r\n \"height\":256,\r\n \"width\":512,\r\n\r\n \"doors\":[\r\n\r\n { \"area\":\"area1.json\", \"x\":48, \"new_x\":48 }\r\n\r\n ]\r\n\r\n}\r\n"
},
{
"path": "content/dominiques-doors/area3.json",
"content": "{\r\n\r\n \"message\":\"~The Passageway~\",\r\n \"background_color\":\"#148977\",\r\n \"floor\":60,\r\n \"height\":64,\r\n \"width\":200,\r\n\r\n \"doors\":[\r\n\r\n { \"area\":\"area1.json\", \"x\":16, \"new_x\":176 }\r\n\r\n ]\r\n\r\n}\r\n"
},
{
"path": "content/dominiques-doors/dominiques-doors.css",
"content": "/* Frank Poth 01/14/2017 */\r\n\r\n* {\r\n\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n\r\n}\r\n\r\nhtml { height:100%; width:100%; }\r\n\r\nbody {\r\n\r\n align-content:space-around;\r\n align-items:space-around;\r\n color:#ffffff;\r\n background-color:#202830;\r\n display:grid;\r\n grid-template-columns:auto;\r\n grid-template-rows:auto auto;\r\n justify-items:center;\r\n min-height:100%;\r\n width:100%;\r\n\r\n}\r\n\r\nh1 { font-size: 3.0em; text-align:center; }\r\n"
},
{
"path": "content/dominiques-doors/dominiques-doors.html",
"content": "\r\n\r\n\r\n\r\n \r\n\r\n \r\n\r\n \r\n \r\n\r\n PoP Vlog - Loading Levels!!!\r\n\r\n \r\n\r\n \r\n\r\n
PoP Vlog - Loading Levels!!!
\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n\r\n"
},
{
"path": "content/dominiques-doors/dominiques-doors.js",
"content": "// Frank Poth 01/14/2017\r\n\r\n/* By studying this example program, you can learn how to load json levels, how\r\nto animate sprites, and other basic game design techniques including: user Input\r\non the keyboard, some collision detection and response, image loading, and maybe\r\nsome other things, too. */\r\n\r\n/* You may notice that in the largest room the dominique sprite looks a little weird.\r\nThere is a brown bar that flashes in front of her face when she walks to the left.\r\nThis is because of something called \"texture bleeding\" where a scaled image allows\r\npixels from around the cropped source region of the image to bleed into the desired\r\npart of the source image. This is okay for cropping from large images, but for sprite\r\nsheets it's not desireable. A way around this is to create individual canvases for\r\neach sprite image and use those to draw rather than cutting frames from the original\r\nsprite sheet. No bleeding can occur because there are no longer pixels around the\r\nedges of the sprite image. */\r\n\r\n(function() { \"use strict\";\r\n\r\n const Animation = function(frame_set, delay, mode = \"loop\") {\r\n\r\n this.count = 0;\r\n this.delay = delay;\r\n this.frame_index = 0;\r\n this.frame_set = frame_set;\r\n this.frame_value = frame_set[0];\r\n this.mode = mode;\r\n\r\n };\r\n\r\n /* I expanded the Animation class to include play, loop, and rewind modes. They're\r\n all really simple, and basically they are the same thing with very minor changes\r\n dictating how the playhead or frame_index moves. */\r\n Animation.prototype = {\r\n\r\n constructor:Animation,\r\n\r\n change:function(frame_set, delay = this.delay) {\r\n\r\n if (frame_set != this.frame_set) {\r\n\r\n this.count = 0;\r\n this.delay = delay;\r\n this.frame_index = 0;\r\n this.frame_set = frame_set;\r\n this.frame_value = frame_set[0];\r\n\r\n }\r\n\r\n },\r\n\r\n loop:function() {\r\n\r\n this.count ++;\r\n\r\n if (this.count >= this.delay) {\r\n\r\n this.count = 0;\r\n\r\n this.frame_index = (this.frame_index < this.frame_set.length - 1) ? this.frame_index + 1 : 0;\r\n this.frame_value = this.frame_set[this.frame_index];\r\n\r\n }\r\n\r\n },\r\n\r\n play:function() {\r\n\r\n this.count ++;\r\n\r\n if (this.count >= this.delay) {\r\n\r\n this.count = 0;\r\n\r\n if (this.frame_index < this.frame_set.length - 1) {\r\n\r\n this.frame_index ++;\r\n this.frame_value = this.frame_set[this.frame_index];\r\n\r\n }\r\n\r\n }\r\n\r\n },\r\n\r\n rewind:function() {\r\n\r\n this.count ++;\r\n\r\n if (this.count >= this.delay) {\r\n\r\n this.count = 0;\r\n\r\n if (this.frame_index > 0) {\r\n\r\n this.frame_index --;\r\n this.frame_value = this.frame_set[this.frame_index];\r\n\r\n }\r\n\r\n }\r\n\r\n },\r\n\r\n update:function() {\r\n\r\n this[this.mode]();\r\n\r\n }\r\n\r\n };\r\n\r\n /* I added offsets to the frames. This allows me to group my frames close together\r\n in the source image and save a lot of space in my image files. The offset is\r\n applied when drawing the image to the screen, ensuring that the sprite always looks\r\n centered and doesn't jump back and forth. */\r\n const Frame = function(x, y, width, height, offset_x = 0, offset_y = 0) {\r\n\r\n this.height = height;\r\n this.offset_x = offset_x;\r\n this.offset_y = offset_y;\r\n this.width = width;\r\n this.x = x;\r\n this.y = y;\r\n\r\n };\r\n\r\n Frame.prototype = { constructor:Frame };\r\n\r\n /* This simplifies creation of input keys. */\r\n const Input = function(active, state) {\r\n\r\n this.active = active;\r\n this.state = state;\r\n\r\n };\r\n\r\n Input.prototype = {\r\n\r\n constructor:Input,\r\n\r\n update:function(state) {\r\n\r\n if (this.state != state) this.active = state;\r\n this.state = state;\r\n\r\n }\r\n\r\n };\r\n\r\n //////////////////////\r\n //// GAME CLASSES ////\r\n //////////////////////\r\n\r\n const Door = function(x, y, area, new_x) {\r\n\r\n this.animation = new Animation(display.sprite_sheet.frame_set.door, 5, \"play\");\r\n this.area = area;\r\n this.new_x = new_x;\r\n this.x = x;\r\n this.y = y;\r\n\r\n };\r\n\r\n Door.prototype = {\r\n\r\n constructor:Door,\r\n\r\n };\r\n\r\n ///////////////\r\n //// LOGIC ////\r\n ///////////////\r\n\r\n var controller, display, game;\r\n\r\n controller = {\r\n\r\n down: new Input(false, false), left: new Input(false, false), right:new Input(false, false), up:new Input(false, false),\r\n\r\n keyDownUp:function(event) { event.preventDefault();\r\n\r\n var key_state = (event.type == \"keydown\") ? true : false;\r\n\r\n switch(event.keyCode) {\r\n\r\n case 37: controller.left.update(key_state); break;// left key\r\n case 38: controller.up.update(key_state); break;// up key\r\n case 39: controller.right.update(key_state); break;// right key\r\n case 40: controller.down.update(key_state); break;// down key\r\n\r\n }\r\n\r\n }\r\n\r\n };\r\n\r\n display = {\r\n\r\n buffer:document.createElement(\"canvas\").getContext(\"2d\"),\r\n context:document.querySelector(\"canvas\").getContext(\"2d\"),\r\n height_width_ratio:undefined,\r\n\r\n sprite_sheet: {\r\n\r\n frames:[new Frame( 0, 0, 27, 30), new Frame( 27, 0, 25, 30, 1),\r\n new Frame( 52, 0, 19, 29, -1, 1), new Frame( 71, 0, 19, 30, -1), new Frame(90, 0, 18, 30), new Frame(108, 0, 18, 31, 0, -1),\r\n new Frame(126, 0, 18, 30, 1), new Frame(144, 0, 18, 31, 1, -1), new Frame(162, 0, 19, 29, 2), new Frame(181, 0, 19, 30, 2),\r\n new Frame(200, 0, 32, 32), new Frame(232, 0, 32, 32), new Frame(264, 0, 32, 32), new Frame(296, 0, 32, 32), new Frame(328, 0, 32, 32), new Frame(360, 0, 32, 32), new Frame(392, 0, 32, 32)],\r\n\r\n frame_set: {\r\n\r\n dominique_idle:[0, 1],\r\n dominique_right:[2, 3, 4, 5],\r\n dominique_left:[6, 7, 8, 9],\r\n door:[10, 11, 12, 13, 14, 15, 16]\r\n\r\n },\r\n\r\n image:new Image()\r\n\r\n },\r\n\r\n render:function() {\r\n\r\n var frame;\r\n\r\n /* Draw the background. */\r\n this.buffer.fillStyle = game.area.background_color;\r\n this.buffer.fillRect(0, 0, game.area.width, game.area.height);\r\n\r\n /* Draw the floor. */\r\n this.buffer.fillStyle = \"#373641\";\r\n this.buffer.fillRect(0, game.area.floor - 3, game.area.width, game.area.height - game.area.floor + 3);\r\n\r\n /* Draw the doors. */\r\n for (let index = game.area.doors.length - 1; index > -1; -- index) {\r\n\r\n let door = game.area.doors[index];\r\n frame = this.sprite_sheet.frames[door.animation.frame_value];\r\n\r\n this.buffer.drawImage(this.sprite_sheet.image, frame.x, frame.y, frame.width, frame.height, door.x, door.y, frame.width, frame.height);\r\n\r\n }\r\n\r\n /* Draw Dominique. */\r\n frame = this.sprite_sheet.frames[game.dominique.animation.frame_value];\r\n\r\n this.buffer.drawImage(this.sprite_sheet.image, frame.x, frame.y, frame.width, frame.height, Math.round(game.dominique.x) + frame.offset_x * 0.5 - frame.width * 0.5, Math.round(game.dominique.y) + frame.offset_y * 0.5 - frame.height * 0.5, frame.width, frame.height);\r\n\r\n this.context.drawImage(this.buffer.canvas, 0, 0, game.area.width, game.area.height, 0, 0, this.context.canvas.width, this.context.canvas.height);\r\n\r\n this.context.fillStyle = \"#ffffff\";\r\n this.context.font = \"20px Arial\";\r\n this.context.fillText(game.area.message, 10, 20);\r\n\r\n },\r\n\r\n resize:function(event) {\r\n\r\n display.context.canvas.width = document.documentElement.clientWidth - 16;\r\n\r\n if (display.context.canvas.width > document.documentElement.clientHeight - 16) {\r\n\r\n display.context.canvas.width = document.documentElement.clientHeight - 16;\r\n\r\n }\r\n\r\n display.context.canvas.height = display.context.canvas.width * display.height_width_ratio;\r\n\r\n display.buffer.imageSmoothingEnabled = display.context.imageSmoothingEnabled = false;\r\n\r\n display.render();\r\n\r\n }\r\n\r\n };\r\n\r\n game = {\r\n\r\n area:undefined,\r\n\r\n dominique: {\r\n\r\n animation:new Animation(display.sprite_sheet.frame_set.dominique_idle, 15),\r\n half_height:15,\r\n half_width:10,\r\n jumping:false,\r\n velocity_x:0,\r\n velocity_y:0,\r\n x:100,\r\n y:100,\r\n\r\n collideWorld:function() {\r\n\r\n if (this.x - this.half_width < 0) {\r\n\r\n this.x = this.half_width;\r\n\r\n } else if (this.x + this.half_width > game.area.width) {\r\n\r\n if (game.area.message != \"~The Passageway~\") {\r\n\r\n this.x = game.area.width - this.half_width;\r\n\r\n } else if (this.x - this.half_width > game.area.width) {\r\n\r\n game.engine.stop();\r\n controller.right.active = false;\r\n\r\n game.loadArea(\"area0.json\", function() {\r\n\r\n game.reset();\r\n\r\n });\r\n\r\n alert(\"Dominique escaped the weird program full of pointless rooms and doors. She went to a much better, more interesting program.\");\r\n\r\n }\r\n\r\n }\r\n\r\n if (this.y + this.half_height > game.area.floor) {\r\n\r\n this.jumping = false;\r\n this.velocity_y = 0;\r\n this.y = game.area.floor - this.half_height;\r\n\r\n }\r\n\r\n },\r\n\r\n update:function() {\r\n\r\n this.velocity_y += 0.5;\r\n\r\n this.x += this.velocity_x;\r\n this.y += this.velocity_y;\r\n\r\n this.velocity_x *= 0.9;\r\n this.velocity_y *= 0.9;\r\n\r\n }\r\n\r\n },\r\n\r\n engine: {\r\n\r\n accumulated_time:window.performance.now(),\r\n frame_request:undefined,\r\n time_step:1000/60,\r\n\r\n loop:function(time_stamp) {\r\n\r\n game.engine.frame_request = window.requestAnimationFrame(game.engine.loop);\r\n\r\n if (controller.left.active) {\r\n\r\n game.dominique.animation.change(display.sprite_sheet.frame_set.dominique_left, 15);\r\n game.dominique.velocity_x -= 0.1;\r\n\r\n }\r\n\r\n if (controller.right.active) {\r\n\r\n game.dominique.animation.change(display.sprite_sheet.frame_set.dominique_right, 15);\r\n game.dominique.velocity_x += 0.1;\r\n\r\n }\r\n\r\n if (!controller.left.active && !controller.right.active) {\r\n\r\n game.dominique.animation.change(display.sprite_sheet.frame_set.dominique_idle, 15);\r\n\r\n }\r\n\r\n if (controller.up.active && !game.dominique.jumping) {\r\n\r\n controller.up.active = false;\r\n game.dominique.jumping = true;\r\n game.dominique.velocity_y = -5;\r\n\r\n }\r\n\r\n game.dominique.update();\r\n game.dominique.collideWorld();\r\n\r\n game.dominique.animation.update();\r\n\r\n for (let index = game.area.doors.length - 1; index > -1; -- index) {\r\n\r\n let door = game.area.doors[index];\r\n\r\n if (game.dominique.x > door.x && game.dominique.x < door.x + 32) {\r\n\r\n door.animation.mode = \"play\";\r\n\r\n if (controller.down.active) { controller.down.active = false;\r\n\r\n game.dominique.x = door.new_x + 1;\r\n game.loadArea(door.area, game.reset);\r\n\r\n return;\r\n\r\n }\r\n\r\n } else { door.animation.mode = \"rewind\"; }\r\n\r\n game.area.doors[index].animation.update();\r\n\r\n }\r\n\r\n display.render();\r\n\r\n },\r\n\r\n start:function() {\r\n\r\n this.accumulated_time = window.performance.now();\r\n this.frame_request = window.requestAnimationFrame(this.loop);\r\n\r\n },\r\n\r\n stop:function() {\r\n\r\n window.cancelAnimationFrame(this.frame_request);\r\n\r\n }\r\n\r\n },\r\n\r\n loadArea:function(url, callback) {\r\n\r\n var request, readyStateChange;\r\n\r\n request = new XMLHttpRequest();\r\n\r\n readyStateChange = function(event) {\r\n\r\n if (this.readyState == 4 && this.status == 200) {\r\n\r\n game.area = JSON.parse(this.responseText);\r\n\r\n callback();\r\n\r\n game.engine.start();\r\n\r\n }\r\n\r\n };\r\n\r\n request.addEventListener(\"readystatechange\", readyStateChange);\r\n request.open(\"GET\", url);\r\n request.send(null);\r\n\r\n game.engine.stop();\r\n\r\n },\r\n\r\n reset:function() {\r\n\r\n for (let index = game.area.doors.length - 1; index > -1; -- index) {\r\n\r\n let door = game.area.doors[index];\r\n\r\n game.area.doors[index] = new Door(door.x, game.area.floor - 32 - 3, door.area, door.new_x);\r\n\r\n }\r\n\r\n game.dominique.y = game.area.floor - game.dominique.half_height;\r\n game.dominique.velocity_x = 0;\r\n\r\n display.buffer.canvas.height = game.area.height;\r\n display.buffer.canvas.width = game.area.width;\r\n display.height_width_ratio = game.area.height / game.area.width;\r\n display.resize();\r\n\r\n }\r\n\r\n };\r\n\r\n ////////////////////\r\n //// INITIALIZE ////\r\n ////////////////////\r\n\r\n display.sprite_sheet.image.addEventListener(\"load\", function(event) {\r\n\r\n game.loadArea(\"area0.json\", function() {\r\n\r\n game.reset();\r\n\r\n });\r\n\r\n });\r\n\r\n display.sprite_sheet.image.src = \"dominiques-doors.png\";\r\n\r\n window.addEventListener(\"resize\", display.resize);\r\n\r\n window.addEventListener(\"keydown\", controller.keyDownUp);\r\n window.addEventListener(\"keyup\", controller.keyDownUp);\r\n\r\n})();\r\n"
},
{
"path": "content/elements/elements.html",
"content": "\r\n\r\n\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n
\r\n\r\n \r\n\r\n \r\n\r\n\r\n"
},
{
"path": "content/hit-the-wall/hit-the-wall.css",
"content": "/* Frank Poth 11/16/2017 */\r\n\r\n* {\r\n\r\n box-sizing:border-box;\r\n margin:0;\r\n padding:0;\r\n\r\n}\r\n\r\nhtml {\r\n\r\n height:100%;\r\n width:100%;\r\n\r\n}\r\n\r\nbody {\r\n\r\n align-content:space-around;\r\n background-color:#202830;\r\n color:#ffffff;\r\n display:grid;\r\n grid-template-columns:auto;\r\n grid-template-rows:auto auto auto auto;\r\n height:100%;\r\n justify-content:space-around;\r\n text-align:center;\r\n width:100%;\r\n\r\n}\r\n\r\ncanvas {\r\n\r\n background-color:#303840;\r\n justify-self:center;\r\n\r\n}\r\n"
},
{
"path": "content/hit-the-wall/hit-the-wall.html",
"content": "\r\n\r\n\r\n\r\n \r\n\r\n \r\n \r\n \r\n\r\n PoP Vlog - Hit The Wall\r\n\r\n \r\n\r\n \r\n\r\n
PoP Vlog - Hit The Wall
\r\n\r\n
\r\n\r\n \r\n\r\n
This example requires a keyboard.
\r\n\r\n \r\n\r\n \r\n\r\n\r\n"
},
{
"path": "content/hit-the-wall/hit-the-wall.js",
"content": "// Frank Poth 11/16/2017\r\n\r\n(function() { \"use strict\"\r\n\r\n // the three main components of the example\r\n var controller, display, game;\r\n\r\n // a basic controller object that handles key input\r\n controller = {\r\n\r\n left:false,\r\n right:false,\r\n up:false,\r\n\r\n keyUpDown:function(event) {\r\n\r\n var key_state = (event.type == \"keydown\")?true:false;\r\n\r\n switch(event.keyCode) {\r\n\r\n case 37: controller.left = key_state; break; // left key\r\n case 38: controller.up = key_state; break; // up key\r\n case 39: controller.right = key_state; break; // right key\r\n\r\n }\r\n\r\n }\r\n\r\n };\r\n\r\n // draws everything and handles html elements\r\n display = {\r\n\r\n buffer:document.createElement(\"canvas\").getContext(\"2d\"),\r\n context:document.querySelector(\"canvas\").getContext(\"2d\"),\r\n output:document.querySelector(\"p\"),\r\n\r\n render:function() {\r\n\r\n for (let index = game.world.map.length - 1; index > -1; -- index) {\r\n\r\n this.buffer.fillStyle = (game.world.map[index] > 0)?(\"#0099\" + game.world.map[index] + \"f\"):\"#303840\";\r\n this.buffer.fillRect((index % game.world.columns) * game.world.tile_size, Math.floor(index / game.world.columns) * game.world.tile_size, game.world.tile_size, game.world.tile_size);\r\n\r\n }\r\n\r\n this.buffer.fillStyle = game.player.color;\r\n this.buffer.fillRect(game.player.x, game.player.y, game.player.width, game.player.height);\r\n\r\n this.context.drawImage(this.buffer.canvas, 0, 0, this.buffer.canvas.width, this.buffer.canvas.height, 0, 0, this.context.canvas.width, this.context.canvas.height);\r\n\r\n },\r\n\r\n resize:function(event) {\r\n\r\n var client_height = document.documentElement.clientHeight;\r\n\r\n display.context.canvas.width = document.documentElement.clientWidth - 32;\r\n\r\n if (display.context.canvas.width > client_height) {\r\n\r\n display.context.canvas.width = client_height;\r\n\r\n }\r\n\r\n display.context.canvas.height = Math.floor(display.context.canvas.width * 0.625);\r\n\r\n display.render();\r\n\r\n }\r\n\r\n };\r\n\r\n // here's where things get interesting\r\n // the game object holds all of our awesome game logic\r\n game = {\r\n\r\n // there's something different about the player object, and its old_x and\r\n // old_y. these variables keep track of the last position the player occupied\r\n player: {\r\n\r\n color:\"#ff9900\",\r\n height:32,\r\n jumping:false,\r\n old_x:160,// used for tracking last position for collision detection\r\n old_y:160,\r\n velocity_x:0,\r\n velocity_y:0,\r\n width:24,\r\n x:160,\r\n y:90\r\n\r\n },\r\n\r\n // the world object holds information about our tile map\r\n world: {\r\n\r\n columns:8,// just some basic info. no worries\r\n rows:5,\r\n tile_size:40,\r\n\r\n map:[0,0,0,0,0,0,0,0,// I went with a smaller map this time\r\n 0,0,0,0,0,0,0,0,// 0s represent walkable tiles and everything else\r\n 1,0,0,0,0,0,0,2,// represents a collision tile or wall tile\r\n 3,0,0,4,0,0,2,5,// the different numbers correspond to different\r\n 5,5,5,5,5,5,5,5]// collision shapes.\r\n\r\n },\r\n\r\n // the collision object is used to handle narrow phase collision detection\r\n // and response. Broad phase collision detection is just determining if the\r\n // player is standing on a non 0 tile in the map, narrow phase is handled\r\n // here, where the player's exact position is tested against the specific\r\n // collision boundaries of each type of tile. In this example there are 5\r\n // types of collision tile\r\n collision: {\r\n\r\n // the reason these functions are indexed with numbers is because they\r\n // correspond directly to tile values in the map array. For instance, this\r\n // function handles collision for any tile in the map with a value of 1\r\n // it handles collision detection and response on the specified player object\r\n // at the specified row and column in the tile map. the 1 tile collision\r\n // shape has a flat top and a flat right side, so only test for collision\r\n // and do response on those sides.\r\n 1:function(object, row, column) {\r\n\r\n /* Basically these indexed functions are like routing functions. They\r\n make it easy to connect a collision shape with a value in the tile map.\r\n The real collision code happens in these inner functions. The great thing\r\n about this approach is that it's extremely modular, so you can mix and\r\n match collision functions and easily introduce new ones. */\r\n\r\n /* Depending on whether you want to do y or x first collision is as simple\r\n as calling the collision function for a specific axis before the other.\r\n In a platformer where players are always falling down due to gravity, it's\r\n a good idea to do y collision detection first. */\r\n\r\n if (this.topCollision(object, row)) { return; }// if no top collision\r\n this.rightCollision(object, column); // try right side collision\r\n\r\n },\r\n\r\n // the 2 tile type has a top and a left side to collide with\r\n 2:function(object, row, column) {\r\n\r\n if (this.topCollision(object, row)) { return; }\r\n this.leftCollision(object, column);\r\n\r\n },\r\n\r\n // the 3 tile type only blocks movement through the right side\r\n 3:function(object, row, column) {\r\n\r\n this.rightCollision(object, column);\r\n\r\n },\r\n\r\n // the 4 tile type has collision on all sides but the bottom\r\n 4:function(object, row, column) {\r\n\r\n if (this.topCollision(object, row)) { return; }// you only want to do one\r\n if (this.leftCollision(object, column)) { return; }// of these collision\r\n this.rightCollision(object, column);// responses. that's why there are if statements\r\n\r\n },\r\n\r\n // the 5 tile only does collision if the object falls through the top\r\n 5:function(object, row, column) {\r\n\r\n this.topCollision(object, row);\r\n\r\n },\r\n\r\n /* Here are the actual collision detection and response functions. The concept\r\n I am working off of with this example is that all tiles have 4 sides. Rather\r\n than doing collision for all of them in the same function, I want to mix and\r\n match collision methods for each side. By doing it this way I can create all\r\n sorts of collision shapes and resuse my side specific collision code. This\r\n works extremely well, and the only downside is having to be more specific\r\n when you lay out your level maps because each tile has a specific purpose.\r\n For example, a floor tile only tests for collision on its top side and a wall\r\n tile will only test for collision on the left and/or right side. It is a small\r\n price to pay for awesome and smooth collision detection with basically no restriction on\r\n tile based collision shapes. You can have tiles where one side is a slope and the\r\n other is a curve or a flat side, for instance. That's pretty sweet. */\r\n\r\n /* This function handles collision with a rightward moving object. Another\r\n design requirement to use this method is that objects must have a record of\r\n their current and last physical position. A collision can only occur when a\r\n player enters into a collision shape through its boundary. It's foolproof so\r\n long as you always spawn your players on empty tiles and not in the walls. */\r\n leftCollision(object, column) {\r\n\r\n if (object.velocity_x > 0) {// If the object is moving right\r\n\r\n var left = column * game.world.tile_size;// calculate the left side of the collision tile\r\n\r\n if (object.x + object.width * 0.5 > left && object.old_x <= left) {// If the object was to the right of the collision object, but now is to the left of it\r\n\r\n object.velocity_x = 0;// Stop moving\r\n object.x = object.old_x = left - object.width * 0.5 - 0.001;// place object outside of collision\r\n // the 0.001 is just to ensure that the object is no longer in the same tile space as the collision tile\r\n // due to the way object tile position is calculated, moving the object to the exact boundary of the collision tile\r\n // would not move it out if its tile space, meaning that another collision with an adjacent tile might not be detected in another broad phase check\r\n\r\n return true;\r\n\r\n }\r\n\r\n }\r\n\r\n return false;\r\n\r\n },\r\n\r\n // these are all basically the same concept as the leftCollision function,\r\n // only for the different sides.\r\n\r\n rightCollision(object, column) {\r\n\r\n if (object.velocity_x < 0) {\r\n\r\n var right = (column + 1) * game.world.tile_size;\r\n\r\n if (object.x + object.width * 0.5 < right && object.old_x + object.width * 0.5 >= right) {\r\n\r\n object.velocity_x = 0;\r\n object.old_x = object.x = right - object.width * 0.5;\r\n\r\n return true;\r\n\r\n }\r\n\r\n }\r\n\r\n return false;\r\n\r\n },\r\n\r\n topCollision(object, row) {\r\n\r\n if (object.velocity_y > 0) {\r\n\r\n var top = row * game.world.tile_size;\r\n\r\n if (object.y + object.height > top && object.old_y + object.height <= top) {\r\n\r\n object.jumping = false;\r\n object.velocity_y = 0;\r\n object.old_y = object.y = top - object.height - 0.01;\r\n\r\n return true;\r\n\r\n }\r\n\r\n }\r\n\r\n return false;\r\n\r\n }\r\n\r\n },\r\n\r\n // Here's the game loop, where it all goes down!!!\r\n loop:function() {\r\n\r\n // get and use keyboard input\r\n if (controller.left) {\r\n\r\n game.player.velocity_x -= 0.25;\r\n\r\n }\r\n\r\n if (controller.right) {\r\n\r\n game.player.velocity_x += 0.25;\r\n\r\n }\r\n\r\n if (controller.up && !game.player.jumping) {\r\n\r\n game.player.velocity_y = -16;\r\n game.player.jumping = true;\r\n\r\n }\r\n\r\n game.player.velocity_y += 1; // add gravity\r\n\r\n game.player.old_x = game.player.x;// store the last position of the player\r\n game.player.old_y = game.player.y;// before we move it on this cycle\r\n\r\n game.player.x += game.player.velocity_x;// move the player's current position\r\n game.player.y += game.player.velocity_y;\r\n\r\n // do collision detection with the level boundaries so the player can't leave\r\n // the screen. Nothing you haven't seen before...\r\n if (game.player.x < 0) {\r\n\r\n game.player.velocity_x = 0;\r\n game.player.old_x = game.player.x = 0;\r\n\r\n } else if (game.player.x + game.player.width > display.buffer.canvas.width) {\r\n\r\n game.player.velocity_x = 0;\r\n game.player.old_x = game.player.x = display.buffer.canvas.width - game.player.width;\r\n\r\n }\r\n\r\n if (game.player.y < 0) {\r\n\r\n game.player.velocity_y = 0;\r\n game.player.old_y = game.player.y = 0;\r\n\r\n } else if (game.player.y + game.player.height > display.buffer.canvas.height) {\r\n\r\n game.player.velocity_y = 0;\r\n game.player.old_y = game.player.y = display.buffer.canvas.height - game.player.height;\r\n\r\n }\r\n\r\n // NOW FOR SOME GOOD STUFF!!! Here we do broadphase collision detection by checking\r\n // which tile value the player is standing on. If it is anything but 0 we have a possible collision.\r\n\r\n // calculate the player's x and y tile position in the tile map\r\n var tile_x = Math.floor((game.player.x + game.player.width * 0.5) / game.world.tile_size);\r\n var tile_y = Math.floor((game.player.y + game.player.height) / game.world.tile_size);\r\n // get the value at the tile position in the map\r\n var value_at_index = game.world.map[tile_y * game.world.columns + tile_x];\r\n\r\n // do some output so we can see it all in action\r\n display.output.innerHTML = \"tile_x: \" + tile_x + \" tile_y: \" + tile_y + \" map index: \" + tile_y + \" * \" + game.world.columns + \" + \" + tile_x + \" = \" + String(tile_y * game.world.columns + tile_x) + \" tile value: \" + game.world.map[tile_y * game.world.columns + tile_x];\r\n\r\n // if it's not an empty tile, we need to do narrow phase collision detection and possibly response!\r\n if (value_at_index != 0) {\r\n\r\n // simply call one of the routing functions in the collision object and pass\r\n // in values for the collision tile's location in grid/map space\r\n game.collision[value_at_index](game.player, tile_y, tile_x);\r\n\r\n }\r\n\r\n // This might be confusing at first, but we actually have to do this twice, since\r\n // we are using a player object with a single point of contact, which is its bottom middle.\r\n // say we handled a collision with the floor in the check above and now the player object is\r\n // moved up above that tile. There's still a posibility that the player was moved into\r\n // an adjacent wall tile! We need to recalculate the new tile space the player is in\r\n // and then check to see if there is another collision. Don't worry, we only need\r\n // to do this twice. Once for the x axis, and one for the y axis. With this\r\n // collision method they could happen in either order, but they will both be handled.\r\n\r\n tile_x = Math.floor((game.player.x + game.player.width * 0.5) / game.world.tile_size);\r\n tile_y = Math.floor((game.player.y + game.player.height) / game.world.tile_size);\r\n value_at_index = game.world.map[tile_y * game.world.columns + tile_x];\r\n\r\n if (value_at_index != 0) {\r\n\r\n game.collision[value_at_index](game.player, tile_y, tile_x);\r\n\r\n } // and that's it! You checked twice and resolved any collisions with the map!\r\n\r\n game.player.velocity_x *= 0.9;// apply some friction to the player's velocity\r\n game.player.velocity_y *= 0.9;// the reason we do this after the collision code\r\n // is because we use the players velocity in the collision code and don't want to change it before now.\r\n // it probably doesn't matter, though. You could also calculate the velocity for collision by\r\n // subtracting the players last position from its current position, that never fails.\r\n\r\n display.render();\r\n\r\n window.requestAnimationFrame(game.loop);\r\n\r\n }\r\n\r\n };\r\n\r\n // basic setup and initialization\r\n display.buffer.canvas.height = 200;\r\n display.buffer.canvas.width = 320;\r\n\r\n window.addEventListener(\"resize\", display.resize);\r\n window.addEventListener(\"keydown\", controller.keyUpDown);\r\n window.addEventListener(\"keyup\", controller.keyUpDown);\r\n\r\n display.resize();\r\n\r\n game.loop();\r\n\r\n})();\r\n"
},
{
"path": "content/hitbox/hitbox.html",
"content": "\r\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Hitbox\r\n \r\n \r\n \r\n \r\n\r\n freeze\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n"
},
{
"path": "content/https-server/index.css",
"content": "/* Frank Poth 10/16/2017 */\r\n\r\n* {\r\n\r\n box-sizing:border-box;\r\n margin:0;\r\n padding:0;\r\n\r\n}\r\n\r\nhtml {\r\n\r\n height:100%;\r\n width:100%;\r\n\r\n}\r\n\r\nbody {\r\n\r\n align-content:center;\r\n background-color:#202830;\r\n color:#ffffff;\r\n display:grid;\r\n height:100%;\r\n justify-content:space-around;\r\n text-align:center;\r\n width:100%;\r\n\r\n}\r\n"
},
{
"path": "content/https-server/index.html",
"content": "\r\n\r\n\r\n\r\n \r\n\r\n HTTPS Server!\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n
PoP Vlog - HTTPS Server!
\r\n \r\n
Is there a green https indicator in your address bar? If so, this page was served over a secure server using a valid and up to date certificate chain!
\r\n\r\n \r\n\r\n\r\n"
},
{
"path": "content/https-server/server.js",
"content": "// Frank Poth 10/16/2017\r\n\r\n(function() {\r\n\r\n var fs, https, mimetypes, options, path, server;\r\n\r\n fs = require(\"fs\"); // file system\r\n https = require(\"https\"); // creates an https server\r\n path = require(\"path\"); // used for working with url paths\r\n\r\n // used to create response headers\r\n /* If the user requests a .css file, we want to ensure we attach \"text/css\" to\r\n our response header, this way the browser knows how to handle it. */\r\n mimetypes = {\r\n\r\n \"css\":\"text/css\",\r\n \"html\":\"text/html\",\r\n \"ico\":\"image/ico\",\r\n \"jpg\":\"image/jpeg\",\r\n \"js\":\"text/javascript\",\r\n \"json\":\"application/json\",\r\n \"png\":\"image/png\"\r\n\r\n };\r\n\r\n options = {\r\n\r\n pfx: fs.readFileSync(\"ssl/crt.pfx\"),\r\n passphrase: \"password\"\r\n\r\n };\r\n\r\n // Start a secure server that uses the credentials in ssl/crt.pfx\r\n server = https.createServer(options, function(request, response) {\r\n\r\n /* When requesting the homepage of a website, we usually only type\r\n www.mysite.com, but the server returns www.mysite.com/index.html. To make\r\n it easier for users to access our site, we add \"/index.html\" to their url\r\n so the user doesn't have to type out the whole address of our home page. */\r\n\r\n // If the url is empty\r\n if (request.url == \"\" || request.url == \"/\") {\r\n\r\n // The user is requesting the home page of the website, so give it to them\r\n request.url = \"index.html\";\r\n\r\n }\r\n\r\n // Next we read the file at the requested url and write it to the document.\r\n /* __dirname is just the base directory of your website, so if your website\r\n is www.coolsite.com, then __dirname is www.coolsite.com. When you put it all\r\n together it looks like www.coolsite.com/index.html or whatever the requested\r\n url is */\r\n fs.readFile(__dirname + \"/\" + request.url, function(error, content) {\r\n\r\n if (error) { // if there is an error reading the requested url\r\n\r\n console.log(\"Error: \" + error); // output it to the console\r\n\r\n } else { // else, there is no error, write the file contents to the page\r\n\r\n // 200 is code for OK, and the second parameter is our content header\r\n response.writeHead(200, {'Content-Type':mimetypes[path.extname(request.url).split(\".\")[1]]});\r\n response.write(content); // write that content to our response object\r\n\r\n }\r\n\r\n response.end(); // This will send our response object to the browser\r\n\r\n });\r\n\r\n });\r\n\r\n server.listen(\"2468\", \"192.168.0.101\", function() {\r\n\r\n console.log(\"Server started!\");\r\n\r\n }); // listen on 192.168.0.101:2468\r\n\r\n})();\r\n"
},
{
"path": "content/https-server/ssl/crt.cnf",
"content": "[req]\r\ndays = 180\r\nserial = 1\r\ndistinguished_name = req_distinguished_name\r\nx509_extensions = v3_ca\r\n\r\n[req_distinguished_name]\r\ncountryName = Country\r\nstateOrProvinceName = State\r\nlocalityName = Locality\r\norganizationName = Organizational Name\r\norganizationalUnitName = Organizational Unit Name\r\ncommonName = Common Name (Domain Name)\r\nemailAddress = Email Address\r\n\r\n\r\n[ v3_ca ]\r\n# The extentions to add to a self-signed cert\r\nsubjectKeyIdentifier = hash\r\nauthorityKeyIdentifier = keyid:always,issuer:always\r\n\r\n# THIS IS VERY IMPORTANT IF YOU WANT TO USE THIS CERTIFICATION AS AN AUTHORITY!!!\r\nbasicConstraints = CA:TRUE\r\n\r\nkeyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment, keyAgreement, keyCertSign\r\nsubjectAltName = DNS:192.168.0.101, IP:192.168.0.101\r\nissuerAltName = issuer:copy\r\n"
},
{
"path": "content/https-server/ssl/csr.cnf",
"content": "[req]\r\n\r\ndays = 180\r\ndistinguished_name = req_distinguished_name\r\nreq_extensions = v3_req\r\n\r\n[req_distinguished_name]\r\n\r\ncountryName = Country\r\nstateOrProvinceName = State\r\nlocalityName = Locality\r\norganizationName = Organizational Name\r\norganizationalUnitName = Organizational Unit Name\r\ncommonName = Common Name (Domain Name)\r\nemailAddress = Email Address\r\n\r\n[ v3_req ]\r\n\r\n# Extensions to add to a certificate request\r\nbasicConstraints = CA:FALSE\r\nkeyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment, keyAgreement, keyCertSign\r\n"
},
{
"path": "content/https-server/ssl/make-crt.sh",
"content": "#!/bin/bash\r\n \r\necho \"\"\r\necho \"Generate a self signed certificate:\"\r\necho \"Enter certificate name (example: crt.crt):\"\r\nread crt_path\r\necho \"Enter path to certificate configuration file (example: crt.cnf):\"\r\nread cnf_path\r\necho \"Enter path to private key file (example: key.key):\"\r\nread key_path\r\necho \"Enter path to CSR file (example: csr.csr):\"\r\nread csr_path\r\necho \"Enter number of days until expiration (example: 365):\"\r\nread days\r\necho \"\"\r\n\r\n# certificate extensions must be stored in the v3_ca section in the configuration file\r\nif openssl x509 -req -days $days -in $csr_path -signkey $key_path -out $crt_path -extfile $cnf_path -extensions v3_ca\r\nthen\r\n\r\n echo \"\"\r\n echo \"Created \"$crt_path\" in \"$PWD\"/\"$crt_path\r\n\r\nelse\r\n\r\n echo \"\"\r\n echo \"Could not generate certificate due to error!\"\r\n\r\nfi\r\n\r\necho \"\"\r\n"
},
{
"path": "content/https-server/ssl/make-csr.sh",
"content": "#!/bin/bash\r\n \r\necho \"\"\r\necho \"Generate a Certificate Signing Request (CSR) file:\"\r\necho \"Enter CSR name (example: csr.csr):\"\r\nread csr_path\r\necho \"Enter path to CSR configuration file (example: csr.cnf):\"\r\nread cnf_path\r\necho \"Enter path to private key file (example: key.key):\"\r\nread key_path\r\necho \"\"\r\n\r\nif openssl req -config $cnf_path -new -key $key_path -inform PEM -out $csr_path -outform PEM\r\nthen\r\n\r\n echo \"\"\r\n echo \"Created \"$csr_path\" in \"$PWD\"/\"$csr_path\r\n\r\nelse\r\n\r\n echo \"\"\r\n echo \"Could not generate CSR due to error!\"\r\n\r\nfi\r\n\r\necho \"\"\r\n"
},
{
"path": "content/https-server/ssl/make-key.sh",
"content": "#!/bin/bash\r\n \r\necho \"\"\r\necho \"Generate a private Key file in PEM format:\"\r\necho \"Enter key name (example: key.key):\"\r\nread key_path\r\necho \"\"\r\n\r\nif openssl genpkey -algorithm RSA -out $key_path -outform PEM -pkeyopt rsa_keygen_bits:4096\r\nthen\r\n\r\n echo \"\"\r\n echo \"Created \"$key_path\" in \"$PWD\"/\"$key_path\r\n\r\nelse\r\n\r\n echo \"\"\r\n echo \"Could not create \"$key_path\" due to error!\"\r\n\r\nfi\r\n\r\necho \"\"\r\n"
},
{
"path": "content/https-server/ssl/make-pfx.sh",
"content": "#!/bin/bash\r\n\r\necho \"\"\r\necho \"Generate a Public Key Cryptography Standards # 12 ( PKCS#12 ) file:\"\r\necho \"Enter certificate name (example: crt.pfx):\"\r\nread pfx_path\r\necho \"Enter path to private key file (example: key.key):\"\r\nread key_path\r\necho \"Enter path to certificate file (example: crt.crt):\"\r\nread crt_path\r\necho \"\"\r\n\r\nif openssl pkcs12 -export -out $pfx_path -inkey $key_path -in $crt_path\r\nthen\r\n\r\n echo \"\"\r\n echo \"Created \"$pfx_path\" in \"$PWD\"/\"$pfx_path\r\n\r\nelse\r\n\r\n echo \"\"\r\n echo \"Could not create \"$pfx_path\" due to error!\"\r\n\r\nfi\r\n\r\necho \"\"\r\n"
},
{
"path": "content/indexed-db/index.css",
"content": "/* Frank Poth 11/08/2017 */\r\n\r\n* {\r\n\r\n box-sizing:border-box;\r\n margin:0;\r\n padding:0;\r\n\r\n}\r\n\r\nhtml {\r\n\r\n height:100%;\r\n width:100%;\r\n\r\n}\r\n\r\nbody {\r\n\r\n align-content:space-around;\r\n background-color:#ffffff;\r\n color:#ffffff;\r\n display:grid;\r\n justify-content:space-around;\r\n justify-items:space-around;\r\n min-height:100%;\r\n padding:8px;\r\n text-align:center;\r\n width:100%;\r\n\r\n}\r\n\r\n#button-container {\r\n\r\n align-content:space-around;\r\n display:grid;\r\n grid-template-columns:auto auto auto auto;\r\n grid-template-rows:auto;\r\n justify-content:space-around;\r\n padding:16px 0;\r\n width:100%;\r\n\r\n}\r\n\r\na {\r\n\r\n align-content:center;\r\n border-color:#c3daed;\r\n border-radius:8px;\r\n border-style:solid;\r\n border-width:2px;\r\n cursor:pointer;\r\n display:grid;\r\n font-size:1.5em;\r\n font-weight:800;\r\n height:64px;\r\n justify-content:center;\r\n user-select:none;\r\n width:64px;\r\n\r\n}\r\n\r\np {\r\n\r\n justify-self:center;\r\n font-size:1.1em;\r\n max-width:320px;\r\n text-align:justify;\r\n\r\n}\r\n\r\nspan {\r\n\r\n font-weight:800;\r\n font-size:1.1em;\r\n\r\n}\r\n"
},
{
"path": "content/indexed-db/index.html",
"content": "\r\n\r\n\r\n\r\n\r\n\r\n \r\n\r\n \r\n Indexed DB Test\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n
PoP Vlog Indexed DB
\r\n\r\n
Welcome to the example! Click on a button to change the background color, and Indexed DB will save your color choice to your browser cache. When you refresh the page, you will be greeted by the color you chose!
This example also keeps track of the number of button presses, which is 0, and the last time you visited the page, which was .
\r\n\r\n \r\n\r\n \r\n\r\n\r\n"
},
{
"path": "content/inheritance/inheritance.html",
"content": "\r\n\r\n\r\n\r\n \r\n\r\n \r\n\r\n Inheritance\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n\r\n"
},
{
"path": "content/inheritance/inheritance.js",
"content": "// Frank Poth 08/02/2017\r\n\r\nfunction Human(name) {\r\n\r\n this.name = name;\r\n\r\n}\r\n\r\nfunction Worker(name, job) {\r\n\r\n Human.call(this, name);\r\n\r\n this.job = job;\r\n\r\n}\r\n\r\n\r\nvar human = new Human(\"Tim\");\r\nvar worker = new Worker(\"John\", \"desk jockey\");\r\n\r\n\r\nconsole.log(human.name);\r\nconsole.log(worker.name + \", \" + worker.job);\r\n"
},
{
"path": "content/inventory/inventory.html",
"content": "\r\n\r\n\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n Inventory\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n\r\n"
},
{
"path": "content/ipo/components/input.js",
"content": "// Frank Poth 03/06/2018\r\n\r\n/* The input class handles everything to do with user input. */\r\n\r\nconst Input = function(update) {\r\n\r\n this.handleClick = function(event) {\r\n\r\n update();\r\n\r\n };\r\n\r\n};\r\n\r\nInput.prototype = {\r\n\r\n constructor:Input\r\n\r\n};\r\n"
},
{
"path": "content/ipo/components/main.js",
"content": "// Frank Poth 03/07/2018\r\n\r\n/* This is the main file where all of the different components of the application\r\ncome together. Since this application is extremely simple, using MVC or IPO is probably\r\nunnecessary. There are many ways to implement this approach, and MVC gets a bit\r\nmore involved than simply separating an application into three parts, but at the\r\ncore of the concept is organization, so if you are organizing your application even\r\nloosely into the three basic components, you are utilizing MVC */\r\n\r\n(function() {\r\n\r\n function update() {\r\n\r\n output.renderColor(processor.getRandomColor());\r\n\r\n }\r\n\r\n var input = new Input(update);\r\n var processor = new Processor();\r\n var output = new Output(document.body);\r\n\r\n window.addEventListener(\"click\", input.handleClick);\r\n\r\n})();\r\n"
},
{
"path": "content/ipo/components/output.js",
"content": "// Frank Poth 03/06/2018\r\n\r\n/* The output class handles everything to do with displaying graphics. */\r\n\r\nconst Output = function(element) {\r\n\r\n this.element = element;\r\n\r\n this.renderColor = function(color) {\r\n\r\n this.element.style.backgroundColor = color;\r\n\r\n }\r\n\r\n};\r\n\r\nOutput.prototype = {\r\n\r\n constructor:Output\r\n\r\n};\r\n"
},
{
"path": "content/ipo/components/processor.js",
"content": "// Frank Poth 03/06/2018\r\n\r\n/* The processor class handles the application logic. */\r\n\r\nconst Processor = function() {\r\n\r\n this.getRandomColor = function() {\r\n\r\n return \"#\" + Math.floor(Math.random() * 16777215).toString(16);\r\n\r\n }\r\n\r\n};\r\n\r\nProcessor.prototype = {\r\n\r\n constructor:Processor,\r\n\r\n};\r\n"
},
{
"path": "content/ipo/ipo.html",
"content": "\r\n\r\n\r\n\r\n \r\n\r\n \r\n\r\n IPO\r\n\r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n\r\n
PoP Vlog - IPO
Input/Processing/Output
\r\n\r\n
Click the screen to change the background color!
IPO stands for Input/Processing/Output. IPO is a programming concept and organization technique much like MVC or Model/View/Controller. The concept is that most computer applications can be broken down into three basic components: taking user INPUT, PROCESSING that input, and OUTPUTing the final result. By separating the three components of a program, you can achieve more modular, maintainable code. Taking an Object Oriented approach to separating the components yields three classes that interact with each other via their public methods. Each class is totally self contained and has no internal references to any other components. It is modular because classes can be easily reused or replaced, and it is more maintainable because classes can be edited individually without disturbing other classes.
\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n\r\n"
},
{
"path": "content/json/json.js",
"content": "// Frank Poth 01/14/2017\r\n\r\n/* This program simply loads a json file and gets the data out of it. */\r\n(function() { \"use strict\";\r\n\r\n var load, p;// The load function loads our json file.\r\n\r\n p = document.querySelector(\"p\");// The output p element.\r\n\r\n load = function(url) {// Loads the file at the specified url.\r\n\r\n var request;\r\n\r\n request = new XMLHttpRequest();// We use an XMLHttpRequest to load the file.\r\n\r\n /* This event listener will call the specified function when the file at the\r\n specified url is loaded. */\r\n request.addEventListener(\"readystatechange\", function(event) {\r\n\r\n if (this.readyState == 4 && this.status == 200) {\r\n\r\n // We parse the plain text response into a JavaScript object. */\r\n var json = JSON.parse(this.responseText);\r\n\r\n p.innerHTML = this.responseText;\r\n\r\n // Now we can use the json object just like a regular JavaScript Object.\r\n p.innerHTML += \"
This example simply loads images in three different ways. The first image is loaded by the DOM. The second image is loaded by setting its src attribute. Finally, the third image is loaded with an XMLHttpRequest.
\r\n\r\n \r\n\r\n \r\n\r\n\r\n"
},
{
"path": "content/load-image/load-image.js",
"content": "// Frank Poth 12/22/2017\r\n\r\n(function() { \"use strict\";\r\n\r\n /* load0 is the simplest way to get an image, but it's lazy and may not work.\r\n load1 is an easy way to load an image, but it won't give you load progress events.\r\n load2 is the most complex way to load an image, but it WILL give you load progress events. */\r\n var buffer, display, images, load0, load1, load2, render, resize;\r\n\r\n /* I use a buffer and a display canvas for easy scaling of the final image. */\r\n buffer = document.createElement(\"canvas\").getContext(\"2d\");\r\n display = document.querySelector(\"canvas\").getContext(\"2d\");\r\n images = new Array();// This will hold our loaded images.\r\n\r\n /* This isn't really even loading an image. The Document loads the image when\r\n it parses the tag in the HTML, then all we have to do in Javascript is get\r\n a reference to that image. A problem with this method is that if the image loads\r\n asynchronously, the script may execute before it finishes loading, meaning the\r\n image you get will have a width and height of 0, which isn't very useful. This\r\n method is really lazy, and probably shouldn't be used unless you know the image\r\n has finished loading. */\r\n load0 = function() {\r\n\r\n images[0] = document.querySelector(\"img\");// There's only 1 img tag, so I use querySelector.\r\n\r\n render();// Calling render draws the image\r\n\r\n };\r\n\r\n /* This is probably the most common method. It's simple and easy, and most importantly,\r\n it works. Using a load event listener prevents you from getting progress reports, but\r\n for a small web game this probably doesn't matter much unless you're really into\r\n accurate loading screens. */\r\n load1 = function() {\r\n\r\n let image = new Image();// First we must create a new Image object.\r\n\r\n /* We have to store the image and draw it whenever it loads, so let's make\r\n an event handler for the load event. */\r\n image.addEventListener(\"load\", function(event) {\r\n\r\n /* When the image loads, we store it in the images array and draw it. */\r\n images[1] = this;\r\n render();\r\n\r\n });\r\n\r\n /* Setting the image's src will initiate loading, and eventually a load eventually\r\n will fire and we can have access to our image. */\r\n image.src = \"gelly.png\";// jelly or gelly? Hair gel... jelly sandwich... Huh.\r\n\r\n };\r\n\r\n /* This is the most complicated method, but has its benefits, like being able\r\n to track load progress, and feeling cool for using XMLHttpRequest instead of\r\n setting src. For some reason it just feels more like real loading. */\r\n load2 = function() {\r\n\r\n var request = new XMLHttpRequest();// Define your request.\r\n var image = new Image();// Make a new empty image.\r\n\r\n /* Now we make an event handler to do something with the array buffer we're\r\n going to load. */\r\n request.addEventListener(\"load\", function(event) {\r\n\r\n /* First we convert our array buffer response to a Uint8Array. */\r\n var bytes = new Uint8Array(this.response);\r\n //alert(bytes);// You can actually see the width and height in this one.\r\n /* Now we convert that numeric byte array to a string using fromCharCode. */\r\n var string = String.fromCharCode.apply(null, bytes);\r\n //alert(string);\r\n /* Now we convert the string to a base64 string. */\r\n var base64 = btoa(string);// Encode string\r\n //alert(base64);\r\n /* Finally we add the header to the base64 string to use with our png image. */\r\n var data_url = \"data:image/png;base64,\" + base64;\r\n //prompt(\"Copy data url?\", data_url);\r\n /* Now we can set the src value directly. Setting it this way doesn't load anything,\r\n and you have access to the useable image directly after setting src. */\r\n /* 04/06/2018 looking back on this, it's not true. In fact, setting the src is\r\n not synchronous even if you set it directly to a data_url. There may be a load\r\n time which will cause any immediate requests for the image's data to fail because\r\n the image has technically not loaded. */\r\n image.src = data_url;\r\n //alert(image.width);\r\n\r\n images[2] = image;\r\n\r\n render();\r\n\r\n });\r\n\r\n /* You can track the progress of the load with this event listener, but for a\r\n 16x16 image, this doesn't even have a chance to do anything. */\r\n request.addEventListener(\"progress\", function(event) {\r\n\r\n if (event.lengthComputable) {\r\n\r\n console.log(\"loaded so far: \" + event.loaded + \" of \" + event.total);\r\n\r\n }\r\n\r\n });\r\n\r\n request.open(\"GET\", \"human.png\");\r\n request.responseType = \"arraybuffer\";// You must specify arraybuffer type!\r\n request.send(null);\r\n\r\n };\r\n\r\n /* This renders the loaded images to the buffer and then to the display canvas. */\r\n render = function() {\r\n\r\n var x = 0;\r\n\r\n buffer.fillStyle = \"#283038\";\r\n buffer.fillRect(0, 0, buffer.canvas.width, buffer.canvas.height);\r\n\r\n for (let index = images.length - 1; index > -1; -- index) {\r\n\r\n let image = images[index];\r\n\r\n buffer.drawImage(image, 0, 0, image.width, image.height, x, 0, image.width, image.height);\r\n\r\n x += image.width;\r\n\r\n }\r\n\r\n /* Handles scaling of buffer to display as well. */\r\n display.drawImage(buffer.canvas, 0, 0, buffer.canvas.width, buffer.canvas.height, 0, 0, display.canvas.width, display.canvas.height);\r\n\r\n };\r\n\r\n /* Make sure everything fits nicely in the window, and redraws on screen resize events. */\r\n resize = function(event) {\r\n\r\n display.canvas.width = document.documentElement.clientWidth - 32;\r\n\r\n if (display.canvas.width > document.documentElement.clientHeight) {\r\n\r\n display.canvas.width = document.documentElement.clientHeight;\r\n\r\n }\r\n\r\n /* make sure we're maintaining aspect ratio. 1 image high, by 3 wide. */\r\n display.canvas.height = display.canvas.width * (1/3);\r\n\r\n display.imageSmoothingEnabled = false;// This keeps the image looking sharp.\r\n\r\n render();\r\n\r\n\r\n };\r\n\r\n window.addEventListener(\"resize\", resize);\r\n\r\n /* We have 3 16x16 images, so the buffer should fit them exactly. */\r\n buffer.canvas.height = 16;\r\n buffer.canvas.width = 48;\r\n\r\n resize();\r\n\r\n load0();\r\n load1();\r\n load2();\r\n\r\n /* The code below sets the source of a new image directly to an inline base64 string.\r\n This means no loading even occurs, the image data is just there. This is the data\r\n from the human.png file. */\r\n /* images[0] = new Image();\r\n images[0].src = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QAzQDNAM2UZCwLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QwXDhkbAgmtXgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAF3SURBVDjLfZO/S8NAFMc/VzqkkKGr4FC0Q8AlkM6C4Ogf4NC5imPt4OCm6Ohmq1NxcnBwCKJQFFdpMGMHfxUcHIQKFnrbOcQ7r03iQQjvve/3+773Hicqno99NhfeFTln5+pTzOJN4m0Qs7vi5pIB3JJD52VepAQ02S05ueTxRGaKFN8GcQqU1z2rXpgFtdqXtNqXuCUH25EmjyeS+tyTyRf1FWxQ2Vvla9AzIB13muspF8bB/t1YbB+d/zdDNg66AEIP3QhEUTQFtLtnxXu33+zoLURRRBAEpjiKQyWc7G2UvVUBGPKhUggIgMRBv4ECWNwKU+Tn4zUAaqfJFbhW0O1S1ABNBnDu18gxQb+Bqp0iGAJDKEDEKA5VtdlDWgOWkqlY56rNHqM4NM2MAyUl9QdfXCzHqnSW0TmA+oMvHqVMyK83uhTY9iBAEaBYsr7fXL9hKTZOkr/9uiqe/yegBQEjMnMqnj/9GpNdoXCAD/5eXUZO834AfkujNjeRqMcAAAAASUVORK5CYII=\";\r\n render(); */\r\n\r\n})();\r\n"
},
{
"path": "content/multiple-inheritance/multiple-inheritance.html",
"content": "\r\n\r\n\r\n\r\n \r\n\r\n \r\n\r\n Inheritance\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n\r\n"
},
{
"path": "content/multiple-inheritance/multiple-inheritance.js",
"content": "// Frank Poth 08/03/2017\r\n\r\nfunction Human(name) {\r\n\r\n this.name = name;\r\n\r\n}\r\n\r\nHuman.prototype = {\r\n\r\n talk:function() {\r\n\r\n console.log(\"Hey, I'm a human and my name is \" + this.name);\r\n\r\n }\r\n\r\n};\r\n\r\nfunction Worker(job) {\r\n\r\n this.job = job;\r\n\r\n}\r\n\r\nWorker.prototype = {\r\n\r\n work:function() {\r\n\r\n console.log(\"I am a worker and my job is \" + this.job);\r\n\r\n }\r\n\r\n};\r\n\r\nfunction Bob(job) {\r\n\r\n Human.call(this, \"Bob\");\r\n Worker.call(this, job);\r\n\r\n}\r\n\r\nBob.prototype = Object.create(Human.prototype);\r\nObject.assign(Bob.prototype, Worker.prototype);\r\n\r\nvar bob = new Bob(\"rocket ship captain\");\r\n\r\nbob.talk();\r\nbob.work();\r\n"
},
{
"path": "content/objects-and-vars/objects.html",
"content": "\r\n\r\n\r\n\r\n \r\n\r\n Objects And Vars\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n\r\n"
},
{
"path": "content/objects-and-vars/objects.js",
"content": "\r\n\r\nvar time = \"3:43\";\r\n\r\nvar rectangle = {\r\n\r\n x:0,\r\n y:10,\r\n width:100,\r\n height:200,\r\n\r\n print:function(what_to_say) {\r\n\r\n console.log(this.width + \", \" + what_to_say);\r\n\r\n }\r\n\r\n};\r\n\r\nrectangle.print(\"I'm a rectangle!\");\r\n\r\nfunction sayHello() {\r\n\r\n alert(\"Hello!\");\r\n\r\n}\r\n\r\nvar sayHello = function() {\r\n\r\n alert(\"Hello, again!\");\r\n\r\n}\r\n\r\nsayHello();\r\n"
},
{
"path": "content/offline-web-app/manifest.json",
"content": "{\r\n\r\n \"author\": \"PoP Vlog\",\r\n \"background_color\": \"#000000\",\r\n \"description\": \"A simple Progressive Web Application\",\r\n \"display\": \"fullscreen\",\r\n\r\n \"icons\": [\r\n\r\n {\r\n\r\n \"src\": \"web-app.png\",\r\n \"sizes\": \"192x192\",\r\n \"type\": \"image/png\"\r\n\r\n }\r\n\r\n ],\r\n\r\n \"lang\": \"en-US\",\r\n \"name\": \"Offline Web App\",\r\n \"orientation\": \"portrait\",\r\n \"scope\": \"./\",\r\n \"short_name\": \"Web App\",\r\n \"start_url\": \"web-app.html\",\r\n \"theme_color\": \"#0099ff\",\r\n \"version\": \"0.2\"\r\n\r\n}\r\n"
},
{
"path": "content/offline-web-app/server.js",
"content": "// Frank Poth 10/16/2017\r\n\r\n(function() {\r\n\r\n var fs, https, mimetypes, options, path, server;\r\n\r\n fs = require(\"fs\"); // file system\r\n https = require(\"https\"); // creates an https server\r\n path = require(\"path\"); // used for working with url paths\r\n\r\n // used to create response headers\r\n /* If the user requests a .css file, we want to ensure we attach \"text/css\" to\r\n our response header, this way the browser knows how to handle it. */\r\n mimetypes = {\r\n\r\n \"css\":\"text/css\",\r\n \"html\":\"text/html\",\r\n \"ico\":\"image/ico\",\r\n \"jpg\":\"image/jpeg\",\r\n \"js\":\"text/javascript\",\r\n \"json\":\"application/json\",\r\n \"png\":\"image/png\"\r\n\r\n };\r\n\r\n options = {\r\n\r\n pfx: fs.readFileSync(\"ssl/crt.pfx\"),\r\n passphrase: \"password\"\r\n\r\n };\r\n\r\n // Start a secure server that uses the credentials in ssl/crt.pfx\r\n server = https.createServer(options, function(request, response) {\r\n\r\n console.log(request.url);\r\n\r\n /* When requesting the homepage of a website, we usually only type\r\n www.mysite.com, but the server returns www.mysite.com/index.html. To make\r\n it easier for users to access our site, we add \"/index.html\" to their url\r\n so the user doesn't have to type out the whole address of our home page. */\r\n\r\n // If the url is empty\r\n if (request.url == \"\" || request.url == \"/\") {\r\n\r\n // The user is requesting the home page of the website, so give it to them\r\n request.url = \"web-app.html\";\r\n\r\n }\r\n\r\n // Next we read the file at the requested url and write it to the document.\r\n /* __dirname is just the base directory of your website, so if your website\r\n is www.coolsite.com, then __dirname is www.coolsite.com. When you put it all\r\n together it looks like www.coolsite.com/index.html or whatever the requested\r\n url is */\r\n fs.readFile(__dirname + \"/\" + request.url, function(error, content) {\r\n\r\n if (error) { // if there is an error reading the requested url\r\n\r\n console.log(\"Error: \" + error); // output it to the console\r\n\r\n } else { // else, there is no error, write the file contents to the page\r\n\r\n // 200 is code for OK, and the second parameter is our content header\r\n response.writeHead(200, {'Content-Type':mimetypes[path.extname(request.url).split(\".\")[1]]});\r\n response.write(content); // write that content to our response object\r\n\r\n }\r\n\r\n response.end(); // This will send our response object to the browser\r\n\r\n });\r\n\r\n });\r\n\r\n server.listen(\"2468\", \"192.168.0.101\", function() {\r\n\r\n console.log(\"Server started!\");\r\n\r\n }); // listen on 192.168.0.101:2468\r\n\r\n})();\r\n"
},
{
"path": "content/offline-web-app/web-app-service.js",
"content": "// Frank Poth 10/25/2017\r\n// here's a great resource on service workers: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers\r\n// here's where I basically copy and pasted the code for this service worker: https://airhorner.com/sw.js\r\n\r\nself.addEventListener(\"activate\", function(event) {\r\n\r\n event.waitUntil(self.clients.claim().then(function() {\r\n\r\n self.skipWaiting();\r\n\r\n }));\r\n\r\n});\r\n\r\nself.addEventListener(\"fetch\", function(event) {\r\n\r\n event.respondWith(caches.match(event.request).then(function(response) {\r\n\r\n if (response && response.ok) {\r\n\r\n return response;\r\n\r\n }\r\n\r\n }));\r\n\r\n});\r\n\r\nself.addEventListener(\"install\", function(event) {\r\n\r\n event.waitUntil(caches.open(\"web-app\").then(function(cache) {\r\n\r\n return cache.addAll([ \"/\", \"manifest.json\", \"web-app.css\", \"web-app.html\", \"web-app.png\"]).then(function() {\r\n\r\n self.skipWaiting();\r\n\r\n });\r\n\r\n }));\r\n\r\n});\r\n"
},
{
"path": "content/offline-web-app/web-app.css",
"content": "/* Frank Poth 10/17/2017 */\r\n\r\n* {\r\n\r\n box-sizing:border-box;\r\n margin:0;\r\n padding:0;\r\n\r\n}\r\n\r\nhtml {\r\n\r\n height:100%;\r\n width:100%;\r\n\r\n}\r\n\r\nbody {\r\n\r\n align-content:space-around;\r\n background-color:#202830;\r\n color:#ffffff;\r\n display:grid;\r\n height:100%;\r\n justify-content:space-around;\r\n justify-items:space-around;\r\n padding:8px;\r\n text-align:center;\r\n width:100%;\r\n\r\n}\r\n\r\nimg {\r\n\r\n margin:0 auto;\r\n\r\n}\r\n\r\np {\r\n\r\n font-size:1.1em;\r\n text-align:justify;\r\n\r\n}\r\n"
},
{
"path": "content/offline-web-app/web-app.html",
"content": "\r\n\r\n\r\n\r\n \r\n\r\n \r\n Web App\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n \r\n\r\n
Offline Android Web App!
\r\n\r\n \r\n\r\n
If you are viewing this app in full screen mode, you are witnessing a Progressive Web App. This app should meet the requirements to be installed to Android devices with the Add To Home Screen feature in Chrome browsers. It also tries to register a service worker which will cache files in the browser cache for use in offline mode!
\r\n\r\n \r\n\r\n \r\n\r\n\r\n"
},
{
"path": "content/pagination/article1.txt",
"content": "1. Pagination is a verb. To paginate content one must break that content into smaller\r\ngroups. For instance, if I had a database with 1,000 items in it and wanted to display\r\nthem to clients via a web page, I could make viewing the items more manageable by\r\nbreaking up the 1,000 items into groups of 10, 20, 50 or even 100. The\r\npractice of breaking large chunks of data into smaller, more manageable groups for\r\nviewing is known as pagination.\r\n"
},
{
"path": "content/pagination/article2.txt",
"content": "2. Pagination is used in many applications, perhaps without you even knowing it. If\r\nyou have used a search engine recently, you have used a web page employing pagination.\r\nSearch results are broken up into 10 to 20 items per page and at the bottom of that\r\npage there is usually a small navigator bar that you can use to view the next set\r\nof results if you wish to do so. Many paginators also allow the user to select a\r\nspecific page within several pages of the currently loaded content. Some paginators\r\nallow the user to input a specific page manually with the keyboard. Another common\r\nfeature of pagination is to allow the user to specify how many results are loaded\r\nper page.\r\n"
},
{
"path": "content/pagination/article3.txt",
"content": "3. The most common use case of pagination is to organize search results requested from\r\na database. Good examples of this are sites like Ebay and Craigslist. Social media\r\nsites like Facebook and Twitter also use a type of pagination to limit the number\r\nof results loaded per page in their news feeds or especially in photo albums. Because\r\nthis example is written for a static web server, it cannot access server side databases,\r\nmaking it rather uncommon. Some good uses for a static paginator are: photo albums,\r\narticles for blog sites, and custom links inside of a personal portfolio. Ambitious\r\nstatic site builders might even implement a search engine for their static website.\r\nKeep in mind, doing any of this on a static website requires a lot of additional\r\noverhead and maintenance for things that can be done easily with a dynamic server.\r\n"
},
{
"path": "content/pagination/article4.txt",
"content": "4. If you are planning to build a static website and want a simple paginator\r\nto help your users view photos or links, this paginator will work well. Keep in\r\nmind that it requires far more maintenance than a dynamic server. You will have\r\nto update the list of files to cycle through anytime you add new content you want\r\nto paginate to your website. If you are building a website that gets frequent updates, you\r\nshould seriously consider a hosting service that supports NodeJS. NodeJS is an easy\r\nto learn and use backend scripting language that writes like JavaScript. Of course\r\nthere are many great server languages to choose from, but NodeJS is a natural fit\r\nfor front end developers who want to write a simple server with minimal overhead.\r\n"
},
{
"path": "content/pagination/article5.txt",
"content": "5. Your static site can greatly benefit from AJAX and the XMLHttpRequest. This paginator\r\nrelies entirely on XMLHttpRequest to communicate with the static file server. Luckily,\r\nif you are building a static site and want dynamic content, a static file server\r\nwill allow you to use AJAX to request files. Any free hosting site will offer this\r\nfunctionality, so you can use AJAX to create awesome tools like this paginator for\r\nyour static site. To further improve the functionality of your static website, you\r\ncan use things like service workers and Indexed DB to give your users a great experience.\r\n"
},
{
"path": "content/pagination/pagination.css",
"content": "/* Frank Poth 01/27/2017 */\r\n\r\n* {\r\n\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n\r\n}\r\n\r\nhtml { height:100%; width:100%; }\r\n\r\nbody {\r\n\r\n align-content:center;\r\n align-items:center;\r\n background-color:#ffffff;\r\n display:grid;\r\n grid-template-columns:auto;\r\n grid-template-rows:auto auto;\r\n justify-items:center;\r\n min-height:100%;\r\n width:100%;\r\n\r\n}\r\n\r\nh1 { color:#cc181e; font-size: 3.0em; font-weight:1000; margin:16px; text-align:center; }\r\n\r\n.paginator {\r\n\r\n display:grid;\r\n grid-row-gap:1.0em;\r\n grid-template-areas:\"content\" \"navigator\";\r\n grid-template-columns:auto;\r\n grid-template-rows:auto auto;\r\n max-height:480px;\r\n max-width:480px;\r\n\r\n}\r\n\r\n.paginator-content {\r\n\r\n color:#202830;\r\n display:grid;\r\n font-size:1.25em;\r\n font-weight:800;\r\n grid-area:content;\r\n max-height:320px;\r\n overflow-y:auto;\r\n padding:8px;\r\n text-align:justify;\r\n\r\n}\r\n\r\n.paginator-navigator {\r\n\r\n align-items:center;\r\n background-color:#cc181e;\r\n border-radius:8px;\r\n color:#ffffff;\r\n display:grid;\r\n grid-area:navigator;\r\n grid-template-columns:auto auto auto;\r\n grid-template-rows:auto;\r\n justify-content:center;\r\n justify-items:center;\r\n margin:0 auto;\r\n padding:0 8px;\r\n text-align:center;\r\n\r\n}\r\n\r\n.paginator-button {\r\n\r\n cursor:pointer;\r\n font-size:1.25em;\r\n border-color:#ffffff;\r\n padding:8px;\r\n user-select:none;\r\n\r\n}\r\n\r\n.paginator-index {\r\n\r\n font-size:1.5em;\r\n font-weight:800;\r\n user-select:none;\r\n\r\n}\r\n"
},
{
"path": "content/pagination/pagination.html",
"content": "\r\n\r\n\r\n\r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n PoP Vlog - Pagination\r\n\r\n \r\n \r\n\r\n \r\n\r\n \r\n\r\n
PoP Vlog - Pagination
\r\n\r\n \r\n \r\n\r\n \r\n\r\n\r\n"
},
{
"path": "content/pagination/paginator.js",
"content": "// Frank Poth 01/27/2018\r\n\r\n/* This paginator is designed for static websites, making it quite rare. People\r\ndon't usually do stuff like this for static websites because of how much maintenance\r\nit requires. Every time you add content to your site, you have to update the paginator.\r\nSites with backend servers that can handle loading dynamic content for your site at\r\na simple request are far better suited to handle this sort of thing. But, if you are\r\nset on making your static site as dynamic as possible and don't mind maintaining it,\r\nthis will work just fine for you. */\r\n\r\n/* The paginator takes an array of links or urls to content. Each url and its corresponding\r\nfile content represent 1 item to paginate. The index is the first item in that list\r\nof links to be displayed on a page, and the limit is how many items will be displayed\r\nper page. */\r\nconst Paginator = function(links, index, limit) {\r\n\r\n this.links = links;\r\n this.index = 0;\r\n /* Make sure the limit per page is not greater than the actual amount of items we have or 0 */\r\n this.limit = (limit <= links.length && limit > 0) ? limit : links.length;\r\n\r\n /* I created my html with JavaScript, but you could easily do this with an HTML\r\n template or create your HTML inline and use querySelector to get a reference to it.\r\n I thought it would be more portable to use this approach. That being said, All the\r\n CSS for these elements is in the pagination.css file. How you style this stuff is\r\n up to you. Even without the css, it all works. */\r\n this.html = document.createElement(\"div\");\r\n this.html.setAttribute(\"class\", \"paginator\");\r\n this.html.innerHTML = \"
\";\r\n\r\n /* Here we set up the buttons created above to respond to click events and give\r\n them a reference to their paginator. */\r\n var buttons = this.html.querySelectorAll(\"a\");\r\n\r\n for (let index = buttons.length - 1; index > -1; -- index) {// Loop through all buttons.\r\n\r\n let button = buttons[index];\r\n\r\n button.addEventListener(\"click\", Paginator.click);\r\n /* Button elements need access to their paginator object so they can access its\r\n variables inside of the Paginator.click event handler. */\r\n button.paginator = this;\r\n\r\n }\r\n\r\n};\r\n\r\nPaginator.prototype = {\r\n\r\n constructor:Paginator,\r\n\r\n /* Changes the currently displayed items in the paginator's content div. */\r\n changeIndex:function(new_index) {\r\n\r\n var content_div, content_strings, limit, loaded;\r\n\r\n this.index = new_index;// The new index in the list of links to start getting items from.\r\n\r\n /* Show the users what page they are on and how many pages there are. */\r\n this.html.querySelector(\".paginator-index\").innerHTML = (new_index / this.limit + 1) + \" of \" + Math.ceil(this.links.length / this.limit);\r\n\r\n content_div = this.html.querySelector(\".paginator-content\");\r\n content_div.scrollTop = 0;// Whenever the page changes, scroll content to the top.\r\n content_strings = [];// We load each file in order into this array.\r\n /* Make sure we don't try to load items that don't exist. */\r\n limit = (new_index + this.limit <= this.links.length) ? this.limit : this.links.length - new_index;\r\n loaded = 0;// Keep track of how many files have been loaded.\r\n\r\n paginator = this;// Get a reference to this paginator.\r\n\r\n /* The reason for this seemingly convoluted method of loading content is that\r\n asynchronous requests can load at different rates, meaning if I request content\r\n in a specific order I might get it in a different order. This would be terrible\r\n if I were requesting pages in a book and they came back out of order, so to remedy\r\n this, I load each file's content into the content_strings array in the correct\r\n order and then when everything is done loading, I put the strings together. */\r\n for (let index = 0; index < limit; index ++) {\r\n\r\n Paginator.requestContent(this.links[this.index + index], function(request) {\r\n\r\n loaded ++;\r\n\r\n // index is relative to the value it was set to in the encompassing for loop thanks to let scope.\r\n content_strings[index] = \" \" + request.responseText + \" \";\r\n\r\n if (loaded >= limit) {\r\n\r\n content_div.innerHTML = \"\";\r\n\r\n for (let index = 0; index < limit; index ++) {\r\n\r\n content_div.innerHTML += content_strings[index];\r\n\r\n }\r\n\r\n }\r\n\r\n });\r\n\r\n }\r\n\r\n }\r\n\r\n};\r\n\r\n/* The click listener for this paginator. */\r\nPaginator.click = function(event) {\r\n\r\n var shift;// The number of items to shift past when loading the items for the new page.\r\n\r\n switch(this.innerHTML) {\r\n\r\n case \"back\":\r\n\r\n shift = this.paginator.index - this.paginator.limit;\r\n if (shift < 0) return;\r\n\r\n break;\r\n\r\n case \"next\":\r\n\r\n shift = this.paginator.index + this.paginator.limit;\r\n if (shift >= this.paginator.links.length) return;\r\n\r\n break;\r\n\r\n }\r\n\r\n this.paginator.changeIndex(shift);\r\n\r\n};\r\n\r\n/* Creates a paginator inside a \r\n\r\n
![](\"flower.png\")
\r\n\r\n ![](\"web-app.png\")
\r\n\r\n