Javascript Framework Javascript - Classes e Metódos

Insurgent3 · 3 de setembro de 2018

Olá,

Estou apanhando do Javascript mas sigo em frente. Porém estou precisando de ajuda.

Estou seguindo este tutorial pra criar um mapa renderizado na tela que carrega as imagens baseado em uma matriz: https://www.creativebloq.com/html5/build-tile-based-html5-game-31410992

A demo em funcionamento pode ser vista aqui: http://dan.nea.me/tile-based-games-demo/

E neste link pode ser baixado o source completo: http://dan.nea.me/tile-based-games/

O problema é que mesmo seguindo o tutorial, eu não estou conseguindo entender como usar as classes e funções do Javascript. Por enquanto pra mim ta meio obscuro a sintaxe complexa do Javascript.

Eu consegui renderizar o mapa. Até aí tudo bem.

Eu então adicionei um código simples que gerencia os cliques e posições do mouse. Até aqui tudo bem.

Agora a questão fica em como chamar as funções do framework "Agent.js", "Joystix.js" e "KeyboardController.js" no Javascript pra passar as coordenadas do mouse pro sprite. É isso que quero fazer até o momento.

Alguém pode me ajudar?

Vou passar aqui o que tenho.

Código que renderiza o mapa:


<html>

<head>
   <title>Site</title>
   <link rel="stylesheet" media="screen" href="css/normalise.css"></link>
   <link rel="stylesheet" media="screen" href="css/canvases.css"></link>
   
  <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="js/lib/underscore-min-1.4.3.js"></script>
  <script type="text/javascript"  src="js/lib/toolbox.js"></script>
  <script data-main="js/main" src="js/lib/require.js"></script>
  <script type="text/javascript"  src="js/track.js"></script>
   <script type="text/javascript"  src="js/KeyboardController.js"></script>
   <script type="text/javascript"  src="js/Joystix.js"></script>
  
   
  
  <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">
	
	
	    $(document).ready(function(){
            $('html').mousemove(function(event){ 
                console.log("mouse move X:"+event.pageX+" Y:"+event.pageY);
            });
			
			// AQUI NO EVENTO DE CLICK DO MOUSE NA TELA ESTOU TENTANDO MOVIMENTAR O PERSONAGEM
            $('html').click(function(event){
		         
				 require(['js/Joystix'],
                 function(Joystix){		
		            joystix.onMove(function(movement){
				        player.doMove(movement.x1 * 0.01, movement.y1 * 0.01);
			     });
                console.log("mouse click X:"+event.pageX+" Y:"+event.pageY);
                });
			});
			
            $('html').keyup(function(event){
                console.log("keyboard event: key pressed "+event.keyCode);
            });
        });
    </script>
</head>		

<body>
 
 
</body>

</html>

E as demais classes que não estou sabendo como instanciar as classes e usar os métodos das classes. Ainda não me acostumei com a sintaxe do Javascript.

main.js

/*
	main.js file
*/
require(['lib/DependencyLoader',
		'BackgroundRenderer',
		'CharacterRenderer',
		'CollisionMap',
		'Agent',
		'Mob',
		'Tileset',
		'Joystix'],
function(DependencyLoader,
		BackgroundRenderer,
		CharacterRenderer,
		CollisionMap,
		Agent,
		Mob,
		Tileset,
		Joystix){	
	'use strict';

	var map = [
			[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
			[3,0,0,0,0,2,1,3,0,0,0,0,0,0,0,0,0,2,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2],
			[3,0,0,0,2,1,3,0,0,0,0,0,0,0,0,0,0,0,2,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2],
			[3,0,0,0,2,3,0,0,2,1,3,0,0,0,0,0,0,0,0,0,0,0,0,0,2,3,0,0,2,3,0,0,0,0,0,2],
			[3,0,0,0,2,3,0,0,2,1,1,1,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2],
			[3,0,0,0,2,3,0,0,0,0,2,1,1,1,1,3,0,0,0,0,0,0,0,0,0,0,2,3,0,0,0,0,0,0,0,2],
			[3,0,0,0,0,0,0,0,0,0,0,2,1,3,0,0,0,0,0,0,0,0,2,3,0,0,0,0,0,0,0,0,0,0,0,2],
			[3,0,0,0,0,0,0,0,0,0,2,1,3,0,0,0,2,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2],
			[3,0,0,0,0,0,0,0,0,0,2,3,0,0,0,2,1,1,3,0,0,0,0,0,0,0,0,0,0,0,0,0,2,1,1,1],
			[3,0,0,0,2,3,0,0,0,0,2,1,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,1,1,1,1,1],
			[3,0,0,0,0,0,0,0,0,0,2,3,0,0,2,1,1,1,3,0,0,0,0,0,0,0,0,0,0,0,0,0,2,1,1,1],
			[3,0,0,0,0,0,0,0,0,2,1,3,0,0,0,0,0,0,0,0,0,0,0,0,0,2,3,0,0,0,2,1,1,1,1,1],
			[3,0,0,0,0,0,0,0,0,0,2,3,0,0,0,0,0,0,2,1,1,1,3,0,0,0,0,0,2,1,1,1,1,1,1,1],
			[3,0,0,0,0,0,0,0,0,0,0,0,0,2,3,0,0,0,0,0,0,0,0,0,0,0,2,1,1,1,1,1,1,1,1,1],
			[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
		],
		tileSize = 24,
		$body = $('body'),
		$window = $(window),
		$canvas,
		canvases = [],
		bgRenderer,
		characterRenderer,
		joystick = new Joystix({
			//assumeTouch: true,
			$window: $(window),
			keyboardSpeed: 10	
		}),
		spritesToLoad = 2,

		bgTileset = new Tileset({
			spritePath: 'img/sf2-map.png',
			specPath: 'spec/sf2-map.json',
			onReady: loadCb
		}),

		player = new Agent({
			position: {x:1,y:1},
			collision: new CollisionMap({
				map: map
			}),
			tileset: new Tileset({
				spritePath: 'img/sf2-characters.png',
				specPath: 'spec/sf2-characters.json',
				onReady: loadCb
			})
		}),
		monster = new Mob({
			position: {x:20,y:10},
			collision: new CollisionMap({
				map: map
			}),
			tileset: new Tileset({
				spritePath: 'img/sf2-characters.png',
				specPath: 'spec/sf2-goblin.json',
				onReady: loadCb
			}),
			targetAgent: player
		}),
		monster2 = new Mob({
			position: {x:24,y:7},
			collision: new CollisionMap({
				map: map
			}),
			tileset: new Tileset({
				spritePath: 'img/sf2-characters.png',
				specPath: 'spec/sf2-goblin.json',
				onReady: loadCb
			}),
			targetAgent: player
		}),
		monster3 = new Mob({
			position: {x:20,y:4},
			collision: new CollisionMap({
				map: map
			}),
			tileset: new Tileset({
				spritePath: 'img/sf2-characters.png',
				specPath: 'spec/sf2-goblin.json',
				onReady: loadCb
			}),
			targetAgent: player
		});

	function loadCb(){
		spritesToLoad--;
		if(!spritesToLoad){ run(); }
	}
	
	function run(){

		// build layers
		_(4).times(function(i){
			$canvas = $('<canvas width="'+(map[0].length * tileSize)+'" height="'+(map.length * tileSize)+'" data-index="'+i+'" class="gamecanvas canvas'+i+'"/>');
			$body.append($canvas);
			canvases.push($canvas);
		});


		// start renderers
		bgRenderer = new BackgroundRenderer({
			$el: canvases[1],
			map: map,
			tileSet: bgTileset,
			tileSize: tileSize
		});
		characterRenderer = new CharacterRenderer({
			$el: canvases[2],
			tileSize: tileSize,
			agents: [
				player,
				monster,
				monster2,
				monster3
			]
		});


		// input
		joystick.onMove(function(movement){
			player.doMove(movement.x1 * 0.01, movement.y1 * 0.01);
		});


		// run game
		function gameLoop(){
			characterRenderer.draw();
			monster.chooseAction();
			monster2.chooseAction();
			monster3.chooseAction();

			window.requestAnimationFrame(gameLoop);
		}
		gameLoop();

		centerCanvases();
	}


	// resize
	function centerCanvases(){
		_(canvases).each(function($canvas){
			$canvas.css({
				top: ($window.height() - $canvas.height())/2
			});
		});
	}
	$window.resize(_.throttle(centerCanvases,250));


});

Joystix.js

define(['lib/Modernizr.2.6.2-touch',
		'gamepadSupport',
		'MultiTouchJoystick',
		'KeyboardController',
		'lib/requestAnimationFrame'],
function(Modernizr,
		 gamepadSupport,
		 MultiTouchJoystick,
		 KeyboardController){
	'use strict';

	function Joystix(opts){
		this.$window = opts.$window;

		this.moveCb = function(){};
		this.buttonCb = function(){};

		this.numButtons = 15;
		this.keyboardSpeed = opts.keyboardSpeed || 5;
		this.assumeTouch = !!opts.assumeTouch;

		gamepadSupport.init();
		gamepadSupport.startPolling();

		MultiTouchJoystick.init(this.$window.width(), this.$window.height());

		KeyboardController.init(this.$window);

		this.poll();
	}

	Joystix.prototype.onMove = function(cb){
		this.moveCb = cb;
	};

	Joystix.prototype.onButtonPress = function(cb){
		this.buttonCb = cb;
	};

	Joystix.prototype.getMovementForGamepad = function(axesStatus){
		return {
			x1: axesStatus[0],
			y1: axesStatus[1],
			x2: axesStatus[2],
			y2: axesStatus[3]
		};
	};

	Joystix.prototype.getMovementForMultiTouch = function(xy){
		return {
			x1: xy.x,
			y1: xy.y,
			x2: 0,
			y2: 0
		};
	};

	Joystix.prototype.getMovementForKeyboard = function(movementStatus){
		var x = movementStatus.RIGHT ? this.keyboardSpeed : (movementStatus.LEFT ? -this.keyboardSpeed : 0),
			y = movementStatus.DOWN ? this.keyboardSpeed : (movementStatus.UP ? -this.keyboardSpeed : 0);

		return {
			x1: x,
			y1: y,
			x2: 0,
			y2: 0
		};
	};

	Joystix.prototype.getButtonPressForMultiTouch = function(isPressed){
		var buttonArray = [];
		_(this.numButtons).times(function(){
			buttonArray.push(false);
		});
		buttonArray[0] = isPressed;
		return buttonArray;
	};

	Joystix.prototype.getButtonsForKeyboard = function(isPressed){
		var buttonArray = [];
		_(this.numButtons).times(function(){
			buttonArray.push(false);
		});
		buttonArray[0] = isPressed;
		return buttonArray;
	};

	Joystix.prototype.poll = function(){
		var self = this;

		function loop(){
			var status;
			if(gamepadSupport.gamepads.length){
				status = gamepadSupport.getStatus();
				self.moveCb(self.getMovementForGamepad(status.movedAxes));
				self.buttonCb(status.buttonPresses);
			}else if((Modernizr && Modernizr.touch) || self.assumeTouch){
				self.moveCb(self.getMovementForMultiTouch(MultiTouchJoystick.getMovementIntent()));
				self.buttonCb(self.getButtonPressForMultiTouch(MultiTouchJoystick.getButtonPress()));
			}else{
				self.moveCb(self.getMovementForKeyboard(KeyboardController.getMovement()));
				self.buttonCb(self.getButtonsForKeyboard(KeyboardController.getButtonPress()));
			}
			window.requestAnimationFrame(loop);
		}
		loop();
	};

	return Joystix;

});

Agent.js

define(function(){
	
	return Toolbox.Base.extend({
		constructor: function(options){
			this.position = options.position || {x:0,y:0};
			this.collision = options.collision;
			this.tileset = options.tileset;
		},
		doMove: function(moveX,moveY){
			this.position.x = this.collision.getPosition(0, this.position.x, this.position.y, moveX);
			this.position.y = this.collision.getPosition(1, this.position.x, this.position.y, moveY);
		},
		setPosition: function(pos){
			pos = pos || {};
			this.position.x = pos.x || 0;
			this.position.y = pos.y || 0;
		},
		getSprite: function(){
			return this.tileset.sprite;
		},
		getTileId: function(){
			return (Math.floor(new Date().getTime()/500)%2) ? 'standing' : 'standing_alt';
		},
		getTileSpec: function(){
			return this.tileset.tileSpec;
		}
	});

});

A classe main.js renrediza o mapa e inicializa variáveis.

A classe Joystix.js gerencia os eventos de teclas.

A classe Agent.js gerencia a criação e posição do personagem.

Estou pegando a posição x e y do mouse e quero a princípio que o personagem principal mova-se para a posição do clique do mouse ao invés de usar as setas do teclado que é o padrão do framework.

Estou pedindo ajuda em foruns de desenvolvimento de jogos mas no Brasil a maioria está jogada as traças infelizmente, muito abandonados. Então resolvi pedir ajuda aqui pois esse framework muito me interessa a aprender e programá-lo.

Muito obrigado por qualquer ajuda.

Adriano_web · 3 de setembro de 2018

Eu li todo o artigo e inclusive li a especificação no site do Github, acho que se você quer mover o "agent" com o clique do mouse você pode vincular os ouvintes de evento diretamente aos elementos renderizados. Com uma tela, você terá que calcular qual elemento está sendo clicado. Como diz no inicio do artigo.

Pode se utilizar CSS para mover ele dentro de seu JavaScript.

https://www.w3schools.com/code/tryit.asp?filename=FUX6VDVS0GL0