I am building an Adobe AIR (HTML/JavaScript) app for a client who wants to display a game interface on two screens. One screen is where the user will interact with the game itself, the other screen (shown on a projector) will show the game to an audience. The contents of screen 2 is NOT the same as screen 1, so it's NOT a case of mirroring.
An example of this, is a bingo game where the user will click buttons on screen 1 to pull out numbers, etc. And screen 2 will just show the number grid and next number pulled out to the audience who are playing the game. So you can imagine this in a hall of people, with screen 1 being displayed to the guy on stage, and screen 2 being projected to everyone else in the hall. So screen 2 has no interaction and ONLY displays data.
How would I handle this? As I need to be able to send commands to the other window to make it show numbers, update the number grid, etc.
I've looked at doing something like:
projectorWindow.setWindowReference(air.NativeApplication.nativeApplication.openedWindows[1].stage.getChildAt(0).window);
projectorWindow.sendNumber( 88 );
But does anyone have a better idea? Existing examples of doing this?
Second question:
Also in order to make the windows know what each is talking about, I presume I will have to load the EXACT same code into each one so basically load a HTML file like: Bingo.html and then pass a query string to tell it what mode to run in... e.g. Bingo.html?mode=user and Bingo.html?mode=audience does that sound right? Or would there be a better way to do this?
So for example:
function loadGame(game) {
mainWindow.load(new air.URLRequest(game + '.html?mode=user'));
projectorWindow.load(new air.URLRequest(game + '.html?mode=audience'));
}
Not quite sure how I'll trigger the different UI elements based on the query string yet... but is this the best way to build a split screen game using AIR? Or could I do it better?
Related
I'm trying to make a football website, using Javascript, where the user can pick a formation and play and a screenshot of the play will come up on the page. I have about 3000 or so screenshots of the plays from the football game, but I'm struggling with how to work with this much data.
Most of the pics are 2mb. So I'm needing some advice on how to shrink the image sizes, or how to store all of the images so I can fetch them when their certain play is picked from a dropdown menu.
I am familiar with using Mongoose and MongoDB, but I'm not sure if there's a way to upload all of these images, or if that is even the most efficient way to solve my problem.
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 ?
I am programming a game in JavaScript, the game involves player one controlling an image of a head around the screen by using the arrows on the keyboard. The aim is to get as much burgers shown on the screen. Once you get it, it will randomly appear somewhere else on the screen. My first problem is how do i create an obstacle such as a wall in JavaScript? my second problem is how do i create a rule that result's in game over if the obstacle is touched?
It is easy to solve by using box2D, and I use the framework which integrates box2D.
this is the example link I did 2 mins ago:game link
if you don't know how to use it,my facebook messenger is Alan Nie
So I'm working an a little game that is online. It's a probability game and I'd like to have a few slides that have information and then the actual game. I'm using html & javascript to make the game and then css (which I don't know yet) to make it look better.
How would I go about creating different pages, should I just have an image and then make it opaque when I don't need it and then show another one over it?
The reason I'm asking is because I'm sure there is a much better way to do this but don't know how because I'm new to web coding.
you can make two separated pages.
contain the images one after another .. first image will have JS onclick .. on this function you will hide this image and show the other image
second image will be treated like link to the game page.
I am looking forward to designing a web page with a matrix layout. like #. It would have max. 8 columns and 3 rows.
I have decided on 8 columns as every screen width resolution on PC, mobile, tablets divides perfectly by 8. I have decided on 3 rows as it is readable. Though vertical scroll bar shows automatically, asking a visitor to click it to see the content is a pain to him. So, visitor needs to see complete paragraphs/sections the first he sees the page.
When I left coding for web (as I started managing my team members. I hardly used to program until some time back and seem to lost out a lot.) when CSS/js was just coming out. Now it dominates even the HTML. So, using CSS is the way to go. (Imho, I actually find coding CSS a scary job).
Looks to be a huge requirement, after I have searched for the resources online.
Problems:
* Fixed columns over different resolutions
* Fixed rows
* Placing right content in right matrix boxes.
How do I start?
Update: I am a huge fan of http://www.nytimes.com/chrome. The main screen which shows assorted news in a matrix is a wonderful and unique design. The matrix changes dynamically to respond to changing screen resolution.
How can we design it?
Probably, first, you forget about non-standard grid of 8x3. Then, you
Check the demo;
Download 960 grid system;
Read tutorial with the video;
start using that grid. Will be much easier to maintain it in the future
You may care about this.
If not, just make <ul> and <table> forms.