never/nevereverever.de
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SHARK

Browse source
This commit is contained in:
Never Gude 2026-01-13 17:37:03 +01:00
parent a900655a51
commit f25531690f
20 changed files with 311 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

69
index.html
View file

@ -25,6 +25,7 @@
<link rel="stylesheet" href="style.css" />
</head>
<body>
<canvas id="tv-screen"></canvas>
<header id="page-header">
<ul>
<li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li>
@ -88,6 +89,74 @@ rsync to syncronise my library with my Android smartphone.</p>
</nav>
</section>
<script>
let speed = 10;
let scale = 0.33; // Image scale (I work on 1080p monitor)
let canvas;
let ctx;
let logoColor;
let dvd = {
x: 256,
y: 354,
xspeed: 2,
yspeed: 2,
img: new Image()
};
(function main(){
canvas = document.getElementById("tv-screen");
ctx = canvas.getContext("2d");
dvd.img.src = 'shark.png';
//Draw the "tv screen"
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
pickColor();
update();
})();
function update() {
setTimeout(() => {
//Draw the canvas background
ctx.fillStyle = '#00000000';
ctx.clearRect(0, 0, canvas.width, canvas.height);
//Draw DVD Logo and his background
//ctx.fillStyle = logoColor;
//ctx.fillRect(dvd.x, dvd.y, dvd.img.width*scale, dvd.img.height*scale);
ctx.drawImage(dvd.img, dvd.x, dvd.y, dvd.img.width*scale, dvd.img.height*scale);
//Move the logo
dvd.x+=dvd.xspeed;
dvd.y+=dvd.yspeed;
//Check for collision
checkHitBox();
update();
}, speed)
}
//Check for border collision
function checkHitBox(){
if(dvd.x+dvd.img.width*scale >= canvas.width || dvd.x <= 0){
dvd.xspeed *= -1;
pickColor();
}
if(dvd.y+dvd.img.height*scale >= canvas.height || dvd.y <= 0){
dvd.yspeed *= -1;
pickColor();
}
}
//Pick a random color in RGB format
function pickColor(){
r = Math.random() * (254 - 0) + 0;
g = Math.random() * (254 - 0) + 0;
b = Math.random() * (254 - 0) + 0;
logoColor = 'rgb('+r+','+g+', '+b+')';
}
</script>
<footer id="page-footer">
<!-- <embed type="text/html" src="https://cups.teabucket.eu/embed?from=never" style="width:320px; height: 120px; scale: 0.66;"> -->
<p class="cups-light">