I have a character who jumps on the block and quietly dismounts it, but he cannot jump on the block itself.br>
<! DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Jump</title>
</head>
<body>
<div>
<canvas id="fon" width="928" height="600"></canvas>
<canvas id="field" width="928" height="600">hi</canvas>
</div>
<script>
    const canvasFon=document.getElementById('fon');
    let ctxFon=canvasFon.getContext('2d');
    const canvas=document.getElementById('field');
    let ctx=canvas.getContext('2d');

    ctxFon.fillStyle='black';
    let secondLineX=250,
        thirdLineY=450,
        secondWidth=428;
    ctxFon.fillRect(secondLineX, thirdLineY, secondWidth, 25);

    function jack() {
        let sprite=new Image();
        sprite.src='https://www.emu-land.net/forum/index.php? action=dlattach;topic=77145.0;attach=175283;image';
        let tick_count=0,
            rightPressed=false, //definition of the buttons pressed, the initial value is false, since the buttons are not pressed
            leftPressed=false,
            jackWidth=34, //width, height
            jackHeight=89,
            sx=0,
            dx=100, //coordinates
            dy=canvas.height - jackHeight - 15,
            jumpPressed=false,
            jumpCount=0,
            jumpLength=75, //length of the jump horizontally
            jumpHeight=0;//jump height
        sprite.onload=function() {//drawing a standing Suzuki at boot, its standard state
            stayMan(dy);
        };

        function stayMan(y) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(sprite, 50, 178, 39, 89, dx, y, jackWidth, jackHeight);
        }

        function jumpMan() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(sprite, 0, 355, 57, 89, dx, dy - jumpHeight, 57, jackHeight);
        }

        function drawMan() {//drawing the boy while moving
            ctx.clearRect(0, 0, canvas.width, canvas.height);//clear canvas
            sx=(sx === 510? 0: sx + 34);//transfer to the beginning
            ctx.drawImage(sprite, sx, 0, 32, 89, dx, dy, jackWidth, jackHeight);//display the first sprite
        }

        function forKeydown(e) {
            if(e.keyCode === 32) jumpPressed=true;//space
            if(e.keyCode === 37) leftPressed=true;//left arrow
            if(e.keyCode === 39) rightPressed=true;//arrow right
        }

        function forKeyup(e) {
            if(e.keyCode === 37) {
                leftPressed=false;
                stayMan(dy);
            }
            if(e.keyCode === 39) {
                rightPressed=false;
                stayMan(dy);
            }
        }

        document.addEventListener('keydown', forKeydown, false);
        document.addEventListener('keyup', forKeyup, false);


        function moveMan() {
            if(rightPressed&&dx<canvas.width - jackWidth) {
                tick();
                dx +=4
            }
            if(leftPressed&&dx>0) {
                tick();
                dx -=4
            }
            if(jumpPressed) {
                jumpCount ++;
                jumpHeight=2 * jumpLength * Math.sin(Math.PI * jumpCount/jumpLength);//subtracted from dy, then the boy becomes higher
                jumpMan();
            }

            if((dx + 45<=secondLineX)) {
                dy=canvas.height - jackHeight - 15;
            }
            if((dx - 55 + jackWidth)>=(secondLineX + secondWidth)) {
                dy=canvas.height - jackHeight - 15;
            }
            //executes the jump to the block
            if((dy - jumpHeight + jackHeight<=thirdLineY)&((dx + 45>=secondLineX)&(dx - 45 + jackWidth)<=(secondLineX + secondWidth))) {
                if((dx + 45<=secondLineX)) {
                    dy=canvas.height - jackHeight - 15;
                }
                jumpCount=0;
                jumpPressed=false;
                jumpHeight=-75;
                dy=thirdLineY - jackHeight + 15;
                stayMan(thirdLineY - jackHeight + 15);
                console.log('hi');
            }

            if(jumpCount>jumpLength) {
                jumpCount=0;
                jumpPressed=false;
                jumpHeight=0;//nothing is taken away, it means it returns to its original position
                stayMan(dy);
            }
        }

        setInterval(moveMan, 10);

        function tick() {
            if(tick_count>10) {//number of rendered frames, effect on speed
                tick_count=0;
                drawMan(dy);
            }
            tick_count +=1;
        }
    }

    jack();
</script>
</body></html>

1 Answers 1

You consider the new coordinates from the initial ones, but you need to consider the new coordinates from the previous ones.

If your game becomes more complicated, it will help you a lot.For example, if there is a ceiling that you can hit on, the jump will be interrupted and a free fall will begin.

That is, you need simple physics(known to you from school) - speed and acceleration.At the time of the jump, there are only starting coordinates and vector speed.All.As acceleration, there is gravity(it always pulls down), plus you can allow user acceleration with the keyboard arrows, but you can not resolve it, it depends on the gameplay.

Thus, as for the block, at the moment of the jump there will be just other initial coordinates.The jump functions should not care what the coordinates are, it simply sets the velocity vector, if there is a surface from which to push.The further calculation of the motion is not a problem of the jump function, but of other functions.