Question

我在为Javascript画布游戏创建点击事件时遇到问题。到目前为止，我一直在关注一个教程，但是你与游戏互动的方式是通过鼠标悬停。我想更改它，以便不是将鼠标悬停在画布上的对象上进行交互，而是使用鼠标单击。

以下是我用来检测鼠标悬停的代码。

getDistanceBetweenEntity = function (entity1,entity2) //return distance
{
    var vx = entity1.x - entity2.x;
    var vy = entity1.y - entity2.y;
    return Math.sqrt(vx*vx+vy*vy);
}

testCollisionEntity = function (entity1,entity2) //return if colliding
{
    var distance = getDistanceBetweenEntity(entity1,entity2);
    return distance < 50;
}

然后我在循环中使用它来与它进行交互。

    var isColliding = testCollisionEntity(player,nounList[key]);
    if(isColliding)
    {
        delete nounList[key];
        player.score = player.score + 10;

    }

以下是我目前状态下游戏的完整副本。

    <canvas id="ctx" width="500" height="500" style="border:1px solid #000000;"></canvas>

<script>
var ctx = document.getElementById("ctx").getContext("2d");

ctx.font = '30px Arial';

//Setting the height of my canvas
var HEIGHT = 500;
var WIDTH = 500;

//Player class
var player = 
{
    x:50,
    spdX:30,
    y:40,
    spdY:5,
    name:'P',
    score:0,
};

//Creating arrays
var nounList ={};
var adjectivesList ={};
var verbsList ={};

getDistanceBetweenEntity = function (entity1,entity2) //return distance
{
    var vx = entity1.x - entity2.x;
    var vy = entity1.y - entity2.y;
    return Math.sqrt(vx*vx+vy*vy);
}

testCollisionEntity = function (entity1,entity2) //return if colliding
{
    var distance = getDistanceBetweenEntity(entity1,entity2);
    return distance < 50;
}

Nouns = function (id,x,y,name)
{
    var noun = 
    {
        x:x,
        y:y,
        name:name,
        id:id,
    };
    nounList[id] = noun;
}

Adjectives = function (id,x,y,name)
{
    var adjective = 
    {
        x:x,
        y:y,
        name:name,
        id:id,
    };
    adjectivesList[id] = adjective;
}

Verbs = function (id,x,y,name)
{
    var verb = 
    {
        x:x,
        y:y,
        name:name,
        id:id,
    };
    verbsList[id] = verb;
}


document.onmousemove = function(mouse)
{
    var mouseX = mouse.clientX;
    var mouseY = mouse.clientY;

    player.x = mouseX;
    player.y = mouseY;
}






updateEntity = function (something)
{
    updateEntityPosition(something);
    drawEntity(something);
}

updateEntityPosition = function(something)
{

}

drawEntity = function(something)
{
    ctx.fillText(something.name,something.x,something.y);
}


update = function ()
{
    ctx.clearRect(0,0,WIDTH,HEIGHT);

    drawEntity(player);

    ctx.fillText("Score: " + player.score,0,30);

    for(var key in nounList)
    {
        updateEntity(nounList[key]);


        var isColliding = testCollisionEntity(player,nounList[key]);
        if(isColliding)
        {
            delete nounList[key];
            player.score = player.score + 10;

        }
    }

    for(var key in adjectivesList)
    {
        updateEntity(adjectivesList[key])
        var isColliding = testCollisionEntity(player,adjectivesList[key]);
        if(isColliding)
        {
            delete adjectivesList[key];
            player.score = player.score - 1;
        }

    }

    for(var key in verbsList)
    {
        updateEntity(verbsList[key])
        var isColliding = testCollisionEntity(player,verbsList[key]);
        if(isColliding)
        {
            delete verbsList[key];
            player.score = player.score - 1;
        }

    }

    if(player.score >= 46)
    {
        ctx.clearRect(0,0,WIDTH,HEIGHT);
        ctx.fillText("Congratulations! You win!",50,250);
        ctx.fillText("Refresh the page to play again.",50,300);
    }

}

Nouns('N1',150,350,'Tea');
Nouns('N2',400,450,'Park');
Nouns('N3',250,150,'Knee');
Nouns('N4',50,450,'Wall');
Nouns('N5',410,50,'Hand');

Adjectives('A1',50,100,'Broken');
Adjectives('A2',410,300,'Noisy');

Verbs('V1',50,250,'Smell');
Verbs('V2',410,200,'Walk');

setInterval(update,40);

总结一下我想要做的就是更改它，这样你就不必再将鼠标移到单词上来删除它们了，你必须点击。

（对于不使用正确术语的道歉，我的编程知识非常有限。）

Answer 1

你可以让你的画布听这样的鼠标点击：

// get a reference to the canvas element
var canvas=document.getElementById('ctx'); 

// tell canvas to listen for clicks and call "handleMouseClick"
canvas.onclick=handleMouseClick;

在点击处理程序中，您需要知道画布相对于视口的位置。这是因为浏览器总是报告相对于视口的鼠标坐标。您可以像这样获取相对于视口的画布位置：

// get the bounding box of the canvas
var BB=canvas.getBoundingClientRect();
// get the left X position of the canvas relative to the viewport
var BBoffsetX=BB.left;
// get the top Y position of the canvas relative to the viewport
var BBoffsetY=BB.top;

因此，您的mouseClickHandler可能如下所示：

// this function will be called when the user clicks
// the mouse in the canvas
function handleMouseClick(e){
    // tell the browser we're handling this event
    e.preventDefault();
    e.stopPropagation();
    // get the canvas postion relative to the viewport
    var BB=canvas.getBoundingClientRect();
    var BBoffsetX=BB.left;
    var BBoffsetY=BB.top;            
    // calculate the mouse position
    var mouseX=e.clientX-BBoffsetX;
    var mouseY=e.clientY-BBoffsetY;
    // report the mouse position using the h4
    $position.innerHTML='Click at '+parseInt(mouseX)+' / '+parseInt(mouseY);
}

如果您的游戏没有让窗口滚动或调整大小，则画布位置不会相对于视口发生变化。然后，为了获得更好的性能，您可以移动与将相对于视口的画布位置相关的3行放到应用程序的顶部。

// If the browser window won't be scrolled or resized then
// get the canvas postion relative to the viewport
// once at the top of your app
var BB=canvas.getBoundingClientRect();
var BBoffsetX=BB.left;
var BBoffsetY=BB.top;            

function handleMouseClick(e){
    // tell the browser we're handling this event
    e.preventDefault();
    e.stopPropagation();
    // calculate the mouse position
    var mouseX=e.clientX-BBoffsetX;
    var mouseY=e.clientY-BBoffsetY;
    // report the mouse position using the h4
    $position.innerHTML='Click at '+parseInt(mouseX)+' / '+parseInt(mouseY);
}

在Javascript Canvas中创建单击事件

1 个答案: