SHORK
This commit is contained in:
parent
cf93279141
commit
6096df6978
21 changed files with 201 additions and 165 deletions
|
|
@ -27,7 +27,7 @@
|
|||
<link rel="stylesheet" href="styles/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="tv-screen"></canvas>
|
||||
<img id="shork" src="images/shork.png"></img>
|
||||
<header id="page-header">
|
||||
<a class="page-header-button" href="index.html">Home</a>
|
||||
<a class="rss-button" href="rss.xml">RSS Feed</a>
|
||||
|
|
@ -66,4 +66,5 @@ message</p>
|
|||
</nav>
|
||||
</footer>
|
||||
</body>
|
||||
<script src="scripts/shork.js"></script>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@
|
|||
<link rel="stylesheet" href="styles/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="tv-screen"></canvas>
|
||||
<img id="shork" src="images/shork.png"></img>
|
||||
<header id="page-header">
|
||||
<a class="page-header-button" href="index.html">Home</a>
|
||||
<a class="rss-button" href="rss.xml">RSS Feed</a>
|
||||
|
|
@ -135,4 +135,5 @@ class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a href="
|
|||
</nav>
|
||||
</footer>
|
||||
</body>
|
||||
<script src="scripts/shork.js"></script>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@
|
|||
<link rel="stylesheet" href="styles/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="tv-screen"></canvas>
|
||||
<img id="shork" src="images/shork.png"></img>
|
||||
<header id="page-header">
|
||||
<a class="page-header-button" href="index.html">Home</a>
|
||||
<a class="rss-button" href="rss.xml">RSS Feed</a>
|
||||
|
|
@ -216,4 +216,5 @@ class="sourceCode sh"><code class="sourceCode bash"><span id="cb18-1"><a href="#
|
|||
</nav>
|
||||
</footer>
|
||||
</body>
|
||||
<script src="scripts/shork.js"></script>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@
|
|||
<link rel="stylesheet" href="styles/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="tv-screen"></canvas>
|
||||
<img id="shork" src="images/shork.png"></img>
|
||||
<header id="page-header">
|
||||
<a class="page-header-button" href="index.html">Home</a>
|
||||
<a class="rss-button" href="rss.xml">RSS Feed</a>
|
||||
|
|
@ -161,73 +161,6 @@ tweaking my Linux sytem or trying to do productive things.</p>
|
|||
<a href="https://cups.teabucket.eu/next?from=never" target="_parent"><img alt="Next" src="images/cups_right.svg" width="30" height="30"></a>
|
||||
</nav>
|
||||
</footer>
|
||||
<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 = 'images/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>
|
||||
</body>
|
||||
<script src="scripts/shork.js"></script>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<description>Here I post random stuff.</description>
|
||||
<language>en-us</language>
|
||||
<pubDate>Mon, 12 Jan 2026 00:00:00 +0100</pubDate>
|
||||
<lastBuildDate>Fri, 20 Feb 2026 20:09:52 +0100</lastBuildDate>
|
||||
<lastBuildDate>Sat, 21 Feb 2026 02:06:53 +0100</lastBuildDate>
|
||||
<docs>https://www.rssboard.org/rss-specification</docs>
|
||||
<generator>pandoc</generator>
|
||||
<managingEditor>n.gude@posteo.de (Never)</managingEditor>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue