javascript - 一旦达到条件就停止

标签 javascript html canvas

如您所见,我这里有这段代码:

<!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>

我想阻止玩家在接触斜坡后上升超过 10(y -= 10 然后停止),而不是继续上升。有什么解决办法吗?

最佳答案

您可以使用在初始操作中设置为 false 的状态变量,并在操作后设置为 true:

<!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);
    var up = false;
    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 (!up && player.x >= slope[1].x - 21) {
        	player.y -= 10;
          up=true
        }
        }, 50);
    </script>
    
    </body>
    </html>

关于javascript - 一旦达到条件就停止,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44457830/

相关文章:

javascript - 无限 Canvas 背景滚动无卡顿

php - 如何在谷歌地图中显示标记 从 mysql php 检索数据

javascript - js addeventlistener 使用 capture for Dragenter 不适用于输入元素

javascript - Canvas 。 AngularJS。添加文本和图像

html - 我应该在我的网站中包含哪些元标记?

jquery - 如何根据 fancybox 内容高度(大覆盖或滚动页面)固定覆盖背景高度。

javascript - 使用 appendChild 时 Canvas 不包含 TypeError JS 控制台的问题

javascript - 如何在 JavaScript 中设置最大限制?

javascript - 如何在javascript中对键/值对象进行排序?

javascript - 使用 KineticJS 时不会加载 Google 字体