{"id":113,"date":"2024-06-13T18:15:04","date_gmt":"2024-06-13T18:15:04","guid":{"rendered":"http:\/\/landing.anderskisling.dk\/?page_id=113"},"modified":"2024-08-27T17:30:39","modified_gmt":"2024-08-27T17:30:39","slug":"startruck","status":"publish","type":"page","link":"https:\/\/landing.anderskisling.dk\/index.php\/startruck\/","title":{"rendered":"Star Truck"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"113\" class=\"elementor elementor-113\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e173bb7 e-con-full e-flex e-con e-parent\" data-id=\"e173bb7\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-729ed20 elementor-widget elementor-widget-spacer\" data-id=\"729ed20\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e8e1a53 elementor-widget elementor-widget-heading\" data-id=\"e8e1a53\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">STAR TRUCK<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bb2528c elementor-widget elementor-widget-html\" data-id=\"bb2528c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"space-container\">\n  <canvas id=\"starfield\"><\/canvas>\n<\/div>\n<style>\n  .space-container {\n    width: 100%;\n    height: 100vh;\n    overflow: hidden;\n    position: relative;\n    background-color: #000; \/* Sort baggrund *\/\n  }\n  #starfield {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 2;\n  }\n  .space-container::before {\n    content: '';\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; \/* Juster dette for at \u00e6ndre baggrundsbilledets synlighed *\/\n    z-index: 1;\n  }\n<\/style>\n<script>\n  const canvas = document.getElementById('starfield');\n  const ctx = canvas.getContext('2d');\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\/07\/spacetruck-dummy1.png';\n  const shipWidth = 528 * 0.4;\n  const shipHeight = 145 * 0.4;\n\n  function setCanvasSize() {\n    width = canvas.width = window.innerWidth;\n    height = canvas.height = window.innerHeight;\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 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    drawShip();\n    drawScore();\n    requestAnimationFrame(animate);\n  }\n\n  animate();\n\n  canvas.addEventListener('mousemove', (e) => {\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));\n    targetShipY = Math.max(centerY - movementRangeY, Math.min(centerY + movementRangeY, e.clientY));\n  });\n\n  window.addEventListener('keydown', (e) => {\n    if (e.code === 'Space') {\n      bullets.push(...shoot());\n    }\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-69a2310 elementor-widget elementor-widget-spacer\" data-id=\"69a2310\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\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<\/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-113","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/113","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=113"}],"version-history":[{"count":15,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/113\/revisions"}],"predecessor-version":[{"id":4440,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/113\/revisions\/4440"}],"wp:attachment":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/media?parent=113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}