Samielleuch · March 22, 2019 03:00
diff --git a/SuperMarioProject_.idea_encodings.xml b/SuperMarioProject_.idea_encodings.xml
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
  <component name="Encoding" addBOMForNewFiles="with NO BOM" />
 </project>
diff --git a/SuperMarioProject_.idea_misc.xml b/SuperMarioProject_.idea_misc.xml
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
  <component name="JavaScriptSettings">
    <option name="languageLevel" value="ES6" />
  </component>
 </project>
diff --git a/SuperMarioProject_.idea_modules.xml b/SuperMarioProject_.idea_modules.xml
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
  <component name="ProjectModuleManager">
    <modules>
      <module fileurl="file://$PROJECT_DIR$/.idea/SuperMarioProject.iml" filepath="$PROJECT_DIR$/.idea/SuperMarioProject.iml" />
    </modules>
  </component>
 </project>
diff --git a/SuperMarioProject_.idea_SuperMarioProject.iml b/SuperMarioProject_.idea_SuperMarioProject.iml
 <?xml version="1.0" encoding="UTF-8"?>
 <module type="WEB_MODULE" version="4">
  <component name="NewModuleRootManager">
    <content url="file://$MODULE_DIR$">
      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
      <excludeFolder url="file://$MODULE_DIR$/temp" />
      <excludeFolder url="file://$MODULE_DIR$/tmp" />
    </content>
    <orderEntry type="inheritedJdk" />
    <orderEntry type="sourceFolder" forTests="false" />
  </component>
 </module>
diff --git a/SuperMarioProject_index.html b/SuperMarioProject_index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>SuperMarioGame</title>
 </head>
 <body>
 <h1>this is cool game bois</h1>
 <canvas id='Screen' width="640" height="640"></canvas>
 </body>
 <script src="./js/main.js" type="module"></script>
 </html>
diff --git a/SuperMarioProject_js_loader.js b/SuperMarioProject_js_loader.js
 export function loadImage(url) {
    return new Promise( resolve => {
        let image = new Image();

        image.addEventListener('load' , () => {
            resolve(image);
        });

        image.src = url;

    });
 }

 export function loadlevel(name){
    return fetch("./levels/"+name+".json")
        .then(r => r.json());


 }
diff --git a/SuperMarioProject_js_main.js b/SuperMarioProject_js_main.js
 import SpriteSheet from './SpriteSheet.js';
 import { loadImage } from './loader.js';
 import {loadlevel} from "./loader.js";

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

 function drawBackground(background , context , sprites) {
    background.ranges.forEach(([x1,x2,y1,y2])=>{
        for(let x=x1;x<x2;x++){
            for (let y=y1;y<y2;y++){
                sprites.drawTile(background.tile,context,x,y);
            }
        }
    });
 }

 function loadBackgroundSprites() {
     return loadImage('./img/tile.png')
         .then(image => {

             let sprites = new SpriteSheet(image, 16, 16);
             sprites.define('ground', 0, 0);
             sprites.define('sky', 3, 23);
             return sprites
         });
 }
 function loadMarioSprite() {
     return loadImage('./img/characters.gif')
         .then(image => {

             let sprites = new SpriteSheet(image, 16, 16);
             sprites.define('idle', 15, 2);
             return sprites
         });
 }

 Promise.all([
     loadBackgroundSprites(),
     loadlevel('1-1'),
     loadMarioSprite()
 ]).then(([sprites,Level,mario])=> {
     Level.background.forEach(background => {

         drawBackground(background,context,sprites);

     });
     mario.draw('idle',context,64,64);

 });

diff --git a/SuperMarioProject_js_SpriteSheet.js b/SuperMarioProject_js_SpriteSheet.js
 export default class SpriteSheet{

    constructor(image , width, height) {
        this.image = image;
        this.width = width;
        this.height = height;
        this.tiles =new Map();
    }
    define(name,x,y) {
        const buffer = document.createElement('canvas');
        buffer.width=this.width;
        buffer.height=this.height;
        buffer
            .getContext('2d')
            .drawImage(
                this.image,
                x*this.width,
                y*this.height,
                this.width,
                this.height,
                0,
                0,
                this.width,
                this.height
            );
        this.tiles.set(name,buffer);
        // draw to the virtual canvas
    }

    draw(name,context,x,y) {

        let buffer = this.tiles.get(name);
        context.drawImage(buffer,x,y);
        // draw the virtual canvas to the actual canvas
    }
    drawTile(name,context,x,y){
        this.draw(name,context,x*this.width,y*this.height);
    }

 }
diff --git a/SuperMarioProject_levels_1-1.json b/SuperMarioProject_levels_1-1.json
 {
  "background" : [
    {
       "tile": "sky" ,
      "ranges": [
        [
          0,25 ,
          0,14
        ]
      ]
    } ,
    {
       "tile": "ground" ,
      "ranges": [
        [
          0,25 ,
          12,14
        ]
      ]
    }
  ]
 }
	<?xml version="1.0" encoding="UTF-8"?>
	<project version="4">
	<component name="Encoding" addBOMForNewFiles="with NO BOM" />
	</project>
	<?xml version="1.0" encoding="UTF-8"?>
	<project version="4">
	<component name="JavaScriptSettings">
	<option name="languageLevel" value="ES6" />
	</component>
	</project>
	<?xml version="1.0" encoding="UTF-8"?>
	<project version="4">
	<component name="ProjectModuleManager">
	<modules>
	<module fileurl="file://$PROJECT_DIR$/.idea/SuperMarioProject.iml" filepath="$PROJECT_DIR$/.idea/SuperMarioProject.iml" />
	</modules>
	</component>
	</project>
	<?xml version="1.0" encoding="UTF-8"?>
	<module type="WEB_MODULE" version="4">
	<component name="NewModuleRootManager">
	<content url="file://$MODULE_DIR$">
	<excludeFolder url="file://$MODULE_DIR$/.tmp" />
	<excludeFolder url="file://$MODULE_DIR$/temp" />
	<excludeFolder url="file://$MODULE_DIR$/tmp" />
	</content>
	<orderEntry type="inheritedJdk" />
	<orderEntry type="sourceFolder" forTests="false" />
	</component>
	</module>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>SuperMarioGame</title>
	</head>
	<body>
	<h1>this is cool game bois</h1>
	<canvas id='Screen' width="640" height="640"></canvas>
	</body>
	<script src="./js/main.js" type="module"></script>
	</html>
	export function loadImage(url) {
	return new Promise( resolve => {
	let image = new Image();

	image.addEventListener('load' , () => {
	resolve(image);
	});

	image.src = url;

	});
	}

	export function loadlevel(name){
	return fetch("./levels/"+name+".json")
	.then(r => r.json());


	}
	import SpriteSheet from './SpriteSheet.js';
	import { loadImage } from './loader.js';
	import {loadlevel} from "./loader.js";

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

	function drawBackground(background , context , sprites) {
	background.ranges.forEach(([x1,x2,y1,y2])=>{
	for(let x=x1;x<x2;x++){
	for (let y=y1;y<y2;y++){
	sprites.drawTile(background.tile,context,x,y);
	}
	}
	});
	}

	function loadBackgroundSprites() {
	return loadImage('./img/tile.png')
	.then(image => {

	let sprites = new SpriteSheet(image, 16, 16);
	sprites.define('ground', 0, 0);
	sprites.define('sky', 3, 23);
	return sprites
	});
	}
	function loadMarioSprite() {
	return loadImage('./img/characters.gif')
	.then(image => {

	let sprites = new SpriteSheet(image, 16, 16);
	sprites.define('idle', 15, 2);
	return sprites
	});
	}

	Promise.all([
	loadBackgroundSprites(),
	loadlevel('1-1'),
	loadMarioSprite()
	]).then(([sprites,Level,mario])=> {
	Level.background.forEach(background => {

	drawBackground(background,context,sprites);

	});
	mario.draw('idle',context,64,64);

	});
	export default class SpriteSheet{

	constructor(image , width, height) {
	this.image = image;
	this.width = width;
	this.height = height;
	this.tiles =new Map();
	}
	define(name,x,y) {
	const buffer = document.createElement('canvas');
	buffer.width=this.width;
	buffer.height=this.height;
	buffer
	.getContext('2d')
	.drawImage(
	this.image,
	x*this.width,
	y*this.height,
	this.width,
	this.height,
	0,
	0,
	this.width,
	this.height
	);
	this.tiles.set(name,buffer);
	// draw to the virtual canvas
	}

	draw(name,context,x,y) {

	let buffer = this.tiles.get(name);
	context.drawImage(buffer,x,y);
	// draw the virtual canvas to the actual canvas
	}
	drawTile(name,context,x,y){
	this.draw(name,context,xthis.width,ythis.height);
	}

	}
	{
	"background" : [
	{
	"tile": "sky" ,
	"ranges": [
	[
	0,25 ,
	0,14
	]
	]
	} ,
	{
	"tile": "ground" ,
	"ranges": [
	[
	0,25 ,
	12,14
	]
	]
	}
	]
	}