HTML5 and Script- Multiple 'Classes'

[Jspham]

Hello! I'm really confused and unfamiliar with HTML5. Some term often used in Java for a community I was a part of was 'handler'. Basically, I have one file from a tutorial thus far.

I'd like to split it into seperate files so its more managable. Sort of a 'Main' class and then random data tidbits.

First, I'd like to seperate out the 'Mapping' stuff into it's own 'class' and only haveit referenced within the Main. (Main being the canvas, and referencing the map loading, etc.)

Second, I'd like to load the whole [1,2,1,2] type stuff each on a seperate file. Like 1.dat, housing the map array info whatever. How could I pull that off. Would that be too slow? Perhaps is there a faster way of loading mapdata?

<style>
canvas {
  width: 480px;
  height: 240px;
  border: 1px solid #aaa;
  margin: 50px auto 0;
  display: block;
  box-shadow: 0 0 50px #aaa;
}
</style>
<canvas width="480" height="240">

<script>
/*********************
 * The tile class
 *********************/
var Tile = function(x, y, w, h, src, uvx, uvy){
  this.w = w;
  this.h = h;
  this.x = x;
  this.y = y;
  this.src = src;
  this.uv = [uvx, uvy];
};

/*********************
 * Loop through each time and draw it
 *********************/
function drawIt(ctx, world){

for (var y = 0, lenY = world.length; y < lenY; y++)
  for (var x = 0, lenX = world[0].length; x < lenX; x++)
    ctx.drawImage(world[y][x].src, 
                  world[y][x].uv[0], 
                  world[y][x].uv[1], 
                  world[y][x].w, 
                  world[y][x].h,
                  world[y][x].x,
                  world[y][x].y,
                  world[y][x].w,
                  world[y][x].h);
}

/*********************
 *
 *********************/
function main(){

var canvas = document.querySelector("canvas");
canvas.width = 480;
canvas.height = 240;

var ctx = canvas.getContext("2d");

var mapBluePrint = [
[12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6],
[12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6],
[12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6],
[12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6],
[12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6],
[12, 6, 12, 6, 12, 6, 12, 6,  0, 7,  1, 7,  2, 7, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6],
[12, 6, 12, 6, 12, 6, 12, 6,  0, 8,  1, 8,  2, 8, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6],
[12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6,  0, 0, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6],
[12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6,  0, 0,  0, 0, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6],
[12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6,  0, 0,  0, 0,  0, 0, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6],
[12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6,  0, 0,  0, 0,  0, 0,  0, 0, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6],
[12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6, 12, 6],
[ 0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0, 12, 6, 12, 6,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0],
[ 0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0, 12, 6, 12, 6,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0],
[ 0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0, 12, 6, 12, 6,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0,  0, 0]
];

var world = [];

var sprite = new Image();
sprite.onload = function(){
  drawIt(ctx, world);
};

for (var y = 0, lenY = mapBluePrint.length; y < lenY; y++){
  world[y] = [];
  for (var x = 0, lenX = mapBluePrint[0].length; x < lenX; x += 2)     world[y].push(new Tile(x * 0.5 * 16, y * 16, 16, 16, sprite, mapBluePrint[y][x] * 16, mapBluePrint[y][x + 1] * 16)); } sprite.src = "src/mario-8-bit-sprites.png"; } (function(){main();})(); </script>

[LastMitch]

Hello! I'm really confused and unfamiliar with HTML5. Some term often used in Java for a community I was a part of was 'handler'. Basically, I have one file from a tutorial thus far.

The code you provide is incomplete and I'm having issue understanding your code.

If you are using HTML5 and want to combine HTML5 and java then read these links and also try the example:

http://modernizr.com/docs/

http://davidwalsh.name/classlist

http://www.script-tutorials.com/creating-a-html5-css3-single-page-template/