个人中心
gpt4 book ai didi

javascript - 落下的字母和方 block 之间的碰撞

转载 作者：行者123 更新时间：2023-11-28 03:16:10 25 4
gpt4 key购买 nike

我正在制作一款游戏，其中必须检测字母和盒子之间的碰撞。

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

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

最佳答案

使用 Canvas 绘制下落的字母和方 block 可能更容易。

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

  • 使用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
));

您可以像这样在 Canvas 上绘制文本:

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

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

要为文本下落设置动画，在每个新帧中，您将使用 context.clearRect(0,0,canvas.width,canvas.height) 清除 Canvas ，然后重新绘制 block 和文本他们的新职位。

关于javascript - 落下的字母和方 block 之间的碰撞，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27635443/

25 4 0
文章推荐： jquery - 从 Invoice 中的数据库中获取值
文章推荐： javascript - 单击链接时无法将记录填充到 Bootstrap 模式
文章推荐： html - 通过 CSS 媒体查询更改表单最初选择的选项
文章推荐： javascript - PHP 的服务器发送事件无法正确显示数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com