File: example_game_movement.js

Recommend this page to a friend!
  Classes of JImmy Bo   Spritesheet Animation Manager   example_game_movement.js   Download  
File: example_game_movement.js
Role: Example script
Content type: text/plain
Description: example game movement
Class: Spritesheet Animation Manager
Animate graphics using CSS sprites
Author: By
Last change:
Date: 10 years ago
Size: 4,251 bytes
 

Contents

Class file image Download
var player = function(divClass) { this.className = divClass; this.id = 'jP' + window.performance.now(); this.id = this.id.replace(/\./g,''); // get rid of period this.that = this; this.cur = { direction : 'south', state : 'stopped', }; this.anim = []; this.anim['south'] = new spritesheet_animation_manager(this.className); this.anim['south'].add.row ( 0, 0, 3, 32, 32, 0 ); this.anim['south'].cur.frame = 1; this.anim['south'].speed = 125; this.anim['south'].pingpong = true; this.anim['north'] = new spritesheet_animation_manager(this.className); this.anim['north'].add.row ( 0, 32 * 3, 3, 32, 32, 0 ); this.anim['north'].cur.frame = 1; this.anim['north'].speed = 125; this.anim['north'].pingpong = true; this.anim['east'] = new spritesheet_animation_manager(this.className); this.anim['east'].add.row ( 0, 32 * 2, 3, 32, 32, 0 ); this.anim['east'].cur.frame = 1; this.anim['east'].speed = 125; this.anim['east'].pingpong = true; this.anim['west'] = new spritesheet_animation_manager(this.className); this.anim['west'].add.row ( 0, 32, 3, 32, 32, 0 ); this.anim['west'].cur.frame = 1; this.anim['west'].speed = 125; this.anim['west'].pingpong = true; this.change = { that:this, direction: function(new_direction) { var old_direction = this.that.cur.direction; // stop old direction // this.that.anim[old_direction].stop(); // ... now hook it up with a bump // this.that.anim[new_direction].display.frame(); this.that.anim[new_direction].control.play(); }, }; this.control = { that:this, key_down : function(whichKey) { var old_direction = this.that.cur.direction; // console.log(old_direction); var new_direction = false; if(whichKey.keyCode == 87) new_direction = 'north'; else if(whichKey.keyCode == 65) new_direction = 'west'; else if(whichKey.keyCode == 83) new_direction = 'south'; else if(whichKey.keyCode == 68) new_direction = 'east'; // console.log(whichKey.keyCode); if(new_direction == old_direction && this.that.cur.state == 'walking') { return false; } this.that.cur.direction = new_direction; if(new_direction) { this.that.anim[old_direction].control.stop(); this.that.anim[new_direction].display.frame(); this.that.anim[new_direction].control.stop(); this.that.anim[new_direction].control.play(); this.that.cur.state = 'walking'; } /* cur = this.that.cur; // w=87, a=65, s=83, d=68 */ }, key_up : function(whichKey) { // console.log('still keyup'); var cur_direction = this.that.cur.direction; this.that.anim[cur_direction].control.stop(1); // stop on frame 1 this.that.anim[cur_direction].display.frame(); // update player display this.that.cur.state = 'stopped'; }, stop : function () { this.that.anim[this.that.cur.direction].control.stop(); }, show : function () { var cur_direction = this.that.cur.direction; this.that.anim[cur_direction].display.frame(); // update player display } }; this.init = function (that) { // Handler for .ready() called. // document.onkeydown = that.control.keydown; // document.onkeyup = that.control.keyup; var parentobj = that; document.body.onkeydown = function(event) { // console.log(that); event = event || window.event; var keycode = event.charCode || event.keyCode; that.control.key_down(event); }; document.body.onkeyup = function(event) { // console.log('keyup'); event = event || window.event; var keycode = event.charCode || event.keyCode; console.log(parentobj); parentobj.control.key_up(event); }; } (this); }; var player = new player(".player"); player.control.show();