Consoles are no longer needed (but this is not certain)

Good day, dear readers. I don't know if anyone has done something like this before me, so I decided to share the idea of ​​my pet-project and take a little of your time.





In the beginning there was a rabbit

Since childhood, I loved to play games, now little has changed. Even more I like to spend a couple of hours playing with friends / colleagues / children. Unfortunately, a console with controllers is not always at hand. It is this difficulty that I will try to solve.





The idea to use my phone as a controller arose in my head a long time ago . Over the years, I kept thinking about this topic, but delayed implementation for a variety of reasons. As a result, I changed several jobs, moved from the northern capital to the capital, and finally decided to make at least a demo version in order to understand how good this idea is.





It all started with the fact that one summer last year, I offered my son to help design a character for the game. This is how the rabbit appeared.





mr.  Rabbit
mr. Rabbit

Main idea

- -, , , . ? ! /smartTV///.../ , , qr- , - !





- , - .





, 8 , .





: , , , . 4- (right, left, front, back) 2- (, ). , .





, , , , , youtube. ( , , , youtube )





-, , , , , .





( ) , , .. :





  1. - html, canvas, css, js, canvas





  2. - php, mySQL





, .





BEGET ( -, ).





GIT - .





p.s. , , , smartTV canvas, canvas div.





id , qr- , GET- id ( qr- API ).





.





10 (60 fps ) , , .





, , , - . .





, :





:





  1. -> ->





  2. -> ->





. "" shoot ( ). touchstart touchend . jq .





$(document).on("touchstart  mousedown", ".button", function(e){
		if (this.id==='fire') {
			personToSend.shoot=1;
			showPerson();//   
			sendStateToDB(); //   
			setTimeout(nullFire, 100); // 
		} else {
			personToSend.move=1;
			personToSend.direction=this.id;
			showPerson();
			sendStateToDB();
		}
});  
      
      



. , demo- .





, .





5 :





  1. lassGame -





  2. ClassEntity - 2 -





  3. ClassFlower ( ClassEntity) -





  4. ClassPerson ( ClassEntity) -





  5. ClassBullet ( ClassEntity) -





js .





ClassGame .





ClassGame

, . , . - :









  1. div'









  2. , , .





, , :

  1. , smartTV cloneNode append js, append jq. . ( , bootstrap 5, jq)





  2. 3-d z-index,





  3. QR-





  4. , . , . ,





  5. - , . QR-









  6. 2-





  7. , -





  8. , WebStorm - IDE. , , , .





, , , . , . , , :













  1. , ,





  2. ( , . / RPG drag and drop . , . , , .. )





  3. , wi-fi qr-,





  4. , , .





  5. . .





As you can see, the scope for reflection is simply endless. And I think this idea potentially has a good future.





I will gladly answer all your questions and listen to your thoughts on the above.








All Articles