bleucitron/ReadMe.md

## ReadMe.md

      
    Raw
  

              ReadMe.md
            
          
    Scratch.js API
var david = new Lutin("https://avatars1.githubusercontent.com/u/165829?v=3&s=460");
var romain = new Lutin("https://avatars2.githubusercontent.com/u/8417814?v=3&s=400");

david.positionner(200, 100);

david.avancer(100); 

david.orienter(90); 
david.dire('je suis un texte');

david.quand_collision(personnage, function(){
  personnage.cacher();
  personnage.envoyer(david, 'message');
});

david.quand_touche('droite', function(){
    david.orienter(0);
    david.avancer(10);
});

david.quand_message_reçu('message', function(){
    david.dire("j'ai compris");
});


david.cacher();
david.montrer();

            
for(var i = 0 ; i < 5 ; i++){
  david.dire(i)
}


## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name='viewport' content='initial-scale=1' />

        <style>
            [hidden]{
                display: none !important;
            }

            html, body{
                margin: 0;
                padding: 0;

                width: 100%;
                height: 100%;
            }

            body{
                display: flex;
                align-items: center;
                justify-content: center;

                background-color: beige;
            }

            #scene{
                height: 400px;
                width: 400px;

                position: relative;

                background: white;
            }

            #scene .lutin{
                position: absolute;
                top: 0;
                left: 0;
                width: 100px;
                height: 100px;
                background-size: cover;
            }

            #scene .lutin[data-text]::before{
                content: attr(data-text);
                border-radius: 2em;
                border: 5px solid #EEE;
                padding: 1em;
                font-size: 10px;

                background: white;

                white-space: nowrap;

                position: absolute;
                transform: translateY(-50%) translateX(50%);
                z-index: 1;
            }

        </style>


        <title> Scratch.js </title>


    </head>

    <body>
        <div id='scene'></div>

        <script src="scratch.js"> </script>

        <script>
            var david = new Lutin("https://avatars1.githubusercontent.com/u/165829?v=3&s=460");
            var romain = new Lutin("https://avatars2.githubusercontent.com/u/8417814?v=3&s=400");

            david.avancer(100);

            david.avancer(50);
            david.dire('on est pas énervés !');

            david.quand_collision(romain, function(){
                romain.dire('you touch my tralala');
                romain.envoyer(david, 'blabla');
            });


            david.quand_touche('droite', function(){
                david.orienter(0);
                david.avancer(10);
            });
            david.quand_touche('haut', function(){
                david.orienter(90);
                david.avancer(10);
            });
            david.quand_touche('bas', function(){
                david.orienter(-90);
                david.avancer(10);
            });
            david.quand_touche('gauche', function(){
                david.orienter(180);
                david.avancer(10);
            });

            david.quand_message_reçu('blabla', function(){
                setTimeout(function(){
                    david.dire('hein ?');
                }, 2000);
            });


            //david.cacher();

            /*david.quand_clic(function(){})

            david.quand_recoit(function(){})

            david.cacher();
            david.montrer();*/

        </script>
    </body>
</html>

## scratch.js
"use strict";

var scene = document.getElementById('scene');

var directionToKeyCode = {
    'gauche': 37,
    'haut': 38,
    'droite': 39,
    'bas': 40
};

function areColliding(object1, object2){
    var element1 = object1.element;
    var element2 = object2.element;

    var width1 = element1.getBoundingClientRect().width;
    var width2 = element2.getBoundingClientRect().width;
    var height1 = element1.getBoundingClientRect().height;
    var height2 = element2.getBoundingClientRect().height;

    var center1 = {
        x: parseInt(element1.style.left) + width1/2,
        y: parseInt(element1.style.top) + height1/2
    };

    var center2 = {
        x: parseInt(element2.style.left) + width2/2,
        y: parseInt(element2.style.top) + height2/2
    };;

    var distance = Math.sqrt(Math.pow(center1.x - center2.x, 2) + Math.pow(center1.y - center2.y, 2));

    console.log(distance, (width1 + width2) / 2);
    return (distance <= (width1 + width2) / 2);
}

var allCollisionsListeners = [];


function Lutin(url) {
    var element = document.createElement('div');

    element.classList.add('lutin');
    element.style.backgroundImage = 'url('+url+')';
    element.style.top = element.style.left = 0;

    scene.appendChild(element);


    var orientation = 0;

    var messageListeners = {};

    element.addEventListener('message', function(e){
        var msg = e.detail.message;
        if(messageListeners[msg])
            messageListeners[msg]();
        else{
            console.warn('No event listener registered for event', msg);
        }
    });

    return {
        element: element,
        avancer: function (nbPixels) {
            var x = Math.cos(orientation * Math.PI / 180) * nbPixels;
            var y = Math.sin(orientation * Math.PI / 180) * nbPixels;

            element.style.top = parseInt(element.style.top) - y + 'px';
            element.style.left = parseInt(element.style.left) + x + 'px';

            var self = this;

            allCollisionsListeners
                .filter(function(triplet){
                    return (triplet.object1 === self || triplet.object2 === self) && areColliding(triplet.object1, triplet.object2);
                })
                .forEach(function(triplet){
                    setTimeout(triplet.listener, 0);
                });
        },

        positionner: function (x, y){
            element.style.top = y + 'px';
            element.style.left = x + 'px';
        },

        orienter: function (angle) {
            orientation = angle;
            //element.style.transform = 'rotate('+orientation+'deg)';
        },

        dire: function(text){
            element.setAttribute('data-text', text);
        },

        cacher: function(){
            element.setAttribute('hidden', '');
        },
        montrer: function(){
            element.removeAttribute('hidden');
        },

        quand_collision: function(autre, listener){
            allCollisionsListeners.push({
                object1: this,
                object2: autre,
                listener: listener
            });
        },

        quand_touche: function(direction, listener){
            document.addEventListener('keydown', function(e){
                console.log(e.keyCode);
                if (directionToKeyCode[direction] === e.keyCode)
                    listener();
            });
        },

        quand_message_reçu: function(msg, listener){
            messageListeners[msg] = listener;
        },

        envoyer: function(autre, msg){
            autre.element.dispatchEvent(new CustomEvent("message", {
              detail: {
                message: msg
              }
            }));
        }
    };

}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name='viewport' content='initial-scale=1' />

	<style>
	[hidden]{
	display: none !important;
	}

	html, body{
	margin: 0;
	padding: 0;

	width: 100%;
	height: 100%;
	}

	body{
	display: flex;
	align-items: center;
	justify-content: center;

	background-color: beige;
	}

	#scene{
	height: 400px;
	width: 400px;

	position: relative;

	background: white;
	}

	#scene .lutin{
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 100px;
	background-size: cover;
	}

	#scene .lutin[data-text]::before{
	content: attr(data-text);
	border-radius: 2em;
	border: 5px solid #EEE;
	padding: 1em;
	font-size: 10px;

	background: white;

	white-space: nowrap;

	position: absolute;
	transform: translateY(-50%) translateX(50%);
	z-index: 1;
	}

	</style>



	<title> Scratch.js </title>


	</head>

	<body>
	<div id='scene'></div>

	<script src="scratch.js"> </script>

	<script>
	var david = new Lutin("https://avatars1.githubusercontent.com/u/165829?v=3&s=460");
	var romain = new Lutin("https://avatars2.githubusercontent.com/u/8417814?v=3&s=400");

	david.avancer(100);

	david.avancer(50);
	david.dire('on est pas énervés !');

	david.quand_collision(romain, function(){
	romain.dire('you touch my tralala');
	romain.envoyer(david, 'blabla');
	});


	david.quand_touche('droite', function(){
	david.orienter(0);
	david.avancer(10);
	});
	david.quand_touche('haut', function(){
	david.orienter(90);
	david.avancer(10);
	});
	david.quand_touche('bas', function(){
	david.orienter(-90);
	david.avancer(10);
	});
	david.quand_touche('gauche', function(){
	david.orienter(180);
	david.avancer(10);
	});

	david.quand_message_reçu('blabla', function(){
	setTimeout(function(){
	david.dire('hein ?');
	}, 2000);
	});


	//david.cacher();

	/*david.quand_clic(function(){})

	david.quand_recoit(function(){})

	david.cacher();
	david.montrer();*/

	</script>
	</body>
	</html>
	"use strict";

	var scene = document.getElementById('scene');

	var directionToKeyCode = {
	'gauche': 37,
	'haut': 38,
	'droite': 39,
	'bas': 40
	};

	function areColliding(object1, object2){
	var element1 = object1.element;
	var element2 = object2.element;

	var width1 = element1.getBoundingClientRect().width;
	var width2 = element2.getBoundingClientRect().width;
	var height1 = element1.getBoundingClientRect().height;
	var height2 = element2.getBoundingClientRect().height;

	var center1 = {
	x: parseInt(element1.style.left) + width1/2,
	y: parseInt(element1.style.top) + height1/2
	};

	var center2 = {
	x: parseInt(element2.style.left) + width2/2,
	y: parseInt(element2.style.top) + height2/2
	};;

	var distance = Math.sqrt(Math.pow(center1.x - center2.x, 2) + Math.pow(center1.y - center2.y, 2));

	console.log(distance, (width1 + width2) / 2);
	return (distance <= (width1 + width2) / 2);
	}

	var allCollisionsListeners = [];


	function Lutin(url) {
	var element = document.createElement('div');

	element.classList.add('lutin');
	element.style.backgroundImage = 'url('+url+')';
	element.style.top = element.style.left = 0;

	scene.appendChild(element);


	var orientation = 0;

	var messageListeners = {};

	element.addEventListener('message', function(e){
	var msg = e.detail.message;
	if(messageListeners[msg])
	messageListeners[msg]();
	else{
	console.warn('No event listener registered for event', msg);
	}
	});

	return {
	element: element,
	avancer: function (nbPixels) {
	var x = Math.cos(orientation * Math.PI / 180) * nbPixels;
	var y = Math.sin(orientation * Math.PI / 180) * nbPixels;

	element.style.top = parseInt(element.style.top) - y + 'px';
	element.style.left = parseInt(element.style.left) + x + 'px';

	var self = this;

	allCollisionsListeners
	.filter(function(triplet){
	return (triplet.object1 === self \|\| triplet.object2 === self) && areColliding(triplet.object1, triplet.object2);
	})
	.forEach(function(triplet){
	setTimeout(triplet.listener, 0);
	});
	},

	positionner: function (x, y){
	element.style.top = y + 'px';
	element.style.left = x + 'px';
	},

	orienter: function (angle) {
	orientation = angle;
	//element.style.transform = 'rotate('+orientation+'deg)';
	},

	dire: function(text){
	element.setAttribute('data-text', text);
	},

	cacher: function(){
	element.setAttribute('hidden', '');
	},
	montrer: function(){
	element.removeAttribute('hidden');
	},

	quand_collision: function(autre, listener){
	allCollisionsListeners.push({
	object1: this,
	object2: autre,
	listener: listener
	});
	},

	quand_touche: function(direction, listener){
	document.addEventListener('keydown', function(e){
	console.log(e.keyCode);
	if (directionToKeyCode[direction] === e.keyCode)
	listener();
	});
	},

	quand_message_reçu: function(msg, listener){
	messageListeners[msg] = listener;
	},

	envoyer: function(autre, msg){
	autre.element.dispatchEvent(new CustomEvent("message", {
	detail: {
	message: msg
	}
	}));
	}
	};

	}