Skip to content

Instantly share code, notes, and snippets.

View snggeng's full-sized avatar

Geng Sng snggeng

45 followers · 39 following
View GitHub Profile
@snggeng
snggeng / game.js
Last active June 6, 2017 01:20
Using window.request and cancel AnimationFrame
/* Animation */
var self = this;
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60); // 60 frames per sec
};
})();
@snggeng
snggeng / game.js
Created June 4, 2017 12:40
template for HTML5 game engine psuedo-code 1
var Game = function() {
/* SETTINGS */
// Game settings
var settings = {}; // Containes all game settings
settings.playerSpeed = 8; // The speed of the player
settings.walls = true; // The player can not go outside the screen
settings.automatic = false; // The player will move by itself
settings.godmode = false; // Debug mode
@snggeng
snggeng / game.js
Last active June 6, 2017 01:19
Creating Game Objects
// World settings
var assets = []; // All game objects
var player = new Player(settings); // The player
assets.push(player); // Add the player as a game asset
@snggeng
snggeng / player.js
Last active June 6, 2017 02:59
Player Object
var Player = function(settings) {
// Settings
var playerElement = null;
// Prevent player from escaping the game window
function wall() {
var playerRect = playerElement.getBoundingClientRect(); // get the active style values of our moving player
var w = parseInt(window.innerWidth);
@snggeng
snggeng / player.js
Created June 6, 2017 01:29
var Player = function(settings) {
// Settings
var playerElement = null;
// Prevent player from escaping the game window
function wall() {
}
@snggeng
snggeng / index.html
Last active June 6, 2017 01:55
html for html5 game tutorial
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Javascript Games!</title>
<style>
#player {
height: 100px;
@snggeng
snggeng / player.js
Last active June 6, 2017 02:02
create function
// Create the object asset
function create() {
// in-line styling is important because we will be using the element's
// in-line styling to manipulate it's movement, as above in the move()
// function
playerElement = document.getElementById('player');
playerElement.style.top = '400px';
playerElement.style.left = '400px';
playerElement.style.height = '100px';
}
@snggeng
snggeng / player.js
Created June 6, 2017 02:07
Move function
// Move the ball around manually
function move(interactions){
if(interactions.up){
playerElement.style.top = parseInt(playerElement.style.top)-8+"px";
}
if(interactions.down){
playerElement.style.top = parseInt(playerElement.style.top)+8+"px";
}
@snggeng
snggeng / game.js
Created June 6, 2017 02:16
Setting up event listeners
// Setup event listeners
function setupEvents() {
document.addEventListener('keyup', function(event){
var keyName = event.key;
switch(keyName) {
case "ArrowRight":
interactions.right = false;
break;
@snggeng
snggeng / enemy.js
Last active June 7, 2017 11:57
Enemy object
const Enemy = function(settings) {
// Settings
let enemyElement = null
// Prevent enemy from escaping the game window
function wall() {
const enemyRect = enemyElement.getBoundingClientRect() // get the active style values of our moving enemy
const w = parseInt(window.innerWidth)