Created
October 16, 2016 01:30
-
-
Save animatedlew/fff07f63c14b8f218dfb547c6ad484b3 to your computer and use it in GitHub Desktop.
Check out my tutorial: https://youtu.be/3bHccvXBM-M
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const KeyManager = { | |
keys: {}, | |
setupEvents() { | |
if (!this.isActive) { | |
this.isActive = true; | |
document.addEventListener("keydown", KeyManager._onKeyDown); | |
document.addEventListener("keyup", KeyManager._onKeyUp); | |
} | |
}, | |
removeEvents() { | |
if (this.isActive) { | |
this.isActive = false; | |
document.removeEventListener("keydown", KeyManager._onKeyDown); | |
document.removeEventListener("keyup", KeyManager._onKeyUp); | |
} | |
}, | |
_onKeyUp: e => delete KeyManager.keys[e.keyCode], | |
_onKeyDown: e => KeyManager.keys[e.keyCode] = true | |
}; | |
class Canvas { | |
constructor(w, h) { | |
// standard stuff | |
let canvas = document.createElement("canvas"); | |
this.w = canvas.width = w; | |
this.h = canvas.height = h; | |
document.body.appendChild(canvas); | |
this.ctx = canvas.getContext("2d"); | |
} | |
drawGrid(w, h, s) { | |
// n | 0 is a quicker way of doing Math.floor | |
let cols = (this.w / s) | 0; | |
let rows = (this.h / s) | 0; | |
this.ctx.save(); | |
this.ctx.strokeStyle = "lightgrey"; | |
this.ctx.beginPath(); | |
// draw horizontal and vertical lines at each step | |
for (let x = 0; x <= cols * s; x += s) this.drawLine(x, 0, x, this.w); | |
for (let y = 0; y <= rows * s; y += s) this.drawLine(0, y, this.h, y); | |
this.ctx.stroke(); | |
this.ctx.beginPath(); | |
this.ctx.strokeStyle = "black"; | |
this.ctx.strokeRect(0, 0, this.w, this.h); | |
this.ctx.restore(); | |
} | |
drawLine(x1, y1, x2, y2) { | |
this.ctx.moveTo(x1, y1); | |
this.ctx.lineTo(x2, y2); | |
} | |
clear() { | |
this.ctx.clearRect(0, 0, this.w, this.h); | |
} | |
} | |
class TileCursor { | |
constructor(canvas, x, y, tileSize, blinkRate) { | |
this.canvas = canvas; | |
this.x = x; | |
this.y = y; | |
this.blinkRate = blinkRate || 8; | |
this.blinkCounter = this.blinkRate; | |
this.render = true; | |
this.tileSize = tileSize; | |
} | |
blink(m) { | |
this.blinkCounter--; | |
// this turns off the square wave at a certain point | |
if (this.blinkCounter < this.blinkRate / (m || 2)) | |
this.render = false; | |
// once the counter reaches zero, reset everything | |
if (!this.blinkCounter) { | |
this.render = true; | |
this.blinkCounter = this.blinkRate; | |
} | |
} | |
move() { | |
// key codes: 37 == left, 38 == up, 39 == right, and 40 == down | |
if (KeyManager.keys[37]) this.x--; | |
if (KeyManager.keys[39]) this.x++; | |
if (KeyManager.keys[38]) this.y--; | |
if (KeyManager.keys[40]) this.y++; | |
// figure out max rows and cols | |
let maxCols = (this.canvas.w / this.tileSize) | 0; | |
let maxRows = (this.canvas.h / this.tileSize) | 0; | |
// do a little bounds checking... | |
if (this.x < 0) this.x = 0; | |
if (this.y < 0) this.y = 0; | |
if (this.x > maxCols - 1) this.x = maxCols - 1; | |
if (this.y > maxRows - 1) this.y = maxRows - 1; | |
} | |
draw() { | |
// shorthand | |
let [s, ctx] = [this.tileSize, this.canvas.ctx]; | |
ctx.save(); | |
ctx.strokeStyle = "red"; | |
ctx.beginPath(); | |
if (this.render) | |
ctx.strokeRect(this.x * s, this.y * s, s, s); | |
ctx.stroke(); | |
ctx.restore(); | |
} | |
} | |
class World { | |
constructor(w, h, fps, tileSize) { | |
this.fps = fps || 10; | |
this.w = w || 400; | |
this.h = h || 400; | |
this.tileSize = tileSize || 20; | |
this.canvas = new Canvas(this.w, this.h); | |
let centerTileX = this.w / this.tileSize / 2 - 1; | |
let centerTileY = this.h / this.tileSize / 2 - 1; | |
this.tileCursor = new TileCursor( | |
this.canvas, | |
centerTileX, | |
centerTileY, | |
this.tileSize | |
); | |
KeyManager.setupEvents(); | |
requestAnimationFrame(this.animate.bind(this)); | |
} | |
animate() { | |
setTimeout(() => { | |
requestAnimationFrame(this.animate.bind(this)); | |
this.canvas.clear(); | |
this.canvas.drawGrid(this.w, this.h, this.tileSize); | |
this.tileCursor.move(); | |
this.tileCursor.blink(); | |
this.tileCursor.draw(); | |
}, 1 / this.fps * 1000); | |
} | |
} | |
new World(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
hi sir, i want to learn phaser framework