pixi.js | HTML5 Creation Engine : Create beautiful digital content | Graphics library

I guess the problem is that you haven't added background to the stage, because you commented it.

For anyone who comes across this question, I've had the exact same error. It was hard for me to find solutions on StackOverflow, but in the end, I figured it out.

First, if you want to use a public server, it'll have to have CORs enabled. Then, it should work fine.

If you want to use an image hosted on a local server (e.g. using the http-server package to run a local file repository), for the image source, you'll have to use the full link – e.g. http://127.0.0.1:8001 instead of something like localhost:8001, which won't work. You'll also have to enable the CORs option (for instance, for http-server, that would mean adding the --cors flag)

You have to create a container to attach the pixi canvas to

I was able to improve performance by using GraphicsGeometry object to create the Graphics object. The relevant code is shown below.

Not sure if this is related but I added Pixi to my Svelte project (based on the official Svelte starter template using rollup) and I started to get this error:

This answer is based on the codepen.io link that you provided. The code uses the first 2 variables for the speed of the snow animation:

Use a PIXI.Container.

I figured it out a couple of minutes after posting so I'll post my solution incase it helps anyone in the future.

My inital mistake was using the app ticker. Instead my createBullet() function now creates a new ticker for each bullet. That ticker is destoryed by moveBullet() when the bullet moves out of bounds.

I would consider a random grace period before allowing the buttons to be clicked. this may stump some bots, but is circumventable.

Besides that, I would profile the timing of the clicks/interactions. Every time next level is requested, compare to the profile, and if they are consistently the same introduce a randomized button id, button shape (circle, oval, square, etc.), button placement (swap buttons) to avoid easy scripting. Also the font and the actual text could be varied.

I would also change the input element to since it will give you the exact coordinates (if possible - I'm not familiar with pixi.js) and this will aid in the profiling.

You could also implement some sort of mouse position tracker, but people on touchscreens will not produce data for this. You could supplement with additional check if the user input is touch, but a bot would easily be able to circumvent it.

EDIT
I don't know if some library to detect other JavaScript imports and thereby detecting potential bots would be applicable. Might be one avenue to consider.

Doing something like this: Check whether user has a Chrome extension installed to verify that you are running in a browser and not in a python environment could be another avenue. It would mean that you restrict your users to certain browsers, and as a lot of other code, could be circumvented. Cost/benefit should be kept in mind here.
If everything is being run though the actual browser with some sort of headless interface it is not going to be useful at all.

EDIT 2
A quick googling of python automate browser game brings up a tutorial of how to automate browser games with python. based on a cursory glance, making your buttons move around and changing font would be effective, and even resizing the playing area "randomly" (even if you have a full screen function) may be a viable defense. Again, following the tutorial and trying to automate it using that, and seeing how to block it would be a good exercise.

You could also consider asking some students for help. This could be a good project idea for many computer studies courses that offer project based courses. It could also be a student job type deal - if you want to ensure that you get a result and a "report".