时间戳

首页 > 解决方案 > CSS 导致画布游戏按钮和屏幕点击中断。我如何解决它？

javascript - CSS 导致画布游戏按钮和屏幕点击中断。我如何解决它？

问题描述

为什么居中甚至添加标题标签会导致代码按钮离开输入区域？我想在背景中添加一些设计，但不知道为什么按钮不在输入区域。它适用于需要鼠标输入的名为 bug 粉碎机的画布游戏。

Javascript：

// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
var timer = 0;
var caught = false;
var fps = 10;
document.body.appendChild(canvas);
canvas.width = 800;
canvas.height = 544;

// Background image
var bgReady = false;
var bgImage = new Image();

bgImage.onload = function () {
    bgReady = true;
};
bgImage.src = "images/background.png";

// bug image
var bugReady = false;
var bugImage = new Image();
bugImage.onload = function () {
    bugReady = true;
};
bugImage.src = "images/bug.png";

var bug = {};
var bugCaught = 0;
// When bug is caught, reset
var reset = function () {
    bug.x = 40 + (Math.random() * (canvas.width - 70));
    do {
        bug.y = 40 + (Math.random() * (canvas.height - 70));
    }
    while (bug.y < 100)
};

//mousedown event
window.addEventListener("mousedown", onMouseDown, false);
function onMouseDown(e) {

    if (e.button != 0) return;

    mouseXinCanvas = e.clientX;
    mouseYinCanvas = e.clientY;

    if (bugBody(bug, mouseXinCanvas, mouseYinCanvas)) {
        caught = true;
        clearInterval(timer);
        timer = setInterval(reset, 20000 / fps);
        reset();
    }
    if (ResetScore(mouseXinCanvas, mouseYinCanvas)) {
        location.reload();
    }
    if (ResetSpeed(mouseXinCanvas, mouseYinCanvas)) {
        clearInterval(timer);
        timer = setInterval(reset, 20000 / fps);
        reset();
        render();
    }
};

//bug's body define
function bugBody(bug, x, y) {

    if (x <= (bug.x + 80)
        && bug.x <= (x + 80)
        && y <= (bug.y + 80)
        && bug.y <= (y + 80)
    ) {
        fps = fps + 5;
        bugCaught++;
        return true;
    }
    return false;
};

//Reset Score box
function ResetScore(x, y) {

    if (x > (305)
        && x < (545)
        && y > (15)
        && y < (85)
    ) {
        return true;
    }
    return false;
};

//Reset speed box
function ResetSpeed(x, y) {
    if (x > (605)
        && x < (845)
        && y > (15)
        && y < (85)
    ) {
        fps = 10;
        return true;
    }
    return false;
};

// Draw everything
var render = function () {

   //===========================================================
   // add the following line to clear the display.

   ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);


    if (bgReady) {
        ctx.drawImage(bgImage, 0, 100);
    }
    if (bugReady) {
        ctx.drawImage(bugImage, bug.x, bug.y);
    }
    if (caught == true) {
        if (bgReady) {
            ctx.drawImage(bgImage, 0, 100);
        }
        caught = false;
    }

    // Score, Title
    ctx.fillStyle = "rgb(65, 226, 24)";
    ctx.font = "34px Helvetica";
    ctx.textAlign = "left";
    ctx.textBaseline = "top";
    ctx.fillText("Bug Smasher", 5, 40);
    ctx.font = "20px Helvetica";
    ctx.fillText("Score: " + bugCaught, 10, 10);



    // Reset Score, Speed button
    ctx.fillStyle = "rgb(30, 168, 99)";
    ctx.fillRect(250, 10, 250, 80);
    ctx.fillRect(520, 10, 250, 80);
    ctx.fillStyle = "rgb(30, 168, 99)";
    ctx.fillRect(255, 15, 240, 70);
    ctx.fillRect(525, 15, 240, 70);
    ctx.fillStyle = "rgb(255, 255, 255)";
    ctx.font = "34px Arial";
    ctx.fillText("Reset Score", 275, 30);
    ctx.fillText("Reset Speed", 545, 30);

};

// The main game loop
var main = function () {
    render();
    // Request to do this again ASAP
    requestAnimationFrame(main);
};

// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
// Let's play this game!
//var then = Date.now();
reset();
main();

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content = "width=device-width, initial-scale = 1.0">
    <link rel="stylesheet" href="Assignment5.css">   
        <title>Assignment 5</title>
        
    </head>
    <body>
      <main>
     <script src="Assignment5.js"></script>
     </main>
    </body>
</html>

标签： javascripthtmlcsscanvas

解决方案

当您将其他元素添加到代码中时，您的<canvas>元素将相应地移动。您在鼠标功能中没有考虑的是画布相对于窗口的位置。

我相信您已经注意到，当您添加元素时，画布会向下移动，但按钮的碰撞和错误不会相对于画布移动。因此，在您的鼠标功能中，您需要减去画布 x 和 y 位置

window.addEventListener("mousedown", onMouseDown, false);
function onMouseDown(e) {

    let canvasBounds = canvas.getBoundingClientRect(); //add this

    if (e.button != 0) return;

    mouseXinCanvas = e.clientX - canvasBounds.x; //can also be canvasBounds.left
    mouseYinCanvas = e.clientY - canvasBounds.y; //can also be canvasBoudns.top

    if (bugBody(bug, mouseXinCanvas, mouseYinCanvas)) {...

推荐阅读