JavaScript Game Development Course for Beginners

JavaScript
1

I’ve been trying to build the JavaScript game described in the course on YouTube. I’ve gotten stuck at around timestamp 3:20:00 where I need to use a ctx.getImageData() command. The browser is throwing a security error when I try to do this.

The image file I’m using is in the local directory, not from the internet.

Here is my code so far:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <canvas id="canvas1"></canvas>

    <script src="script.js"></script>
</body>
</html>

body {
    background: linear-gradient(to bottom, red, green, blue);
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

canvas {
   position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let score = 0;
ctx.font = '50px Impact';

let timeToNextRaven = 0;
let ravenInterval = 500;
let lastTime = 0;

let ravens = [];
class Raven {
    constructor() {
        this.spriteWidth = 271;
        this.spriteHeight = 194;
        this.sizeModifier = Math.random() * 0.6 + 0.4;
        this.width = this.spriteWidth * this.sizeModifier;
        this.height = this.spriteHeight * this.sizeModifier;
        this.x = canvas.width;
        this.y = Math.random() * (canvas.height - this.height);
        this.directionX = Math.random() * 5 + 3;
        this.directionY = Math.random() * 5 - 2.5;
        this.markedForDeletion = false;
        this.image = new Image();
        //this.image.crossOrigin = "Anonymous";
        this.image.src = 'raven.png';
        this.frame = Math.floor(Math.random() * 5);
        this.maxFrame = 4;
        this.timeSinceFlap = 0;
        this.flapInterval = Math.random() * 50 + 50;

    }
    update(deltatime) {
        if (this.y < 0 || this.y > canvas.height - this.height) {
            this.directionY = this.directionY * -1;
        }
        this.x -= this.directionX;
        this.y += this.directionY;
        if (this.x < 0 - this.width) this.markedForDeletion = true;
        this.timeSinceFlap += deltatime;
        if (this.timeSinceFlap > this.flapInterval) {
            if (this.frame > this.maxFrame) this.frame = 0;
            else this.frame++;

            this.timeSinceFlap = 0;
            
        }
    }
    draw() {
        ctx.drawImage(this.image, this.frame * this.spriteWidth, 0, this.spriteWidth, this.spriteHeight, this.x, this.y, this.width, this.height);
    }
}

function drawScore() {
    ctx.fillStyle = 'black';
    ctx.fillText('Score: ' + score, 50, 75)
    ctx.fillStyle = 'white';
    ctx.fillText('Score: ' + score, 55, 80); 
}

window.addEventListener('click', function(e) {
    const detectPixelColor = ctx.getImageData(e.x, e.y, 1, 1);
    //console.log(detectPixelColor);
});


function animate(timestamp) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    let deltatime = timestamp - lastTime;
    lastTime = timestamp;
    timeToNextRaven += deltatime;
    if (timeToNextRaven > ravenInterval) {
        ravens.push(new Raven());
        timeToNextRaven = 0;
    };
    drawScore();
    [...ravens].forEach(object => object.update(deltatime));
    [...ravens].forEach(object => object.draw());
    ravens = ravens.filter(object => !object.markedForDeletion);
    requestAnimationFrame(animate);
}
animate(0);

Also, I tried using image.crossOrigin = “Anonymous”; and that definitely did NOT work. In fact, the browser threw even more errors.

If anyone has any idea how I can resolve this issue I would greatly appreciate it. I’m over three hours into this course that I’ve been working on for several days and I’ve come to a dead stop on this. Hours of Googling have turned up no workable solutions.

2

You need to serve the page. Try using the Live Server extension, or something similar.

3

I appreciate your response, but I don’t really know what you mean. A Live Server extension for what?

4

It is a VS Code extension.

You have to serve the page, you can’t just open it in the browser.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.