I created this canvas game in Javascript. Runs how it is supposed to but whenever I add CSS to it is stops working

Question

I made a game when you click a bug and it gets faster the more times it is clicked, and moves randomly around the canvas. It runs fine without using CSS but when I drop it in it does not take any inputs. What happens instead is that the code just does not work, only having the bug stay in one place with no way to click on it. I used this CSS in a previous project so I know it works fine, but in this it refuses to work how I want it to. I hope someone can help because it makes no sense why it is doing that.

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>
        <header><h1>Bug Smasher</h1></header>
     <script src="Assignment5.js"></script>
    </body>
</html>

CSS:

body
{
    background-color: rgb(43, 43, 43);
    background-image: url(images/City.jpg);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #FFF;
    margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 50%;
  min-width: none;
}
#wrapper
{
    background-color:rgb(43, 43, 43);
    border-style: dashed;
    border-color: cyan;

}
.error
{
  background-color: pink;
}
header
{
  
  text-align: center;
  color: #FFF;
  border-style: dashed;
  border-color: white;
}
footer
{
    border-style:dashed;
    border-color: crimson;

    background-color: rgb(52, 62, 70);
}

hr
{
    color: crimson;
    background-color: crimson;

    height: 3px;
}
a:link {
    color: #ab77ff;
  }
  
  /* visited link */
  a:visited {
    color: #ff629e;
  }
  
  /* mouse over link */
  a:hover {
    color: #ff2922;
  }
  
  /* selected link */
  a:active {
    color: #fff;
  }

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";


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

var bug = {};
var bugCaught = 0;


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();
    }
};


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();

when you add the CSS, do you get any errors in the browser console? — Bravo, Jul 26 '21 at 22:48
This is definitely far more code than necessary for your question: run through the [mcve] process, update your post with that, although I half-suspect that just by forcing yourself to properly reduce your code, you're actually going to find out what's wrong entirely on your own. — Mike 'Pomax' Kamermans, Jul 26 '21 at 22:56

I created this canvas game in Javascript. Runs how it is supposed to but whenever I add CSS to it is stops working

0 Answers0