Skip to content

Instantly share code, notes, and snippets.

@DavidBruant

DavidBruant/ReadMe.md

Last active August 29, 2015 14:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DavidBruant/8babcd9c38bcddbc4b27 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DavidBruant/8babcd9c38bcddbc4b27 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. DavidBruant revised this gist Apr 16, 2015. 2 changed files with 168 additions and 22 deletions.
    112 changes: 112 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,112 @@
    <!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%);
    }

    </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.orienter(-45);

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

    /*david.quand_collision(romain, function(){
    david.dire('Yo !')
    });
    */

    david.quand_touche('droite', function(){
    david.avancer(10);
    });
    david.quand_touche('haut', function(){
    david.avancer(10);
    });
    david.quand_touche('bas', function(){
    david.avancer(10);
    });
    david.quand_touche('gauche', function(){
    david.avancer(10);
    });

    /*david.quand_clic(function(){})
    david.quand_recoit(function(){})
    david.cacher();
    david.montrer();*/

    </script>
    </body>
    </html>
    78 changes: 56 additions & 22 deletions scratch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,27 +1,61 @@
    document.body.style.backgroundColor = "purple";
    "use strict";

    function Lutin(url){
    var element = document.createElement('img');
    element.classList.add('lutin');
    element.src = url;

    var orientation = 0;

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

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

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

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

    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);


    orienter: function(angle){

    }
    };
    var orientation = 0;

    }
    return {
    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';
    },

    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){

    },

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

    }
  2. DavidBruant revised this gist Apr 16, 2015. 1 changed file with 25 additions and 1 deletion.
    26 changes: 25 additions & 1 deletion scratch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,27 @@
    document.body.style.backgroundColor = "purple";

    function Character(){}
    function Lutin(url){
    var element = document.createElement('img');
    element.classList.add('lutin');
    element.src = url;

    var orientation = 0;

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

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

    },

    orienter: function(angle){

    }
    };

    }


  3. DavidBruant revised this gist Apr 16, 2015. 1 changed file with 8 additions and 1 deletion.
    9 changes: 8 additions & 1 deletion ReadMe.md
    View file
    Original file line number Diff line number Diff line change
    @@ -8,8 +8,15 @@ david.dire('on est pas énervés !');


    david.quand_touche(autre, function(){

    })

    david.quand_clic(function(){})

    david.quand_recoit(function(){})

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

    ```


  4. DavidBruant revised this gist Apr 16, 2015. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion ReadMe.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    **Scratch.js API**

    ```js
    var david = new Lutin(url);
    david.avancer(20);
    david.orienter(90);
    @@ -9,7 +10,7 @@ david.dire('on est pas énervés !');
    david.quand_touche(autre, function(){

    })

    ```



  5. DavidBruant revised this gist Apr 16, 2015. 1 changed file with 18 additions and 0 deletions.
    18 changes: 18 additions & 0 deletions ReadMe.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    **Scratch.js API**

    var david = new Lutin(url);
    david.avancer(20);
    david.orienter(90);
    david.dire('on est pas énervés !');


    david.quand_touche(autre, function(){

    })







  6. DavidBruant revised this gist Apr 16, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion scratch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,3 @@
    document.body.style.backgroundColor = "indianred";
    document.body.style.backgroundColor = "purple";

    function Character(){}
  7. DavidBruant revised this gist Apr 16, 2015. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion scratch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,3 @@
    document.body.style.backgroundColor = "indianred";
    document.body.style.backgroundColor = "indianred";

    function Character(){}
  8. DavidBruant created this gist Apr 16, 2015.
    1 change: 1 addition & 0 deletions scratch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    document.body.style.backgroundColor = "indianred";