getting syntax error unexpected < in JSON at position 0

Question

I don't have any JSON files in this program only js and html my theory is that the program is running the html like a JSON file I'm using replit and kaboom to run the game

HTML code:

<!DOCTYPE html>

<html>

<head>
    <title>kaboom</title>
    <meta charset="utf-8">
    <style>
        * {
            margin: 0;
        }
        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>

<body>
{{kaboom}}
</body>

</html>

js code:

import kaboom from "kaboom";

// initialize context
kaboom();
scene();
const SPEED = 320
var METEORX = 2
const NiceX = 20
//onsole.log(str(METEORX))
// load assets
loadSprite("grass", "sprites/grass.png");
loadSprite("Player", "sprites/Player.png");
loadPedit("meteor", "sprites/meteor.pedit");
loadPedit("air Meteor", "sprites/air Meteor.pedit");
// add a character to screen
const meteor = add ([
  sprite("air Meteor"),
  pos(rand(0, width()), 40),
  area(),
  move(DOWN, 300),
  "meteor",
  "enemy",
  cleanup(20)
])

var player = add([
  // list of components
  "player",
  sprite("Player"),
  pos(center()),
  area(),
  body(),
  health(3)
]);
add([
    rect(width(), 48),
    "ground",
  pos(0, height() - 48),
    outline(4),
    area(),
    solid(),
    color(127, 200, 255),
])
onCollide("player", "enemy", () => {
  
  player.hurt(1.5)
  
    
})
loadPedit("ground meteor", "sprites/ground meteor.pedit");
var difficulty = 5;

onCollide("enemy", (niceMeteor) => {
  addExplosion()
  destroy(niceMeteor)
})
onKeyPress("space", () => {
  if (player.grounded()) {
    player.jump()
  }
}) 
onKeyDown("d", () => {
  player.move(SPEED, 0)
})

onKeyDown("a", () => {
  player.move(-SPEED, 0)
})

It is not clear from your question what's triggering the error. Can you please provide more detail? (This is why stack overflow requires text be included in the question alongside the code, please don't bypass that with spam in future) — Daniel Beck, Dec 03 '21 at 18:58

score 0 · Answer 1 · answered Dec 18 '21 at 22:10

The most likely scenario is that one of the sprites you have specified does not exist. In this case you should also see an error: ERROR: sprite not found: "<your sprite name here>". (I think it's a bug that kaboom tries to parse the response as JSON at all in this case, because it's getting a 404 response with content-type text/html).

Another possibility, however improbable, is that one of your sprite files is corrupt. Kaboom's .pedit file format is actually a JSON file with image data embedded as base64:

{
  "version": "1",
  "width": 32,
  "height": 32,
  "palette": [[0,0,0,255],[255,255,255,255],[255,255,128,255],[255,128,255,255],[0,128,128,255],[128,0,255,255],[255,0,128,255],[0,255,255,255]],
  "anims": {
    "Test": {"from":0,"to":1,"loop":true}
  },
  "frames":[
    "data:image/png;base64,...",
    "data:image/png;base64,..."
  ]
}

So if one of those files got corrupted during editing that could also cause this error. Normally in order to figure this out I would suggest you look at the stack trace for the error that is being thrown, which is visible in your web browser's developer console. However, Kaboom does not produce good stack traces for calls to loadPedit. So your best bet is probably to put some console.log('loading sprite XXX') statements before each load call. Once you know which pedit file is invalid you can rename that file from whatever.pedit to whatever.json and inspect the contents in your repl.

getting syntax error unexpected < in JSON at position 0

1 Answers1