HTML5 Game - Simple Cell-Based Sprite Animation , animated ships via images

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Image

Description

Simple Cell-Based Sprite Animation , animated ships via images

Demo

ResultView the demo in separate window 

<!DOCTYPE html>  
<html> 
<head> 
<style> 
#canvas { //from w ww.  j a  v  a  2 s . c  o m
  border:1px solid #03F; 
  background:#CFC; 
} 
</style> 
</head> 
<body> 
<p>Here is the sprite image:
<img src='http://java2s.com/style/demo/ship1.png' />
</p>



<canvas id="canvas" width="640" height="480"></canvas> 
<script> 

  let context = document.getElementById('canvas').getContext('2d'); 

    let counter=0;
  let tileSheet=new Image();
  tileSheet.addEventListener('load', eventSheetLoaded , false);
  tileSheet.src="http://java2s.com/style/demo/ship1.png";
  
  
  function eventSheetLoaded() {
    startUp();
  }
  

  function drawScreen() {
     
     //draw a background so we can wee the Canvas edges
     context.fillStyle="#aaaaaa";
     context.fillRect(0,0,500,500);
     context.drawImage(tileSheet, 32*counter, 0,32,32,50,50,32,32);
         counter++;
         if (counter >1) {
            counter=0;
         }
  }
    
    function startUp(){
        gameLoop();
    }
    
  function gameLoop() {
    window.setTimeout(gameLoop, 100);
    drawScreen()    
    }



</script> 



</body> 
</html>

Related Topic