Javascript 落下的字母和块之间的碰撞_Javascript_Jquery_Html_Css_Canvas

Javascript 落下的字母和块之间的碰撞

javascript jquery html css canvas

Javascript 落下的字母和块之间的碰撞,javascript,jquery,html,css,canvas,Javascript,Jquery,Html,Css,Canvas,我正在做一个游戏，在这个游戏中必须检测字母和盒子之间的碰撞我遇到了宽度-高度比较算法，但如何找到字母的高度和宽度属性呢 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <title>Game</title

我正在做一个游戏，在这个游戏中必须检测字母和盒子之间的碰撞

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

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


游戏
#帆布{
外形：1px固体#000；
背景色：#0099FF；
}
var canvas=document.querySelector（“#canvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“#FF5050”；
var-xPos=0；
var-yPos=500；
ctx.fillRect（XPO，YPO，70,70）；
ctx.stroke（）；
功能移动（e）{
如果（xPos+700）
{
如果（e.keyCode==37）{
xPos-=5；
}   }
canvas.width=canvas.width；
ctx.fillStyle=“#FF5050”；
ctx.fillRect（XPO，YPO，70,70）；
ctx.stroke（）；
}
document.onkeydown=移动；
var letters=“abcdefghijklmnopqrstuvxyz”；
函数随机数（最大值）{
var randomNum=Math.random（）；
var numExpanded=randomNum*max；
var numFloored=数学楼层（numExpanded）；
返回numflored；
}
//创建一个返回随机字母的函数
函数随机字母（）{
var random0到25=随机数（字母长度）；
var randomLetter=字母.charAt（random0到25）；
回信；
}
//创建一个函数，创建包含随机字母的跨距并将其附加到正文
函数createLetter（）{
变量span=$（“”）；
css（“位置”、“绝对”）；
span.css（“顶部”，0）；
随机数=随机数（760）；
randomCol=randomCol+20；
//串联
css（“左”，randomCol+“px”）；
span.text（随机字母（））；
span.附于（“正文”）；
返回跨度；
}
//解释如何设置元素的动画
函数makeLetterFall（）{
var letterElement=createLetter（）；
动画（{“top”：“95%”，5000）；//有没有办法不在这里使用{}？
}
//处理keyup，找到一个字母并将其删除
/*功能移除TypedLetter（按键）{
var typedLetter=String.fromCharCode（按Key.keyCode）；
var-letterElement=$（“span:contains（“+typedLetter+”））.first（）；
letterElement.remove（）；
}*/
//$（文档）。在（“keyup”，removeTypedLetter）上；
//每秒钟写一封新信
设置间隔（makeLetterFall，1000）；

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

这样，可以获得如下文本的边界框：

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

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

使用

上下文设置文本字体。font='36px verdana'

近似的文本高度是px字体大小+2（在本例中
```
var texthheight=36+2；
```
）

您可以使用

var textWidth=context.measureText（'A'）测量文本宽度。宽度

边界框：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.clearRect（0,0，canvas.width，canvas.height）

清除画布，然后在新位置重新绘制块和文本。

为什么不能使用字母包装跨度的宽度和高度？对不起，我如何使用它@德尚