Creating MMO using canvas - javascript

So I will be using javacript and HTML to create a game in canvas in my planning stage however I started to wonder how I was gonna handle multiple users editing and playing on the same "canvas" per say
So to describe my issue I wanna tell you a little about the game
When I was 7(now 18) I played this amazing game called "Pocket Empires" it brought Teamwork to a whole new playing field it had everything you see in the modern day "Clash of Clans" but while in battle if you were struggling your alliance members could jump in the battle and save you
It was truly a remarkable game I encourage everyone to look it up
This game however was android only and fell through the cracks in 2013 and I have looked for a game clone since but have found nothing truly like it since so now I am going to create it myself
The main thing about the game I am concerned with is displaying the same thing across all screens for example
Player 1 places a building
Player 2 should see that on his screen
or
Player 1 is attacking some goblins
Player 2(if in the same alliance) should see player 1 attacking and should be able to join in
I have done a lot of research over the years I have a web development certificate in both HTML and CSS(as if that actually mattered) Afterwards I spent another 2 years learning Javacript and PHP
Now I know php will not be of use without ajax which I want to avoid at all cost so thats all the information I believe I can provide now I leave it to y'all to lead me in the right direction

You can use web sockets to :
send the action of the user to the server
get the actions of others player and to show what needs to

Related

Is there a way to prevent click input from bots?

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 ?

JavaScript Based Image Input & Keyboard Output

this is my first post!
I am working on a project with AI for a game. I am trying to recreate Tetris with Javascript, HTML, and CSS to train an AI to play. After making the game, I would then need to incorporate the AI into it. After it is trained, I want to test the AI against other, real-time players to see how good it is. This is similar to what Code Bullet did, I have attached that video. My question is, is there any way to have my AI play on a website against other players? I think this would be possible if I could somehow get input from the site it is playing on, sending it to the AI, and receiving output in the form of simulated presses from the AI. I know this is possible with Python, but I am unfamiliar with that language. If you could help me, that would be much appreciated.
Thank you!
Code Bullet's video
P.S. Since this is my first post, please let me know if I am doing something wrong/missing something in my post. Thank you again!

How do I create an object such as a wall in javascript?

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

Real time motion object detection/recognition on webcam stream in javascript and webgl

I have just started a school assignment where they want me to detect and recognize objects in a webcam stream, in an webgl application. It will be added to an already existing javascript plugin. It is important that this will be done in real time since the objects will change stuff in the application.
Example, if a user wears a yellow shirt with a specific icon on it will change the layout of the application.
I have researched this a few days now and found some intresting articles.
This seems like an intresting approach:
http://research.ijcaonline.org/volume83/number3/pxc3892575.pdf
And ofcourse the SURF algorithm seems to be a legimate approach:
http://www.vision.ee.ethz.ch/~surf/eccv06.pdf
So my question is "what algortihms might be best to implement?".
And also if possible, which might be easiest to implement? I have quite limited time and this is only one of the objectives for this project.
I appreciate all the help and answers I can get.
edit. Surf is not acceptable because of patents.
Please refer to the HAAR cascade or SURF based classifiers featured in this answer (replace "face" with "any object").
However, you would probably need to train your own classifiers which is not possible within a limited timeframe.
Alternatively, simplify your application and go with simple color tracking.

Advice on specific Web Based 3D Game Development

I'm relatively new to HTML and Javascript, but I'm knee deep in the Udacity interactive 3D course and have gotten my hands dirty with some three.js + WebGL. And I've been able to make and somewhat understand this:
http://goo.gl/UPWKKL
So far.(having a hard time understanding the API and getting cannon.js and really any interesting mechanics to work, any advice for learning APIs like threejs?)
I was wondering if anyone could provide any input for someone whose end goal is to make a game that is somewhat like a demi-version of: REZ, Exteel, Armored Core or Zone of The Enders versus mode.
My goal is implementing: rail shooting(w/ cannon.js?), health bars, NPC boss battles with different stages, animated movements, a cross-hair, level bounds, concepts of upgrades to a character.
To be really specific, a 5 level game with PointerLockControl + shooting interface, where each level pass requires bringing a boss' health bar down to zero. The enemy would have a vulnerable mesh area where if bullet objects hit it, it'd trigger a collision event where its health decreased. If health<= 25 it speeds up and becomes harder to kill. After its death the screen blacks out and restarts with a new boss and so on. I'd want to put in victory screens, failure screens and if possible, cut scenes where I guess I'd disable user control and enable some kind of path cinematic camera. And preferrably for this to all be in the browser like Quake, BUT if something like this isn't possible, I'd try something else.
Sorry if this question is too broad or weird, I want to work on video games for a living, I will appreciate any feedback I get, I just want to know if someone more experienced can look at what kind of game I want to make and recommend some up to date material or helpful sites.
Currently I'm working with webGL and threejs, I've looked into Unity3D but I can't develop that on my Linux machine. Far FARR down the line I'd like make full blown games in C++.
Design as specifically as possible, because then you will have lots of small tasks whose role in the greater whole is known. Then if you don't know what to do on any given day, just look at your design, your map, and pick a piece that you can do that day.
Sorry if this answer is not specific to WebGL but you have asked broadly.

Categories