Gamedev Canvas Workshop - lesson 4

Paddle and keyboard controls.

by maplol

HTML

<canvas id="c"></canvas><br>

JavaScript

let
    ctx = c.getContext("2d"),
    scrollX     = 2,
    scrollY     = 2,
    scale       = 1,
    scaleFactor = 0.05;
    c.width = 500;
    c.height = 500;
    
///////////////////////////////Само построение графика, которое лагает

ctx.translate(c.width/scrollX, c.height/scrollY);

function render(){
    ctx.clearRect(-c.width*50000,-c.height*50000, c.width*100000,c.height*100000);
    let
        ram=scale,
        sizesx = 10/scale + "pt";
    if(scale <= 0.2) {
        ram = 10000;
    }else if(scale <= 0.3){
        ram = 1000;
    }else if (scale <= 0.5) {
        ram = 500;
    }else if (scale <= 1){
        ram = 100;
    }else if (scale <= 2){
        ram = 50;
    }else if (scale <= 3){
        ram = 10;
    }else if (scale <= 4){
        ram = 5;
    }else if (scale <= 6){
        ram = 2;
    }else if (scale <= 8){
        ram = 1;
    }else if (scale <= 13){
        ram = 0.5;
    }else {
        ram = 0.2;
    }
    // главные оси
    ctx.strokeStyle = "#00a1ff";
    ctx.lineWidth = 3/scale;
    ctx.beginPath();
        ctx.moveTo(-0.001*scale, -c.width*100);
        ctx.lineTo(-0.001*scale, c.width*100);
        ctx.moveTo(-c.height*100, -0.001*scale);
        ctx.lineTo(c.height*100, -0.001*scale);
    ctx.stroke();

 

    //cетка
    ctx.strokeStyle = "rgba(0,0,0,0.4)";
    ctx.lineWidth = 0.5/scale;
    ctx.beginPath();
    for (xs = -25000; xs <= 25000; xs ++ ) {
        ctx.moveTo(xs*ram*scale  , -c.width*100);
        ctx.lineTo(xs*ram*scale  , c.width*100);
        ctx.moveTo(-c.height*100 , xs*ram*scale);
        ctx.lineTo(c.height*100 , xs*ram*scale);
    }
    ctx.stroke();

    ctx.strokeStyle = "rgba(0,0,0,0.58)";
    ctx.lineWidth = 1/scale;
    ctx.beginPath();
    for (xs = -25000; xs <= 25000; xs ++ ) {
        ctx.moveTo(xs*(ram*2)*scale , -c.width*100);
        ctx.lineTo(xs*(ram*2)*scale , c.width*100);
        ctx.moveTo(-c.height *100, xs*(ram*2)*scale);
        ctx.lineTo(c.height *100, xs*(ram*2)*scale);
    }
   ...