Publication of iFrame / HTML5 games on VKontakte. The basics
Immediately, let us designate: the theme of the API VC will not be considered here, I will touch on it in future materials, since it is quite extensive and presents good opportunities. This article will be the most basic part: writing a game and publishing it on a social network, as a running application.
What is required for work:
- Text editor (to your taste)
- Any browser that supports HTML5
- Some free time
Part 1. Playing HTML
I thought that it could be used as an example, let it be the same game as in the video about “Two Boxes”.
Its essence is simple: there are two boxes in front of the user; by clicking on any of them, either the value is added or the value of “score” is subtracted.
')
The whole game from the inside looks like this:
And her files with comments:
onload = “startGame (Menu, 30)” means that the game will be launched from the Menu game state with a frame rate of 30.
The code of the game was written by me for a long time on thej2Ds engine.
Part 2. Google Drive
After writing the game, its debugging, testing, the question arises about where to place the game. The main rule of VKontakte: the game must be placed on an external resource, and access to it must be done with SSL (https: //).
I haven’t found free hosting sites that offer this feature. But there is a “Google Drive” that can play custom JS / HTML files. Great! Even if your game uses the server, you can use the AJAX bridge to it by setting up the server and the application properly so that they can interact normally. From the application, you can connect to any servers, even on a simple http, inside the iFrame VC does not climb. But the game client must be available only through "https: //"
We go to the State Duma:
You can create here any number of folders and files, it does not matter, the main thing is to create a folder where the game will be stored.
If you look at the first screenshot, with the structure of the game files, you will realize that you need to transfer all the files to disk. For this there is a special function to download the entire folder:
After the selection dialog opens, I selected the www folder (in which the index.html is located) simply uploaded it to the server:
As it is not difficult to notice, the file structure is the same.
The next thing to do is to give access to the folder in which index.html is located.
In my case, index.html is in the www folder, so we go back a level and select the www folder and click on the open access icon:
We enable access by reference (top right) and copy the link for sharing:
By this we have opened access to our game to everyone who has been tried on google. In any service. To remove this restriction, go to the “advanced” tab, and then activate access to view everything on the Internet:
Now paste this link into any text editor, we will modify it:
The link looks like this:
Now in bold, I will highlight what we need, the rest can be removed:
https: // drive.google.com/folderview?id= 0B09c3UoyWG0xfjBYaEtxWlNMdDFEbmUwVjhTb3pqV0l5SUI1NTVmLW1CTGE4Vm4zaHgyYmM & usp = sharing
Removing all non-fat, we get a link of the form:
Add after https: // path to googledrive.com/host and get a link like this:
By copying the link in the browser, your game will open. It will open as a normal web page on the Internet, but over a secure connection.
Do not lose the modified link, it will be useful to us.
Part 3. VKontakte
After you have learned how to open your game through Googledrive in the browser, go to the VKontakte site in the application section:
On this page, scroll to the bottom and select "Developers", a page for developers will open:
Then click "Create an application" and fill out the form with your data:
After filling in, VC will send you an sms for confirmation by entering a confirmation code (free) that will transfer you to the control panel of your applications. There will be a lot of different information, you can walk around the tabs, click, check:
Now an important point: the application is still available for launch only to you, as the creator, others do not see it. In order for it to become visible for all you need to select the corresponding item in the “State” column.
Pay attention to the lines for entering the iFrame address. There are two fields. The first field is the http address, the second is https. It is better to both fill in the format https, so safer. That link that we received by simple modifications inserted into the address and save the data. After saving the data, you can try to start the game:
Now, opening the “Application Management” item you can manipulate your game, watch statistics, etc.
You can manage the files of the game itself simply: edit them, for example, on a local machine, and, as soon as all changes are debugged, replace the files on a Google disk in the desired folder. You do not need to re-set permissions and access, since they are set for the entire folder, you do not need to change the links either.
An example of the resulting application can be given in the LAN.
I have it all. Work with VK API is already there and is available in the form of video lessons, which I will not publish here. Earlier for posting a video account has been blocked.
What is required for work:
- Text editor (to your taste)
- Any browser that supports HTML5
- Some free time
Part 1. Playing HTML
I thought that it could be used as an example, let it be the same game as in the video about “Two Boxes”.
Its essence is simple: there are two boxes in front of the user; by clicking on any of them, either the value is added or the value of “score” is subtracted.
')
The whole game from the inside looks like this:
And her files with comments:
Index.html file
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="j2ds/math.js"></script> <script type="text/javascript" src="j2ds/input.js"></script> <script type="text/javascript" src="j2ds/dom.js"></script> <script type="text/javascript" src="j2ds/j2ds.js"></script> <script type="text/javascript" src="j2ds/post.js"></script> <script type="text/javascript" src="menu.js"></script> <script type="text/javascript" src="game.js"></script> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width,user-scalable=no" /> <title> </title> </head> <body onload="startGame(Menu, 30);"> <canvas id="iCanvas" width="550" height="300"></canvas> <script type="text/javascript"> // scene= createScene('iCanvas', '#EED6C6'); // scene.fullScreen(true); // initInput(scene); // post= createPost(scene); // createMenu(); // createGame(); </script> </body> </html> onload = “startGame (Menu, 30)” means that the game will be launched from the Menu game state with a frame rate of 30.
Menu.js file
function createMenu() { // selection= 0; // , menuSelector= createRect(vec2df(50, 50), vec2df(30, 30), '#CD8181'); // , menuItem1= createRect(vec2df(190, 100), vec2df(300, 50), '#AAA189'); menuItem2= createRect(vec2df(190, 220), vec2df(300, 50), '#AAA189'); } // Menu function Menu() { // input.upd(); // if (input.lClick) { // if (input.onNode(menuItem1)) { // , , if (selection == 0) { setActivEngine(Game); } else { selection= 0; } } // else if (input.onNode(menuItem2)) { if (selection == 1) { setActivEngine(Records); } else { selection= 1; } } // , input.cancel(); } // , if (selection == 0) menuSelector.moveTo(menuItem1, vec2df(-40, 0)); // , if (selection == 1) menuSelector.moveTo(menuItem2, vec2df(-40, 0)); // menuItem1.draw(scene); menuItem2.draw(scene); // menuSelector.turn(5); // menuSelector.draw(scene); // scene.drawTextOpt( vec2df(200, 115), // '!', // 'bold 20px sans-serif', // ( CSS) 'white', // 'black', // 2 // ); scene.drawTextOpt( vec2df(200, 235), // '!', // 'bold 20px sans-serif', // ( CSS) 'white', // 'black', // 2 // ); scene.drawTextOpt( vec2df(150, 20), // ' !', // 'bold 30px sans-serif', // ( CSS) '#478EA4', // 'white', // 2 // ); // post.motionBlur(5); } // Records, "" // function Records() { // , // if (input.lClick) { setActivEngine(Menu); input.cancel(); } // scene.drawTextOpt( vec2df(150, 20), // '', // 'bold 30px sans-serif', // ( CSS) '#478EA4', // 'white', // 2 // ); } For reference
vec2df () is an object constructor that stores two variables in it: x and y are in real type, if you want to use only integers, for this there is vec2di ()
Game.js file
// score= 0; // function createGame() { // 1, 2, 3 pos= 0; // "" panel= createRect(vec2df(20, 60), vec2df(510, 220), '#4E7B46'); // cell= createLine( vec2df(100, 100), // [ // [40, 0], [0, 24], [20, -15], [30, 24], [0, -1] ], 1, // (1 - ) 'white', 2, // , true, 'yellow'); // // box1= createRect(vec2df(130, 110), vec2df(100, 100), '#FDF88D'); // box2= createRect(vec2df(330, 110), vec2df(100, 100), '#FDF88D'); } // function Game() { // / input.upd(); // (pos == 0), , if (!pos) pos= Random(0 , 2); // (pos == 3) if (pos == 3) { // if (input.lClick) { // createGame(); // input.cancel(); } } // , if (pos == 1) { cell.setPosition(vec2df(190, 160)); } // if (pos == 2) { cell.setPosition(vec2df(390, 160)); } // if (input.lClick) { // if (input.onNode(box1)) { // if (pos == 1) { // // box1.color= '#FFEB00'; score+= 1; box1.pos= vec2df(130, 50); } // , else { box1.color= 'red'; score-= 1; } // 3, , pos= 3; } // else if (input.onNode(box2)) { if (pos == 2) { box2.color= '#FFEB00'; score+= 1; box2.pos= vec2df(330, 50); } else { box2.color= 'red'; score-= 1; } pos= 3; } input.cancel(); } // panel.draw(scene); // cell.draw(scene); // box1.draw(scene); box2.draw(scene); scene.drawTextOpt( vec2df(150, 10), // ' !', // 'bold 30px sans-serif', // ( CSS) '#478EA4', // 'white', // 2 // ); scene.drawTextOpt( vec2df(440, 280), // 'Score: '+score, // 'bold 20px sans-serif', // ( CSS) '#478EA4', // 'white', // 2 // ); } The code of the game was written by me for a long time on the
Part 2. Google Drive
After writing the game, its debugging, testing, the question arises about where to place the game. The main rule of VKontakte: the game must be placed on an external resource, and access to it must be done with SSL (https: //).
I haven’t found free hosting sites that offer this feature. But there is a “Google Drive” that can play custom JS / HTML files. Great! Even if your game uses the server, you can use the AJAX bridge to it by setting up the server and the application properly so that they can interact normally. From the application, you can connect to any servers, even on a simple http, inside the iFrame VC does not climb. But the game client must be available only through "https: //"
We go to the State Duma:
You can create here any number of folders and files, it does not matter, the main thing is to create a folder where the game will be stored.
If you look at the first screenshot, with the structure of the game files, you will realize that you need to transfer all the files to disk. For this there is a special function to download the entire folder:
After the selection dialog opens, I selected the www folder (in which the index.html is located) simply uploaded it to the server:
As it is not difficult to notice, the file structure is the same.
The next thing to do is to give access to the folder in which index.html is located.
In my case, index.html is in the www folder, so we go back a level and select the www folder and click on the open access icon:
We enable access by reference (top right) and copy the link for sharing:
By this we have opened access to our game to everyone who has been tried on google. In any service. To remove this restriction, go to the “advanced” tab, and then activate access to view everything on the Internet:
Now paste this link into any text editor, we will modify it:
The link looks like this:
https://drive.google.com/folderview?id=0B09c3UoyWG0xfjBYaEtxWlNMdDFEbmUwVjhTb3pqV0l5SUI1NTVmLW1CTGE4Vm4zaHgyYmM&usp=sharing
Now in bold, I will highlight what we need, the rest can be removed:
https: // drive.google.com/folderview?id= 0B09c3UoyWG0xfjBYaEtxWlNMdDFEbmUwVjhTb3pqV0l5SUI1NTVmLW1CTGE4Vm4zaHgyYmM & usp = sharing
Removing all non-fat, we get a link of the form:
https://0B09c3UoyWG0xfjBYaEtxWlNMdDFEbmUwVjhTb3pqV0l5SUI1NTVmLW1CTGE4Vm4zaHgyYmM
Add after https: // path to googledrive.com/host and get a link like this:
https://googledrive.com/host/0B09c3UoyWG0xfjBYaEtxWlNMdDFEbmUwVjhTb3pqV0l5SUI1NTVmLW1CTGE4Vm4zaHgyYmM
By copying the link in the browser, your game will open. It will open as a normal web page on the Internet, but over a secure connection.
Do not lose the modified link, it will be useful to us.
Part 3. VKontakte
After you have learned how to open your game through Googledrive in the browser, go to the VKontakte site in the application section:
On this page, scroll to the bottom and select "Developers", a page for developers will open:
Then click "Create an application" and fill out the form with your data:
After filling in, VC will send you an sms for confirmation by entering a confirmation code (free) that will transfer you to the control panel of your applications. There will be a lot of different information, you can walk around the tabs, click, check:
Now an important point: the application is still available for launch only to you, as the creator, others do not see it. In order for it to become visible for all you need to select the corresponding item in the “State” column.
Pay attention to the lines for entering the iFrame address. There are two fields. The first field is the http address, the second is https. It is better to both fill in the format https, so safer. That link that we received by simple modifications inserted into the address and save the data. After saving the data, you can try to start the game:
Now, opening the “Application Management” item you can manipulate your game, watch statistics, etc.
You can manage the files of the game itself simply: edit them, for example, on a local machine, and, as soon as all changes are debugged, replace the files on a Google disk in the desired folder. You do not need to re-set permissions and access, since they are set for the entire folder, you do not need to change the links either.
An example of the resulting application can be given in the LAN.
I have it all. Work with VK API is already there and is available in the form of video lessons, which I will not publish here. Earlier for posting a video account has been blocked.
Source: https://habr.com/ru/post/265469/
All Articles