Need help adding game to store as a custom section

[jacrob]

I have the code for a game that I want to add as a custom section on my storefront but am not sure where to add the individual files into to the existing code for the Dawn theme. Below is a link to the code on Github. Any help would be much appreciated. I have next-to-no knowledge in coding.

GitHub - WebDevSimplified/chrome-dino-game-clone

[EBOOST]

Hi @jacrob

1. Go to Store Online-> theme → edit code

2. Add a game section

3. copy code below to this file

  
0

  Press Any Key To Start

  
  
  

{% schema %}
  {
    "name": "Game",
    "settings": [],
    "presets": [
    {
      "name": "Game"
    }
  ]
  }
{% endschema %}

4. upload all images, updateCustomProperty.js, script.js,ground.js to Assets

5. create Assets/cactus.js with code below

import {
  setCustomProperty,
  incrementCustomProperty,
  getCustomProperty,
} from "./updateCustomProperty.js"

const SPEED = 0.05
const CACTUS_INTERVAL_MIN = 500
const CACTUS_INTERVAL_MAX = 2000
const worldElem = document.querySelector("[data-world]")

let nextCactusTime
export function setupCactus() {
  nextCactusTime = CACTUS_INTERVAL_MIN
  document.querySelectorAll("[data-cactus]").forEach(cactus => {
    cactus.remove()
  })
}

export function updateCactus(delta, speedScale) {
  document.querySelectorAll("[data-cactus]").forEach(cactus => {
    incrementCustomProperty(cactus, "--left", delta * speedScale * SPEED * -1)
    if (getCustomProperty(cactus, "--left") <= -100) {
      cactus.remove()
    }
  })

  if (nextCactusTime <= 0) {
    createCactus()
    nextCactusTime =
      randomNumberBetween(CACTUS_INTERVAL_MIN, CACTUS_INTERVAL_MAX) / speedScale
  }
  nextCactusTime -= delta
}

export function getCactusRects() {
  return [...document.querySelectorAll("[data-cactus]")].map(cactus => {
    return cactus.getBoundingClientRect()
  })
}

function createCactus() {
  const cactus = document.createElement("img")
  cactus.dataset.cactus = true
  cactus.src="https://cdn.shopify.com/s/files/1/0325/7437/4026/t/27/assets/cactus.png"
  cactus.classList.add("cactus")
  setCustomProperty(cactus, "--left", 100)
  worldElem.append(cactus)
}

function randomNumberBetween(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}

6. create assets/dino.js with code below

import {
  incrementCustomProperty,
  setCustomProperty,
  getCustomProperty,
} from "./updateCustomProperty.js"

const dinoElem = document.querySelector("[data-dino]")
const JUMP_SPEED = 0.45
const GRAVITY = 0.0015
const DINO_FRAME_COUNT = 2
const FRAME_TIME = 100

let isJumping
let dinoFrame
let currentFrameTime
let yVelocity
export function setupDino() {
  isJumping = false
  dinoFrame = 0
  currentFrameTime = 0
  yVelocity = 0
  setCustomProperty(dinoElem, "--bottom", 0)
  document.removeEventListener("keydown", onJump)
  document.addEventListener("keydown", onJump)
}

export function updateDino(delta, speedScale) {
  handleRun(delta, speedScale)
  handleJump(delta)
}

export function getDinoRect() {
  return dinoElem.getBoundingClientRect()
}

export function setDinoLose() {
  dinoElem.src="https://cdn.shopify.com/s/files/1/0325/7437/4026/t/27/assets/dino-lose.png"
}

function handleRun(delta, speedScale) {
  if (isJumping) {
    dinoElem.src=`https://cdn.shopify.com/s/files/1/0325/7437/4026/t/27/assets/dino-stationary.png`
    return
  }

  if (currentFrameTime >= FRAME_TIME) {
    dinoFrame = (dinoFrame + 1) % DINO_FRAME_COUNT
    dinoElem.src=`https://cdn.shopify.com/s/files/1/0325/7437/4026/t/27/assets/dino-run-${dinoFrame}.png`
    currentFrameTime -= FRAME_TIME
  }
  currentFrameTime += delta * speedScale
}

function handleJump(delta) {
  if (!isJumping) return

  incrementCustomProperty(dinoElem, "--bottom", yVelocity * delta)

  if (getCustomProperty(dinoElem, "--bottom") <= 0) {
    setCustomProperty(dinoElem, "--bottom", 0)
    isJumping = false
  }

  yVelocity -= GRAVITY * delta
}

function onJump(e) {
  if (e.code !== "Space" || isJumping) return

  yVelocity = JUMP_SPEED
  isJumping = true
}

7. Go to Store Online-> theme-> customize → add game section

It shown on my site https://youtu.be/d4MzXTey0ik

[jacrob]

Thank you for your help! Everything seems to be working smoothly.

[hoopsandheritag]

Hello, I added everything and the game itself works. However, the png cactus and Dino won’t load after starting the game. They simply turn to question marks. The ground png works and shows in game. How can I fix the other pngs?

[doodlefiti]

I am having the same exact issue and am having trouble trying to resolve

[EBOOST]

You need to replace the image url with your image url