I've been working on a project where I wanted to recreate the retro DVD logo bouncing around the screen but with a custom picture instead. However, I keep encountering an error message that's making it quite frustrating to work through.
Here is the snippet of my code:
<img id="image" onclick="main()" onmouseover="imgRotation()" onmouseout="backNormal()" src=*image source* alt="Custom Logo">
<canvas id="tv-screen"></canvas>
And here is my JavaScript code:
var dvd = {
x: 200,
y: 300,
xspeed: 10,
yspeed: 10,
img: document.getElementById("image")
}
var canvas = document.getElementById("tv-screen");
var speed = 20;
var scale = 0.50;
function main() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
update();
}
function update() {
dvd.x += dvd.xspeed;
dvd.y += dvd.yspeed;
checkHitBox();
update();
}
function checkHitBox() {
if (dvd.x + dvd.img.width * scale >= canvas.width || dvd.x <= 0) {
dvd.xspeed *= -1;
}
if (dvd.y + dvd.img.height * scale >= canvas.height || dvd.y <= 0) {
dvd.yspeed *= -1;
}
}