index test.html

<canvas id="sonic"></canvas>

<script>
    //Taille du Canvas
    let canvasWidth = 1200; 
    let canvasHeight = 600;
    //Taille du sprite
    let spriteWidth = 810; 
    let spriteHeight = 1080; 
    //Structure du sprite
    let rows = 9; 
    let cols = 9; 
    //Taille/structure Sprite
    let width = spriteWidth/cols;  
    let height = spriteHeight/rows; 
    //Premiere image
    let curFrame = 0; 
    //Total images
    let frameCount = 9; 
    //Coordonées sprite
    let x=400;
    let y=350; 
    //x and y coordinates of the canvas to get the single frame 
    let srcX= 0; 
    let srcY= 0; 
    
    //Coordonnées background
    let bX = 0;
    let bY = 1080;
    let tBX = bX;
    let tBY = bY;
    
    //sensibilité du saut
    let oneJump = true;
    let canvas = document.getElementById('sonic');
    
    //Propriété du Canvas
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    let background = new Image();
    background.src = "./images/maptest.png";
    
    let ctx = canvas.getContext("2d");
    
    //Creation de Sonic
    let sonic = new Image(); 
    sonic.src = "./images/sonic.png";
    
    //Sprite Ring
    let ring = new Image();
    ring.src = "./images/ring.png";
    let collisionRing = true;
    let ringSound;
    
    let ringWidth = 1020; 
    let ringHeight = 65; 
    let ringRows = 1; 
    let ringCols = 16; 
    let rWidth = ringWidth/ringCols;  
    let rHeight = ringHeight/ringRows; 
    let ringCurFrame = 0; 
    let ringFrameCount = 16; 
    let ringX=1200;
    let ringY=370; 
    let ringSrcX= 0; 
    let ringSrcY= 0; 
    
    //Sprite DR.Robotnik
    let robotnik = new Image();
    robotnik.src = "./images/dr-robotnik1.png"; 
    
    let robotnikWidth = 1320; 
    let robotnikHeight = 170; 
    let robotnikRows = 1; 
    let robotnikCols = 6; 
    let rkWidth = robotnikWidth/robotnikCols;  
    let rkHeight = robotnikHeight/robotnikRows; 
    let robotnikCurFrame = 0; 
    let robotnikFrameCount = 6; 
    let robotnikX=900;
    let robotnikY=200; 
    let robotnikSrcX= 0; 
    let robotnikSrcY= 90;
    let posRobotnik = true
    let toursRobotnik = 0;

    
    function updateFrame(){
        //Rafraichissement 
        curFrame = ++curFrame % frameCount; 
        //Calcul coordonnées du sprite
        srcX = curFrame * width; 
        ctx.clearRect(x,y,width,height);
        
        robotnikCurFrame = ++robotnikCurFrame % robotnikFrameCount;
        robotnikSrcX = robotnikCurFrame * rkWidth;
        ctx.clearRect(robotnikX,robotnikY,rkWidth,rkHeight);
        
        ringCurFrame = ++ringCurFrame % ringFrameCount;
        ringSrcX = ringCurFrame * rWidth;
        ctx.clearRect(ringX,ringY,rWidth,rHeight);
    }
    
    //Controls 
    //(delay saut retour position initiale)
    let initRight = true;
    let initLeft = false;
    
    let keyState = {};    
    document.addEventListener('keydown',function(e){
        keyState[e.keyCode || e.which] = true;
    },true);    
    document.addEventListener('keyup',function(e){
        keyState[e.keyCode || e.which] = false;
        oneJump = true;
        if(initRight){
            initDroit();
        } else { initGauche(); }
    },true);
    
    function gameLoop() {
        //Collision rings
        if((x+50) == ringX && collisionRing || (x+50)> ringX &&collisionRing ){
            collisionRing = false;
            ringSound = new Audio('./sounds/ring.mp3');
            ringSound.play();
        }
        //Control droit
        if (keyState[39] || keyState[68]){
            bX += 2;
            ringX -=2;
            initRight = true;
            initLeft = false;
            droite();
        }
        if (keyState[39]&& keyState[16] || keyState[68] && keyState[16]){
            bX += 3;
            ringX -=3;
            initRight = true;
            initLeft = false;
            courirDroit();
        }
        //Control gauche
        if (keyState[37] || keyState[65]){
            bX -= 2;
            ringX +=2;
            initRight = false;
            initLeft = true;
            gauche();
        }
        if (keyState[37]&& keyState[16] || keyState[65] && keyState[16]){
            bX -= 3;
            ringX +=3;
            initRight = false;
            initLeft = true;
            courirGauche();
        }    
        //Control Boule
        if (keyState[83] || keyState[40]){
            boule();
            if (keyState[39]&& keyState[16] || keyState[68] && keyState[16]){
                bX += 3;
                ringX -=3;
                bouleRapideDroit();
            }
            if (keyState[37]&& keyState[16] || keyState[65] && keyState[16]){
                bX -= 3;
                ringX +=3;
                bouleRapideGauche();
            }
        }
        //Control Saut
        if (keyState[32]){
            while(oneJump){
                oneJump = false;
                if(initRight){
                    sautDroit();
                    animSaut();
                } else { 
                    sautGauche();
                    animSaut();
                }
            }
        }
        
        if (keyState[32] && keyState[68] || keyState[32] && keyState[39]){
            while(oneJump){
                oneJump = false;
                sautDroit();
                animSaut();
            }
        }
        
        if (keyState[32] && keyState[65] || keyState[32] && keyState[37]){
            while(oneJump){
                oneJump = false;
                sautGauche();
                animSaut();
            }
        }
        
        setTimeout(gameLoop, 10);
    }    
    gameLoop();
    
    function draw(){
        //Rafraichissement
        updateFrame();
        ctx.drawImage(background,bX,0,1400,bY,0,-100,1200,800);
        
        animRobotnik();
        ctx.drawImage(robotnik,robotnikSrcX, robotnikSrcY,rkWidth,rkHeight,robotnikX,robotnikY,rkWidth,rkHeight);
        
        if(collisionRing){
            ctx.drawImage(ring,ringSrcX, ringSrcY,rWidth,rHeight,ringX,ringY,rWidth,rHeight);
        }
        
        let projection =  ctx.drawImage(sonic,srcX,srcY,width,height,x,y,width,height);
    }
    
    function initDroit(){
        rows = 9; 
        cols = 9; 
        y=350;
        spriteWidth = 810; 
        spriteHeight = 1080;
        width = spriteWidth/cols;  
        height = spriteHeight/rows;
        frameCount = 9;  
        srcX= 0; 
        srcY= 0;
    }
    
    function initGauche(){
        rows = 9; 
        cols = 6; 
        y=350;
        spriteWidth = 540; 
        spriteHeight = 1080;
        width = spriteWidth/cols;  
        height = spriteHeight/rows;
        frameCount = 6;  
        srcX= 0; 
        srcY= 715;
    }
    
    function droite(){
        rows = 9; 
        cols = 3;
        y=350;
        spriteWidth = 288; 
        spriteHeight = 1080; 
        width = spriteWidth/cols;  
        height = spriteHeight/rows; 
        frameCount = 3;
        srcX= 0; 
        srcY= 130;
    }
    
    function gauche(){
        rows = 9; 
        cols = 3;
        y=350;
        spriteWidth = 285; 
        spriteHeight = 1080; 
        width = spriteWidth/cols;  
        height = spriteHeight/rows; 
        frameCount = 3; 
        srcX= 0; 
        srcY= 590;
    }
    
    function boule(){
        rows = 9; 
        cols = 4;
        y=410;
        spriteWidth = 289; 
        spriteHeight = 600; 
        width = spriteWidth/cols;  
        height = spriteHeight/rows; 
        frameCount = 4; 
        srcX= 0; 
        srcY= 380;
    }
    
    function bouleRapideDroit(){
        rows = 9; 
        cols = 3;
        y=399;
        spriteWidth = 330; 
        spriteHeight = 630; 
        width = spriteWidth/cols;  
        height = spriteHeight/rows; 
        frameCount = 3;
        srcX= 0; 
        srcY= 980;
    }
    
    function bouleRapideGauche(){
        rows = 9; 
        cols = 3;
        y=399;
        spriteWidth = 330; 
        spriteHeight = 630; 
        width = spriteWidth/cols;  
        height = spriteHeight/rows; 
        frameCount = 3;
        srcX= 0; 
        srcY= 1065;
    }
    
    function courirDroit(){
        rows = 9; 
        cols = 4; 
        y=350;
        spriteWidth = 400; 
        spriteHeight = 1080;
        width = spriteWidth/cols;  
        height = spriteHeight/rows;
        frameCount = 4;  
        srcX= 0; 
        srcY= 258;
    }
    
    function courirGauche(){
        rows = 9; 
        cols = 4; 
        y=350;
        spriteWidth = 440; 
        spriteHeight = 1080;
        width = spriteWidth/cols;  
        height = spriteHeight/rows;
        frameCount = 4;  
        srcX= 0;
        srcY= 850; 
    }
    
    function sautDroit(){
        rows = 9; 
        cols = 5; 
        y=350;
        spriteWidth = 450; 
        spriteHeight = 1100;
        width = spriteWidth/cols;  
        height = spriteHeight/rows;
        frameCount = 4;  
        srcX= 0; 
        srcY= 456;
        setTimeout(initDroit,500);
    }
    
    function sautGauche(){
        rows = 9; 
        cols = 5; 
        y=350;
        spriteWidth = 450; 
        spriteHeight = 1070;
        width = spriteWidth/cols;  
        height = spriteHeight/rows;
        frameCount = 4;  
        srcX= 0; 
        srcY= 1157;
        setTimeout(initGauche,500);
    }
    
    function animSaut(){
        setTimeout(function(){
            bY-=100; ringY+=100
        },100)
        setTimeout(function(){
            bY-=50; ringY+=100
        },150)
        setTimeout(function(){
            bY-=50; ringY+=50
        },250)
        setTimeout(function(){
            bY+=50; ringY-=50
        },300)
        setTimeout(function(){
            bY+=100; ringY-=100
        },350)
        setTimeout(function(){
            bY+=50; ringY-=100
        },400)
    }
    
    function animRobotnik(){
        if(posRobotnik){
            robotnikSrcY= 90;
            toursRobotnik += 1;
            robotnikX -= 20;
            if(toursRobotnik >= 20){
                // robotnikTemp = robotnikX
                posRobotnik = false;
                toursRobotnik = 0;
                // robotnikX=robotnikTemp;
            }
        }
        else if (!posRobotnik) { 
            robotnikSrcY= 720;
            robotnikX += 20;
            toursRobotnik += 1;
            if(toursRobotnik>= 20){
                posRobotnik = true;
                toursRobotnik = 0;
            }
        }
    }
    
    setInterval(draw, 80);
    
    
</script>