SHARK

shark.js

@@ -0,0 +1,68 @@
+<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>