1 Replies - 221 Views - Last Post: 06 February 2017 - 08:45 PM

#1 tehHuzzlenut   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 16
  • Joined: 03-June 16

Sprite Not Showing Up in Game

Posted 06 February 2017 - 07:57 PM

Hello All!
I am currently working on a browser based Endless Runner with the help of this tutorial: http://webapplist.in...nfinite-runner/

My issue is that my custom sprite does not show up in the browser when the game is run. I spent about one hour messing with the code and nothing puts my sprite on the screen. Does anyone know what I can do to fix this issue?

<body>
    <container>
	<!--html markup goes here-->
	  <div class = "terrain">
	    <img src = "Terrain/runner_terrain.png" alt="" width="2400" height="305"/>
	  </div>
	</container>
	
	<script> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="jquery.animateSprite.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
	<script>
	
	var $body, $screen;
	
	$(function(){ //shorthand for jquery.ready(), code runs after page is loaded
    // start javascript in here and initialize varibles
	    $body = $("body");
		$screen = $("container");
		
		$(window).on("resize", function(event){
		    function updateScreen(){
			 $screen.css({'width':window.innerWidth, 'height':window.innerHeight});
			}
		});
		
		$(window).on("keypress", function(event){
		    function handleKeyPress(event){
			 var keycode = (event.keyCOde ? event.keyCOde : event.which);
			 log("Key pressed was " + String.fromCharCode(keycode));
			}
			});
		
		function updateScreen(){
        $screen.css({'width':window.innerWidth, 'height':       window.innerHeight});
        }
        
		function init(){
		 $body.append("<div class=bat></div>");
		 $(".bat").animateSprite({
		 fps: 5,
		 animations: {
		 walkRight: [0,1,2,3,4,5],
         walkLeft: [0,1,2,3,4,5]
		 },
		 loop: true
		 });
		 
		 $(".bat").animateSprite('play', 'walkRight');
		 
		 $('.terrain img').clone().appendTo(".terrain");
		 
		 function scrollStart(){
		  TweenMax.tp($(".terrain"), 35,
		  {
		  x: "-2400px",
		  ease: Linear.easeNone,
		  repeat: -1
		  }
		  );
		 }
		}
    });
	
	</script>



</body>



My code and spritesheet can also be found on my GitHub repo for the game: https://github.com/h.../Endless-Runner

Is This A Good Question/Topic? 0
  • +

Replies To: Sprite Not Showing Up in Game

#2 andrewsw   User is offline

  • awks lol ffs
  • member icon

Reputation: 6697
  • View blog
  • Posts: 27,502
  • Joined: 12-December 12

Re: Sprite Not Showing Up in Game

Posted 06 February 2017 - 08:45 PM

Are there errors in your browser's console?
Keycode has the wrong casing.

There is also no such element as 'container'.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1