Question

我正在制作一个必须检测字母和方框之间碰撞的游戏。

我遇到了宽度高度比较算法，但我如何才能找到字母的高度和宽度属性？

<!DOCTYPE html>
<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <title>Game</title>
    </head>
    <style>
    #canvas{
        outline: 1px solid #000;
        background-color: #0099FF;

    }
    </style>
    <body>
    <canvas id="canvas" width="800" height="600">
</canvas>



<script>
var canvas = document.querySelector('#canvas');
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF5050";
var xPos=0;
var yPos=500;
ctx.fillRect(xPos,yPos,70,70);
ctx.stroke();
function move(e){
    if(xPos+70<=canvas.width)
    {
        if(e.keyCode==39){
        xPos+=5;
        }
    }
    if(xPos>0)
    {
        if(e.keyCode==37){
        xPos-=5;
    }   }
    canvas.width=canvas.width;
    ctx.fillStyle = "#FF5050";
    ctx.fillRect(xPos,yPos,70,70);
    ctx.stroke();

}
document.onkeydown =move;
</script>


<script>
var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
function randomNumber(max) {

    var randomNum       = Math.random();
    var numExpanded     = randomNum * max;
    var numFloored      = Math.floor(numExpanded);

    return numFloored;
}

//create a function returning a random letter
function randomLetter() {

    var random0to25     = randomNumber(letters.length);
    var randomLetter    = letters.charAt(random0to25);

    return randomLetter;
}

//create a function creating a span containing a random letter and attaching it to body
function createLetter() {

    var span            = $("<span/>");
    span.css("position", "absolute");
    span.css("top", 0);
    randomCol=randomNumber(760);
    randomCol=randomCol+20;

       //concatenation
    span.css("left", randomCol+"px"); 
    span.text(randomLetter());

    span.appendTo("body");

    return span;
}

//explain how to animate an element
function makeLetterFall() {

    var letterElement = createLetter();
    letterElement.animate({"top":"95%"}, 5000);     //any ideas how not to use {} here?
}

//handle keyup, find a letter and remove it
/*function removeTypedLetter(pressedKey) {

    var typedLetter     = String.fromCharCode(pressedKey.keyCode);
    var letterElement  = $("span:contains("+typedLetter+")").first();

    letterElement.remove();
}*/

//$(document).on("keyup", removeTypedLetter);

//make a new letter every second
setInterval(makeLetterFall, 1000);

  </script>
  </body>
  </html>

Answer 1

使用画布绘制掉落字母和块可能更容易。

这样你就可以得到文本的边界框：

使用context.font='36px verdana'
近似文字高度为px字体大小+2（在本例中为var textHeight=36+2;）
您可以使用var textWidth=context.measureText('A').width
包围框：x，y，textWidth，textHeight

要检测碰撞，您可以针对每个矩形的边界框检查文本的边界框：

var textLeft=textX;
var textRight=textX+textWidth;
var textTop=textY;
var textBottom=textY+textHeight;

var rectLeft=rectX;
var rectRight=rectX+textWidth;
var rectTop=rectY;
var rectBottom=rectY+rectHeight;

// test if text & rect are colliding

return(!(
    textLeft>rectRight ||
    textRight<rectLeft ||
    textTop>rectBottom ||
    textBottom<rectTop
));

您可以在画布上绘制文字，如下所示：

// context.fillText(text,x,y);

context.fillText('A',100,200);

要为文本下降设置动画，请在每个新框架中使用context.clearRect(0,0,canvas.width,canvas.height)清除画布，然后重新绘制块＆amp;文字处于新职位。

下降字母和块之间的碰撞

1 个答案: