As you can see, i have this code here:

```html
<!DOCTYPE html>
    <html>
    <body>

    <canvas id="myCanvas" width="500" height="300"
    style="border:1px solid #d3d3d3;">
    Your browser does not support the canvas element.
    </canvas>

    <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var player = {
        x: 0,
        y: 297.3
    };
    var monster = {
     x: 150,
        y: 296
    };
    var slope = {
     1: {
         x: 183,
         y: 299
        }
    }
    ctx.font = "13px monospace";
    setInterval(function() {
     player.x += 8;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        }, 50);
    setInterval(function() {
     ctx.fillText("\\o/",player.x, player.y)
        ctx.fillText(">:)",monster.x, monster.y)
        ctx.fillText("/",slope[1].x, slope[1].y)
        ctx.fillText("_______________________",0,296);
        ctx.fillText("_______________________",189,286);
        if (player.x >= monster.x - 25) {
         monster.x = 1000; monster.y = 1000;
        }
        if (player.x >= slope[1].x - 21) {
         player.y -= 10;
        }
        }, 50);
    </script>

    </body>
    </html>
```

I want to stop the player from going up more than 10 (y -= 10 then stop) once it touch the slope instead of keep going up. Is there any solution for this?