DEV Community: Kirill Live

Using GamePad in a browser

Kirill Live — Mon, 01 Nov 2021 11:45:00 +0000

Wanting to add GamePad support to "15 Puzzle maker", I didn't expect the GamePad API to be so interesting.

While researching the documentation and examples on this topic, I was discouraged by such words as “listen to GamePad events” and “events do not happen in Chrome, only in Firefox”, and that there is still no single standard and everything can change at any time.

The desire and curiosity to make "15 Puzzle maker" friends with the GamePad were stronger. With game editors like Scirra Construct, it's easy to use the GamePad in browser.

Following the instructions, I created a "GamePad Connected" event by identifying the device with "navigator.getGamepads".
Most of the examples use the Xbox GamePad, but I used PlayStation 4 DualShock and had no problem with it.

var gamepad;
window.addEventListener('gamepadconnected',function(e){
        const update=()=>{
                     if(gamepad.buttons[12].pressed){alert("bottom");}
                else if(gamepad.buttons[14].pressed){alert("left");}
                else if(gamepad.buttons[15].pressed){alert("right");}
                else if(gamepad.buttons[13].pressed){alert("top");}
            }
    requestAnimationFrame(update);
    }
);

My first surprise was the lack of analogs for keyup and keydown and the definition of keystrokes has to be written manually by checking all the keys.

After I wrote the code to track all buttons and pointed to every frame “requestAnimationFrame”, I found that it works well in Firefox, but does not work in the Chrome browser. It turned out that you need to check not only the keystrokes, but also the connected gamepads.

Many thanks to this resource for the examples: https://www.javascripture.com/Gamepad

Then I needed to force the event to fire only once when the button was pressed, not every frame.
Then I added remembering the key pressed and not triggering an event if the pressed and remembered key are the same.

In my case, the complete code looked like this.

var gamepad,gamepadPress;
window.addEventListener('gamepadconnected',function(e){
    const update=()=>{
        for (gamepad of navigator.getGamepads()){ //checking connected gamepads
            if (!gamepad) continue;
            const statenow=gamepad.buttons.some(btn=>btn.pressed); // check the buttons pressed
            if (gamepadPress!==statenow){ // determine that the button has already been pressed and the action has been performed
                gamepadPress=statenow; // remember the pressed button so as not to repeat the action
                     if(gamepad.buttons[12].pressed){alert("bottom");}
                else if(gamepad.buttons[14].pressed){alert("left");}
                else if(gamepad.buttons[15].pressed){alert("right");}
                else if(gamepad.buttons[13].pressed){alert("top");}
            }
        }
        requestAnimationFrame(update); // set keystroke check for each frame
    };update(); // start checking the keys pressed after connecting the gamepad
});

I'm not sure if the code is correct, but it works

You can use GamePad in "15 Puzzle Maker" here

Editor | Demo | itch.io | GitHub

Using the GamePad in JavaScript is fundamentally different from using the keyboard. But I would not say that this is a bad thing, such a deep API is ideal for games where you need to be good at the GamePad, for example, in a fighting game, where mastery of key combinations and quick use of techniques are key factors. And this GamePad api is perfect for such tasks. Implementing this with common keyboard tools took a lot more time and code. I'm sure whoever came up with this API understood the topic.

Problem 15 puzzle game

Kirill Live — Sun, 17 Oct 2021 09:34:51 +0000

I had nothing to do, I decided to test my skills and tried to create a 15 puzzle game for the browser using only JavaScript and CSS. During development, I did not read how this could be implemented, and did not use the Internet. In the end, everything went smoothly, as it seemed to me, but I often noticed that the last two puzzle squares could not be placed in the right places. At first it seemed to me that something was wrong with me, but the situation where the puzzle could not be completed was stable, and I began to figure out what went wrong.

After reading several articles on the mathematical analysis of this game, I learned that exactly half of all possible combinations of the initial position of the squares (20.922.789.888.000 (= 16!)) Will lead to the impossibility of solving the puzzle. Elsewhere I found out that this problem occurs if swap squares 14 and 15.
In such a situation, in my game, I used mixing squares, just replacing the random block with another random block, it was a very wrong decision. So I decided to replace this part of the game with a natural shuffle, the program just randomly shifted an empty block vertically or horizontally by one square. This option eliminated combinations of blocks that would get in the way of solving the puzzle.

About ten years ago I was making a similar game for Android, but then I did not face this problem, because the terms of reference said: "the movement of the squares when mixing should be visible." And then I remembered about one more item of the same task "The ability to move several blocks towards an empty cell." Oddly enough, when I tackled the previous problem, almost all versions of this game that I have seen did not use this feature. Then I decided to add the ability to move several blocks to my game, and the game became more interesting, the puzzle began to be assembled faster and new tactical possibilities appeared, but, most importantly, it became easier to collect large puzzles with 100 chips or more.

This is how a simple game became an interesting experience for me with new discoveries, despite the fact that I had done it before, with the only difference that at first I did the game on a task, and now for the sake of testing my skills.

But I didn't stop there and made an editor for this game "Fifteen Sliding Puzzle maker". You just need to add your own image and the editor will automatically split it into proportional blocks and adapt the CSS style. You can export the result to an HTML file for integration into your project, or simply use FrameWork "fifteen_puzzle.js", which can be easily modified to suit your needs.

Editor | Demo | itch.io | GitHub

Tuesday JS visual novel engine (open source)

Kirill Live — Mon, 01 Feb 2021 09:16:39 +0000

Introducing Tuesday JS editor for Visual Novels and Interactive Stories for the Browser! It will allow you to create your project without any programming knowledge on any desktop PC with a modern browser.

The main difference from most similar editors is the graphical display of the script structure through blocks with all dialogs, choices and other plot elements. For best clarity, blocks can be assigned with colors in accordance with the mood of the plot or individual branches of characters in such an image, which is important for scriptwriters working in game development.

The scene editor can not only arrange all the elements in their places, it also shows how the scene will change on different screens. On it, you can change the screen size, aspect ratio and orientation in real time, without being distracted when you are editing the scene and to make changes quickly. In your scene layout, you can use standard HTML units in percentage pixels or centimeters to better adapt the scene to different screens.

The environment Tuesday JS provides an ample opportunity to localize your story to other languages, you can set translation for almost any element, either text or image, with that you can fully convey your idea in another language, not only in words, but also through place actions. For the convenience of translation, you can export all texts in the CSV spreadsheet format (in the future I also plan to import the translated texts back).

The novels created do not use canvas technology to display graphics, they use standard HTML components, you can use css styles, svg vector graphics and gif animation just like when you create a regular website.

But if the capabilities of Tuesday JS are not enough for you, all your project data is stored in JSON format, it can be read by most programming languages or game engines. And if you're good at programming, Tuesday JS can offer a very flexible API to interact with history and extend its functionality.

The goal of Tuesday JS is to make project development no more difficult than working in an office program to make presentations, and does not require special skills from the user.

Home Page

itch.io

GitHub