{"id":4444,"date":"2024-08-27T17:41:02","date_gmt":"2024-08-27T17:41:02","guid":{"rendered":"http:\/\/landing.anderskisling.dk\/?page_id=4444"},"modified":"2024-09-05T16:08:44","modified_gmt":"2024-09-05T16:08:44","slug":"startruck1","status":"publish","type":"page","link":"https:\/\/landing.anderskisling.dk\/index.php\/startruck1\/","title":{"rendered":"Star Truck scene 1"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

star truck\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

You\u2019re a once highly-decorated Spacepilot, now working for a syndicate that collects resources from asteroids and tiny objects scattered across the galaxy<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Your ship is old and battered, but at least the autopilot still works. <\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

It\u2019s been 14 days since your last shower, and your stubble\u2019s getting itchy. <\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Gather enough gemstones, and avoid any dangers..<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Stage 1<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Rumskibsspil med Parallax<\/title>\n <style>\n body, html {\n margin: 0;\n padding: 0;\n }\n .space-container {\n width: 100%;\n height: 100vh;\n position: relative;\n background-color: #000;\n }\n #starfield {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n }\n .background {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-image: url('http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/08\/starfieldgametest1-scaled.jpg');\n background-size: cover;\n background-position: center;\n opacity: 0.5;\n z-index: 1;\n transition: transform 0.1s ease-out;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"space-container\">\n <div class=\"background\"><\/div>\n <canvas id=\"starfield\"><\/canvas>\n <\/div>\n\n <script>\n const canvas = document.getElementById('starfield');\n const ctx = canvas.getContext('2d');\n const background = document.querySelector('.background');\n let width, height;\n let shipX, shipY, targetShipX, targetShipY;\n let shipTilt = 0;\n const stars = [];\n const bullets = [];\n const starCount = 5000;\n const maxDepth = 1000;\n let score = 0;\n\n const MAGNETIC_RADIUS = 150;\n const MAX_MAGNETIC_STRENGTH = 0.01;\n\n const shipImage = new Image();\n shipImage.src = 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/08\/spacetruck-edit3.png';\n const shipWidth = 528 * 0.4;\n const shipHeight = 145 * 0.4;\n\n function setCanvasSize() {\n const container = canvas.parentElement;\n width = canvas.width = container.clientWidth;\n height = canvas.height = container.clientHeight;\n shipX = targetShipX = width \/ 2;\n shipY = targetShipY = height \/ 2;\n }\n setCanvasSize();\n window.addEventListener('resize', setCanvasSize);\n\n function createStar() {\n const randomValue = Math.random();\n let type = 'white';\n if (randomValue < 0.05) type = 'red';\n else if (randomValue < 0.10) type = 'purple';\n\n return {\n x: Math.random() * width - width \/ 2,\n y: Math.random() * height - height \/ 2,\n z: Math.random() * maxDepth,\n type: type,\n size: 1\n };\n }\n\n for (let i = 0; i < starCount; i++) {\n stars.push(createStar());\n }\n\n function moveStars() {\n const moveX = (shipX - width \/ 2) * 0.001;\n const moveY = (shipY - height \/ 2) * 0.001;\n for (let i = stars.length - 1; i >= 0; i--) {\n let star = stars[i];\n star.z -= 0.5;\n star.x -= moveX * (1 - star.z \/ maxDepth);\n star.y -= moveY * (1 - star.z \/ maxDepth);\n\n if (star.type === 'red') {\n const starScreenX = star.x \/ (star.z * 0.001) + width \/ 2;\n const starScreenY = star.y \/ (star.z * 0.001) + height \/ 2;\n const distanceToShip = Math.sqrt((starScreenX - shipX)**2 + (starScreenY - shipY)**2);\n\n if (distanceToShip < MAGNETIC_RADIUS) {\n const angleToShip = Math.atan2(shipY + shipHeight\/4 - starScreenY, shipX - starScreenX);\n\n const strength = MAX_MAGNETIC_STRENGTH * Math.pow((MAGNETIC_RADIUS - distanceToShip) \/ MAGNETIC_RADIUS, 2);\n\n star.x += Math.cos(angleToShip) * strength * (MAGNETIC_RADIUS - distanceToShip);\n star.y += Math.sin(angleToShip) * strength * (MAGNETIC_RADIUS - distanceToShip);\n\n star.size = 1 + 5 * (1 - distanceToShip \/ MAGNETIC_RADIUS);\n\n if (distanceToShip < 10) {\n stars.splice(i, 1);\n score += 5;\n continue;\n }\n } else {\n star.size = 1;\n }\n }\n\n if (star.z <= 0 || \n star.x < -width \/ 2 || star.x > width \/ 2 || \n star.y < -height \/ 2 || star.y > height \/ 2) {\n Object.assign(star, createStar());\n star.z = maxDepth;\n }\n }\n }\n\n function drawStars() {\n ctx.clearRect(0, 0, width, height);\n for (let star of stars) {\n const x = star.x \/ (star.z * 0.001);\n const y = star.y \/ (star.z * 0.001);\n if (x < -width \/ 2 || x > width \/ 2 || y < -height \/ 2 || y > height \/ 2) continue;\n const baseSize = (1 - star.z \/ maxDepth) * 3;\n const size = baseSize * star.size;\n const opacity = 1 - star.z \/ maxDepth;\n ctx.fillStyle = `rgba(${star.type === 'red' ? '255,0,0' : star.type === 'purple' ? '255,0,255' : '255,255,255'}, ${opacity})`;\n ctx.fillRect(x + width \/ 2 - size\/2, y + height \/ 2 - size\/2, size, size);\n }\n }\n\n function drawShip() {\n ctx.save();\n ctx.translate(shipX, shipY);\n ctx.rotate(shipTilt);\n ctx.drawImage(shipImage, -shipWidth \/ 2, -shipHeight \/ 2, shipWidth, shipHeight);\n ctx.restore();\n }\n\n function shoot() {\n const bulletSpeed = 15;\n const bulletSpread = 0.1;\n const baseAngle = Math.atan2(height \/ 2 - shipY, width \/ 2 - shipX);\n return [\n {\n x: shipX,\n y: shipY,\n velocityX: Math.cos(baseAngle - bulletSpread \/ 2) * bulletSpeed,\n velocityY: Math.sin(baseAngle - bulletSpread \/ 2) * bulletSpeed\n },\n {\n x: shipX,\n y: shipY,\n velocityX: Math.cos(baseAngle + bulletSpread \/ 2) * bulletSpeed,\n velocityY: Math.sin(baseAngle + bulletSpread \/ 2) * bulletSpeed\n }\n ];\n }\n\n function moveBullets() {\n for (let i = bullets.length - 1; i >= 0; i--) {\n const bullet = bullets[i];\n bullet.x += bullet.velocityX;\n bullet.y += bullet.velocityY;\n\n for (let star of stars) {\n const starX = star.x \/ (star.z * 0.001) + width \/ 2;\n const starY = star.y \/ (star.z * 0.001) + height \/ 2;\n const distance = Math.sqrt((bullet.x - starX)**2 + (bullet.y - starY)**2);\n if (distance < 5 * star.size) {\n if (star.type === 'red') score += 10;\n else if (star.type === 'purple') score += 20;\n Object.assign(star, createStar());\n star.z = maxDepth;\n bullets.splice(i, 1);\n break;\n }\n }\n\n if (bullet.x < 0 || bullet.x > width || bullet.y < 0 || bullet.y > height) {\n bullets.splice(i, 1);\n }\n }\n }\n\n function drawBullets() {\n ctx.fillStyle = 'red';\n for (let bullet of bullets) {\n ctx.beginPath();\n ctx.arc(bullet.x, bullet.y, 3, 0, Math.PI * 2);\n ctx.fill();\n }\n }\n\n function drawScore() {\n ctx.fillStyle = 'white';\n ctx.font = '20px Arial';\n ctx.fillText(`Score: ${score}`, 10, 30);\n }\n\n function updateBackgroundPosition() {\n const parallaxFactor = 0.02;\n const moveX = (width \/ 2 - shipX) * parallaxFactor;\n const moveY = (height \/ 2 - shipY) * parallaxFactor;\n background.style.transform = `translate(${moveX}px, ${moveY}px)`;\n }\n\n function animate() {\n moveStars();\n moveBullets();\n drawStars();\n drawBullets();\n\n shipX += (targetShipX - shipX) * 0.1;\n shipY += (targetShipY - shipY) * 0.1;\n\n const tiltAmount = (targetShipX - shipX) * 0.003;\n const maxTilt = Math.PI \/ 4;\n shipTilt += (tiltAmount - shipTilt) * 0.1;\n shipTilt = Math.max(-maxTilt, Math.min(maxTilt, shipTilt));\n\n updateBackgroundPosition();\n drawShip();\n drawScore();\n requestAnimationFrame(animate);\n }\n\n animate();\n\n canvas.addEventListener('mousemove', (e) => {\n const rect = canvas.getBoundingClientRect();\n const movementRangeX = width * 0.25;\n const movementRangeY = height * 0.25;\n const centerX = width \/ 2;\n const centerY = height \/ 2;\n\n targetShipX = Math.max(centerX - movementRangeX, Math.min(centerX + movementRangeX, e.clientX - rect.left));\n targetShipY = Math.max(centerY - movementRangeY, Math.min(centerY + movementRangeY, e.clientY - rect.top));\n });\n\n window.addEventListener('keydown', (e) => {\n if (e.code === 'Space') {\n bullets.push(...shoot());\n }\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>star truck You\u2019re a once highly-decorated Spacepilot, now working for a syndicate that collects resources from asteroids and tiny objects scattered across the galaxy Your ship is old and battered, but at least the autopilot still works. It\u2019s been 14 days since your last shower, and your stubble\u2019s getting itchy. Gather enough gemstones, and avoid…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-4444","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/4444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/comments?post=4444"}],"version-history":[{"count":15,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/4444\/revisions"}],"predecessor-version":[{"id":4672,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/4444\/revisions\/4672"}],"wp:attachment":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/media?parent=4444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}