I have a javascript canvas game with pixi.js that requires a player to press a certain combination of buttons to complete a level. They basically have to press the button that matches a certain color.
It turns out that players are writing bots in python to do this task and they are getting the maxium score each time. The game is already live and users enjoy playing it so I can't really change anything gameplay wise.
So I thought about a few possible solutions but I have some concerns
Captcha between each level
Check the speed of the input
Check how consistent the input is
The captcha will hurt user experience, and there are tons of video's how to bypass it. 2 and 3 will fail after the creators of the bots understand what is happening. So I am really stuck on what I could do.
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 <input type="image"> 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".
I think your approach is valid. It seems a bit excessive to add Capcha between each level, perhaps add it before the game starts.
It might be a good idea to check interval between individual clicks, and define some threshold when you can safely assume that it was a bot who clicked the button.
Another approach you could take is to make it more complicated to look up the correct buttons. Approaches like randomizing the element IDs, not rendering the label inside the buttons but as separate elements (I assume it is a game with some fixed window size and you don't care about mobile that much).
I am not familiar with Pixi.js, but that could be an approach to consider.
----------------------- Edit -----------------------
What if you run your game in an iframe ?
Related
A lot of online games use animations of HTML elements as a core gameplay mechanics. For example, a solitaire game may have a DIV element or an IMG element for every card on the gameboard. Players drag and drop these cards across the board, and the game often shows animations that last a few seconds. An example of such animation is dealing cards, i.e. distributing them from the deck to their proper places on the gameboard at the beginning of the game. This is usually done 1) without user interaction, upon entering the website, and then 2) after user interaction, upon finishing one game and starting another.
These animations are longer than 500 ms, and so (as I understand) the elements, which finish their movement after that time, count towards CLS regardless of whether the user initiated the animation or not. Moreover, the card-dealing animation that greets the user on the website is entirely counted towards CLS. This might be solved by forcing the user to interact with the website before the initial animation, but it is a bad UX, as this is an extra unnecessary and potentially annoying click for the user. There is a lot to write about it, but for now, I’ll just state that showing a (not user-initiated) greeting animation is the best UX practice in this context and it is employed by the most popular games (also those using canvas).
The websites with games based on HTML elements are quite popular, and include Solitaire, Mahjong, Minesweeper etc. Some are at the top spots in the Google search results and have hundreds of thousands of users every month. I suspect that other, non-game-related sites may also employ useful movement animations of HTML elements which are appreciated by the users. Hence, I’ll ask in general:
Do I understand correctly that such animations of HTML elements, despite being expected by the user, are misclassified by contemporary CLS measures as unexpected?
Is the intention of the designers of the CLS measures to penalize this type of website behavior? I am especially asking in terms of SEO as I suspect CLS may be used as a factor by some ranking algorithms.
It's hard to say exactly what's causing your issue without knowing how you've implemented your animations, but if you are animating or transitioning using the CSS transform property, then it shouldn't contribute to CLS because it doesn't trigger a re-layout of the page.
In general, this is a best practice for smooth animations, so I'd recommend it even if your CLS was fine.
See more details here: https://web.dev/optimize-cls/#animations
We are creating an app that lets a user capture a number of images and it will try to create a 3D model of the target object. In order to help the users capture useful images we give them some guidance while they move their phone from one capture to the next.
We have a nice prototype working by means of navigator.mediaDevices.getUserMedia() that captures video, displays it in a <video> element, and has an overlay that shows how to move the phone. When they are ready they press a button and we grab the current frame of the streamed video.
We were quite happy with this until we realized that very often the captured image would not have enough quality; mainly they tend to be a bit blurred because the user may not hold the device totally still. This causes the math behind creating the 3D model to fail.
I am now tasked with attempting to improve this but I think I don't have many options. Here is what I have been investigating and their drawbacks:
JavaScript's ImageCapture API. This seems to be exactly what we need: a way to actually take a picture instead of grabbing a frame from a video. While the API has still an experimental status, it seems pretty stable and Chrome has it implemented since version 59. The problem is that Safari (our main target) does not have it implemented and it seems they won't ever do. I can't really find information on what their plan is though but as of today, this is not an option.
Use the input element of type file with the attribute capture. While this lets me capture images with the native camera, I cannot give the user any guide as far as I know.
Create a whole mobile app. This requires another year of work and requesting our existing users to install an app, which may not be possible. Also leaves Android devices out which we'd prefer not to.
While typing this I thought of perhaps using the video instead of capturing the images, but not sure this would help in any way.
Instead of a different approach to the way of capturing the image, I could try to only grab the image if I can confirm that the device is as close as still as possible (using a threshold value). Perhaps I could use the gyroscope for this (we are using it to check they have moved the device to a place and angle we consider useful for the process). The drawback of this is that I am not sure it would really mitigate our problem... how still is still enough? is it possible for the person to be that still for a second?
So my question here is, can anyone think of another alternative to those I descrived? or perhaps improve one of the enumerated ones?
BTW does anyone know what are Apple's plans for the ImageCapture API?
I've been gathering ideas for my personal project in CSS/JavaScript/XHTML.
The idea is to replicate this:
And so far I have this (I know it's far away from what I need, but just playing around)
http://jsfiddle.net/dburelax/XY8CA/9/
I was wondering if http:// processingjs.org/exhibition/ is my best choice to get this done in javascript? Thanks
P.S: I have no idea how to make the character move within the tiles any suggestions are welcome :)
I'd say light years away. But don't take it as sarcasm; let me explain.
What I see when I look at the gif is an engine that supports block "primitives".
Because, you see, every time he hovers a tile with the pointer it gets decorated with a white border.
In your case, you just have two images:
A map background
A gif of sprites for the character (without his back or sideway, but let's just forget that for now).
With these two in order to achieve the block highlighting you should always calculate offset, and apply image filters on the background with the border decoration (and shadows and what not). Then, when moving outside the box remove decoration the last window.
After that what do you do if you change box size? Recalibrate all offsets? What if you have boxes/bocks (I'll call them interchangeably now) in mixed sizes?
In game engines particularly you have primitives such as boxes, where you can detect collisions and either allow passage or not from the colliding box (a character is a box as well). Think how this would be practical if you for example had "fog of war" and allowed vision only in adjacent boxes.
It's not just about processing.js, which may or may not be helpful to you, but there are key bindings, character movement, character orientation to be thought about first.
I don't know about you, but I wouldn't be able to encode all that information in Javascript objects and still have it performant. Not with current Javascript engines, at least.
While your hobby project is a fun idea, there is much much more you have to learn first to be able to pull this off.
In the case I have offended, take but this and all is mended -- The Goblin
If this is in the scope of learning programming, while having a project to keep you motivated; then go for it (use the path I've deemed hard), learn first how to move images on the HTML5 canvas and when having actual code problems come back.
I need to create a flip book/page application. I have seen flash created flip page, can it be done in any other languages, e.g. jquery or javascript? And also, what are some concepts that I am required to have in mind/knowledge on for creating a flip book?
Thanks.
Not quite sure what you mean by "flip book", can you elaborate on this?
If you mean just a digital book, that you can turn the pages of, then I would surgest looking into this AS3 page-flip engine. And here is a list of good (mostly commercial) examples
EDIT* - Not to sure why you would want to create this from scratch, as there are a ton of well made Page-flip libraries out there that are really nicely build, and are either free, or really cheep. Most of the time they are customizable too.
That said, I think they are probably all using a combination of the following:
Preloaded pages - movieclip with either an image or
other graphics preloaded into it
Gradients - to give the illusion of a 3d page that is "turning"
Trigonometry - for dragging effect. To angle the page towards mouse
Masks - to get the page folding effect, when the user start to drag the page, the next page is loaded over the top. Both these page have been masked off based on the users mouse position.
Also the Page-flip engine I linked to above (MegaZine), is open-source. So if you where really keen, then you could dive into there source code and take a look for yourself.
Hope that helps somewhat.
If you need something simple, and don't want to delve into codes, try out pressmo: http://pressmo.com/example3/1
It works faster on slower computers than most of other similar services and what's important you keep your flipbook on your own computer/web server (as online flash or offline executable).
To create a flip page you have to upload your content as a PDF file (which can be easily obtained from Word or Open Office).
Usually a good solution for flipbooks is to keep the number of your pages even, otherside the user will not have the possibility to turn the last site. All pages should be similar size also.
You can use Flex Application
Like this right: Sample Book
Code is here: Source Code
I am thinking as a challenge i should write a javascript based game. I want sound, images and input. A background to simulate a screen (like 640x480 with all my images in it) would be useful to separate the rest of the page from the 'game'. What should i look at?
Some things i would need
Framecontrol. A way to get the current time (or delta).
Image, displaying it and moving it. How do i display full image. Knowing pixel access may be cool.
Input A way to lock it in a box (like flash does) is cool.
Sound play simple sounds on demand (like when i get a hit). Several sounds at once would be great
Bottlenecks. What are things that will kill the CPU?
Restrictions. What cant i do? I hear i cant 'sleep' to wait. I must set a callback
Good or best pratice. What are good things i can do to either keep speed up or to lower glitch or compatibility problems.
I'm going to answer this looking at things from a mootools javascript perspective:
Framecontrol. A way to get the current time (or delta).
periodical()
Image, displaying it and moving it. How do i display full image.
setStyles()
Input A way to lock it in a box (like
flash does) is cool.
Plain old CSS
Sound play simple sounds on demand
(like when i get a hit).
Swiff, remote();
Bottlenecks. What are things that will
kill the CPU?
Internet Explorer.
Restrictions.
3D ... ?
What are good things i can do ... to
lower glitch or compatibility
problems.
Use a framework.
As a starting point, you may want to write it for Opera, as Opera provides a game canvas that will help you out.
For some examples of games in javascript:
http://dev.opera.com/articles/view/3d-games-with-canvas-and-raycasting-part/
http://my.opera.com/WebApplications/blog/show.dml/200788
This one is interesting, it is demos of games using the canvas element.
http://www.canvasdemos.com/tag/games/
The best way to see where the problems are is to start writing the game, and then you will see what may be a problem. By looking at demos you can get an idea what performance issues they encountered. For example, a full 3D Doom game will have problems, but, as the first article above explains, there are some ways to optimize for javascript.
Once you get it working with Opera, then you can look at Firefox 3.5+ and Safari, as well as Chrome, and see if you can make some changes to have it work on those. How many platforms it works on depends on how much work you want to do for it. For a proof-of-concept pick the easiest browser for your task.
The best place to start would be to get very familiar with the <canvas> tag (it allows you to draw anything on screen)
This may help a lot:
http://benfirshman.com/projects/jsnes/
its an online NES emulator that renders everything on screen - the source is also available
Hope that helps =)