Question

正如您在运行代码时所看到的，碰撞已关闭。图像的一侧不断下沉到画布的边缘，我试图在draw（）中减去画布高度的图像大小;功能但它会阻止图像显示。

使用Javascript：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

console.log($(document).height());
console.log($(document).width());
console.log($("#img").height());
console.log($("#img").width());

var x = canvas.width/2;
var y = canvas.height-30;
var dx = 5;
var dy = -5;
var img = document.getElementById("img");
var $imgHeight = $("#img").height();
var $imgWidth = $("#img").width();

function draw(){
        ctx.globalCompositeOperation = "source:over";
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        ctx.drawImage(img,x,y,120,150);

        if(x + dx > canvas.width || x + dx < 120){
            dx = -dx;
        }
        if(y + dy > canvas.height || y + dy < 150){
            dy = -dy;
        }
        x += dx;
        y += dy;
    }

setInterval(draw, 10);

HTML：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="UTF-8">
    <title>Game</title>
  </head>
  <body>
  <canvas id="myCanvas" width="1416" height="702"></canvas>
  <br>
  <br>
  <br>
  <br>
  <!--<img src="url.jpg" id="img" width="120" height="150">-->
  <img src="http://orig05.deviantart.net/7a06/f/2015/207/b/c/ainsley_s_face_by_lordfriezypop-d92vofk.jpg" id="img" width="120" height="150">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="main.js" type="text/javascript"></script>
  </body>
</html>

如果需要，这里是jsfiddle：https://jsfiddle.net/16oxobkt/

Answer 1

我修好了它：

if(x + dx > canvas.width - $imgWidth ||  x + dx < 0){
        dx = -dx;
}
if(y + dy > canvas.height - $imgHeight || y + dy < 0){
        dy = -dy;
}
x += dx;
y += dy;

图像的坐标位于图像的左上角，所以：

如果图像到达左侧屏幕的边缘，如果x + dx < 0则x = 0，则速度会切换。但是，如果图像移到屏幕的最右侧，它将会下沉，除非您在到达canvas.width - $imgHeight的坐标时进行速度切换，如下所示：x + dx > canvas.width - $imgWidth。这会阻止图像下沉到画布的侧面，这同样适用于Y轴：y + dy > canvas.height - $imgHeight，y + dy < 0

画布图像陷入collison的边缘

1 个答案: