Pokemon Sprite Sheet Finder

by Cory Hughes

HTML

<!-- This assumes that the sprite is a certain width and height.
     This also assumes that the sprites are all the same size -->
     
     <div>
	   <h2>Pokemon</h2>
	   <div><input id="pokemon" type="text"><button id="pokemonbutton" onClick="whosthatpokemon()" >Get Sprite</button></div>
	   
       <h2>Poke-Position</h2>
       <span id="pokeposition">0 + 0</span>
       
       <h2>Sprite Chosen</h2>
       <div id="sprite"></div>
     
       <h2>Sprite Map</h2>
       <div><img src="http://iamogre.com/projects/pokecheck/images/overworld-down.png" alt=""></div>
     </div>

CSS

#sprite {
	width: 32px;
	height: 32px;
	background-image: url(http://iamogre.com/projects/pokecheck/images/overworld-down.png);
	background-repeat: no-repeat;
	image-rendering: pixelated;
}

JavaScript

var spritesAcross = 28;
var spriteDimensions = 32;
var sheetWidthPX = 896;
var pokemon = 001;
var numDown = "";
var numDownRD = "";
var numOver = "";
var numOverLO = "";
var numOverLORD = "";
var xpos = "";
var ypos = "";
//var css = "-"+ xpos + "px, -" + ypos + "px";

$( "#pokemonbutton" ).click(function() {
  whosthatpokemon();
});
$("#pokemon").keyup(function(event){
    if(event.keyCode == 13){
        $("#pokemonbutton").click();
    }
});

function whosthatpokemon() {
	
	pokemon = $('#pokemon').val();
	if (pokemon.length < 3) {
		alert("Please format your pokemon like '001' or '099'.");
	} else {
		if ( pokemon < 493 ) {
				numDown = pokemon / spritesAcross;
			numDownRD = Math.floor(numDown);
			numOverLO = numDown - numDownRD;
			numOverLORD = numOverLO * sheetWidthPX - spriteDimensions;
			xpos = Math.round(numOverLORD);
			ypos = numDownRD * spriteDimensions;
			$("#pokeposition").html(xpos + " + " + ypos);
			$("div#sprite").attr("style", "background-position: " + "-" + xpos + "px -" + ypos + "px;")   			//.css("background-position", css);
		} else {
			alert("U R DUM.");
		};
	}

	
}