Pokemon Sprite Sheet Finder II

NOW WITH 802 POKEMON

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" value="001">
         <button id="pokemonbutton" onClick="whosthatpokemon()" >Get Sprite</button>
         <button id="cssbutton">Get CSS</button>
       </div>
	   
       <h2>Poke-Position</h2>
       <p><span id="pokeposition">0 + 0</span></p>
       
       <h2>Sprite Chosen</h2>
       <div id="sprite"></div>
     
       <h2>Sprite Map</h2>
       <div><img src="http://iamogre.com/projects/pokecheck/images/PokeSpriteMap.png" alt=""></div>
     </div>

CSS

#sprite {
	width: 40px;
	height: 40px;
  border: solid 1px #000;
  border-radius: 3px;
  background: #fff;
	background-image: url(http://iamogre.com/projects/pokecheck/images/PokeSpriteMap.png);
	background-repeat: no-repeat;
	image-rendering: pixelated;
  transform: scale(2);
  display: block;
  margin-left: 20px;
}

JavaScript

var spritesAcross = 51;
var spriteDimensions = 40;
var sheetWidthPX = 2040;
var pokemon = 001;
var numDown = "";
var numDownRD = "";
var numOver = "";
var numOverLO = "";
var numOverLORD = "";
var xpos = "";
var ypos = "";
//var css = "-"+ xpos + "px, -" + ypos + "px";
var css = "";

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

function whosthatpokemon() {
	
	pokemon = $('#pokemon').val();
	if (pokemon.length < 3) {
		alert("Please format your pokemon number with 3 digits.\nBulbasaur would be '001'.");
	} else {
		if ( pokemon < 803 ) {
			findPoints();
		} else {
			noPoints();
		};
	}
}

function findPoints(){
	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);
}
function noPoints(){
	alert("Well... Shuckles!\nThere aren't enough Pokemon right now to display that...\n\nPlease choose a number below 803.\n");
  $("div#sprite").attr("style", "background-position: " + "-1480px -600px;");
  $("#pokeposition").html("MissingNo.");
}

function findPointsCSS(){
	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);
	
}
function pokeCSS() {
	pokemon =...