Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Key Movements #24

Closed
wants to merge 9 commits into from

13 participants

Steve Gricci William Bowers Jason Held Christos Porios Joseph McCullough Xav namanix Liam Dawe Jonathan Dahan Justin Clift Nick Desaulniers Epo Jemba
Steve Gricci

Added ability to move around the map using arrow keys.

William Bowers

We might want to use WASD for right-handed players as this game also requires control of the mouse. Left handed players would probably still want to use the arrow keys:

case Types.Keys.LEFT:
case Types.Keys.A:
    game.makePlayerGoLeft();
    break;
Steve Gricci

@willurd: thanks for the suggestion, I've added WASD and "space" for attack, as well as several other hotkeys for other parts of the interface

William Bowers

Nice!

Jason Held

Hotkeys still seem to be active while typing in chat box, which causes movement as well as help, achievement windows, etc. to open while typing a message. I'd suggest deactivating these hotkeys while the chat window is open. :-)

Christos Porios

This was really needed, nice.

Joseph McCullough

@Keylan Would the best way to proceed with that be offer an entirely different switch statement based on

 if($('#chatbox').hasClass('active'))...

?

Jason Held

@joequery I don't think an entirely different switch case is necessary. Can probably just edit the if statement before it to:

if (game.started && !$('#chatbox').hasClass('active')) {

considering the handler for the enter key is before the if statement.

Joseph McCullough

@Keylan Ah, good point, I didn't realize that all the keys relate to out of chat functionality.

Xav

WASD does not suit any keyboards, think about other kb layouts.

William Bowers

@damajor Do you mean that it doesn't suit all keyboard layouts?

namanix

Ever heard of azerty keyboards. If not. Google it. And view the pictures. And look at the places of the keys. It will make you gasp ;p

William Bowers

@namanix I'm sure most programmers are aware that non-qwerty keyboard layouts exist. Short of providing some mechanism of configuring key bindings (which is possibly something we might want to look into), I'm unsure how we might go about supporting all of them.

Xav

@willurd : you cannot use WASD on some kb layouts because it has no meaning due to the keys location.

William Bowers

@damajor How would you get around that?

Xav

Honestly I didnt dig into JS features so I can only propose 2 ways to work around this issue:

  • let the user sets the keys he wants to use for Up/Left/Right/Down...

or

  • (far from being efficient) grab the main existing kb layouts and do some preconf inside the JS based on the kb layout detection (but I dont know if it is feasible).
Christos Porios

@damajor Yes, but why do that? Why complicate the UI by adding an additional menu with configuration options that 95% of the users will never touch? In this case, I think simplicity is more important than configurability. Whoever doesn't like the keyboard commands can just use their mouse. I think azerty keyboard users will actually be glad BrowserQuest provides mouse support.

Xav

@tech-no-crat Complicated UI, yes that is what we are debating here. I just think that when a feature is implemented it has to be done the right way and in a way to be portable and available for everyone.

Making a feature and saying to someone or a bunch of people "no you can't use it because you do not live there or there and/or does not own such kind of peripheral" is just too easy.

I wont argue on you arguments that says that azerty people should be happy to have their mouse to be able to play the game, I am just sick of that....

Steve Gricci
Christos Porios

@damajor:

Complicated UI, yes that is what we are debating here

Configurability and simplicity do depend on each other.

I just think that when a feature is implemented it has to be done the right way and in a way to be portable and available for everyone. Making a feature and saying to someone or a bunch of people "no you can't use it because you do not live there or there and/or does not own such kind of peripheral" is just too easy.

Sadly, that's practically impossible. There are target groups for every feature. Mobile phones and tablets won't get this feature no matter what. Using a mobile device is their choice and so is using a specific keyboard. Non-QWERTY keyboards are very rare and the users who choose them are probably not using them for gaming anyway. And if they are, as @sgricci said, they can still use the arrows and the mouse. Don't forget that this feature is completely optional. Plus this is an open-source project, go ahead and fork it if you insist.

I like this pull request as it is. Anyway, this isn't really worth debating.

I wish I could resist:
not so funny image

Steve Gricci
Steve Gricci
Xav

@sgricci : I already proposed some kind of workaround, you are of course free to decide which one (or none) to implement. Well anyway I wont participate to this issue anymore due to the exceptional level of unnecessary and not constructive remarks contained... BTW Good luck.

@tech-no-crat : I am really sad to say that but you seem to be a so short minded guy...

Liam Dawe

As long as i can use WASD for movement i will be happy, keep up the good work!

Epo Jemba

Hi there it can be a good thing, if you made this compatible keyboard layout based (azerty, qwerty etc etc ) here I'm azerty ....

Jonathan Dahan

Incremental improvements. +1 for qwerty support, thanks for the patch!

semu commented April 10, 2012

thanks @sgricci, #78 is built upon your code…

Justin Clift

@sgricci Just committed your pull request to the repo here.

Trying to get all of the useful looking commits together in one spot, to make future development easier. :)

Nick Desaulniers
Collaborator

Thanks for taking a look at the source code for BrowserQuest! BrowserQuest was developed by Little Workshop on behalf of Mozilla to showcase how the Web is the ultimate cross platform for games.

Mozilla does not currently have the resources to maintain BrowserQuest, but you should check out some of these amazing community forks instead! Feel free to add your fork to the wiki.

English

Korean

Android

Windows Phone

Erlang based

  • sedrik/bqs - Erlang implementation of the BrowserQuest server

C++ based

Related

  • HabitRPG - A habit building program which treats your life like a Role Playing Game
    • Uses the BrowserQuest character icons (CC-licensed) for some of their stuff, and is looking to contribute back the icons they've developed since

No longer actively developed

French

Nick Desaulniers nickdesaulniers closed this September 03, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
82  client/js/game.js
@@ -1561,13 +1561,58 @@ function(InfoManager, BubbleManager, Renderer, Map, Animation, Sprite, AnimatedT
1561 1561
         },
1562 1562
 
1563 1563
         /**
  1564
+         *
  1565
+         */
  1566
+        makePlayerAttackNext: function()
  1567
+        {
  1568
+
  1569
+            pos = {
  1570
+                x: this.player.gridX,
  1571
+                y: this.player.gridY
  1572
+            };
  1573
+            switch(this.player.orientation)
  1574
+            {
  1575
+                case Types.Orientations.DOWN:
  1576
+                    pos.y += 1;
  1577
+                    this.makePlayerAttackTo(pos);
  1578
+                    break;
  1579
+                case Types.Orientations.UP:
  1580
+                    pos.y -= 1;
  1581
+                    this.makePlayerAttackTo(pos);
  1582
+                    break;
  1583
+                case Types.Orientations.LEFT:
  1584
+                    pos.x -= 1;
  1585
+                    this.makePlayerAttackTo(pos);
  1586
+                    break;
  1587
+                case Types.Orientations.RIGHT:
  1588
+                    pos.x += 1;
  1589
+                    this.makePlayerAttackTo(pos);
  1590
+                    break;
  1591
+
  1592
+                default:
  1593
+                    break;
  1594
+            }
  1595
+        },
  1596
+
  1597
+        /**
  1598
+         *
  1599
+         */
  1600
+        makePlayerAttackTo: function(pos)
  1601
+        {
  1602
+            entity = this.getEntityAt(pos.x, pos.y);
  1603
+            if(entity instanceof Mob) {
  1604
+                this.makePlayerAttack(entity);
  1605
+            }
  1606
+        },
  1607
+
  1608
+        /**
1564 1609
          * Moves the current player to a given target location.
1565 1610
          * @see makeCharacterGoTo
1566 1611
          */
1567 1612
         makePlayerGoTo: function(x, y) {
1568 1613
             this.makeCharacterGoTo(this.player, x, y);
1569 1614
         },
1570  
-    
  1615
+
1571 1616
         /**
1572 1617
          * Moves the current player towards a specific item.
1573 1618
          * @see makeCharacterGoTo
@@ -1899,20 +1944,39 @@ function(InfoManager, BubbleManager, Renderer, Map, Animation, Sprite, AnimatedT
1899 1944
             }
1900 1945
         },
1901 1946
     
1902  
-        /**
1903  
-         * Processes game logic when the user triggers a click/touch event during the game.
1904  
-         */
1905  
-        click: function() {
1906  
-            var pos = this.getMouseGridPosition(),
1907  
-                entity;
1908  
-            
  1947
+        /**         
  1948
+         * Moves the player one space, if possible
  1949
+         */     
  1950
+        keys: function(pos, orientation) {
  1951
+            oldHoveringCollidingValue = this.hoveringCollidingTile;
  1952
+            this.hoveringCollidingTile = false;
  1953
+
  1954
+            this.processInput(pos);
  1955
+            this.player.turnTo(orientation);
  1956
+
  1957
+            this.hoveringCollidingTile = oldHoveringCollidingValue;
  1958
+        },
  1959
+
  1960
+        click: function()
  1961
+        {
  1962
+            var pos = this.getMouseGridPosition();
  1963
+
1909 1964
             if(pos.x === this.previousClickPosition.x
1910 1965
             && pos.y === this.previousClickPosition.y) {
1911 1966
                 return;
1912 1967
             } else {
1913 1968
                 this.previousClickPosition = pos;
1914 1969
             }
1915  
-	        
  1970
+
  1971
+            this.processInput(pos);
  1972
+        },
  1973
+
  1974
+        /**
  1975
+         * Processes game logic when the user triggers a click/touch event during the game.
  1976
+         */
  1977
+        processInput: function(pos) {
  1978
+            var entity;
  1979
+
1916 1980
     	    if(this.started
1917 1981
     	    && this.player
1918 1982
     	    && !this.isZoning()
52  client/js/main.js
@@ -307,13 +307,63 @@ define(['jquery', 'app'], function($, App) {
307 307
             	var key = e.which,
308 308
                     $chat = $('#chatinput');
309 309
 
310  
-                if(key === 13) {
  310
+                if(key === Types.Keys.ENTER) {
311 311
                     if($('#chatbox').hasClass('active')) {
312 312
                         app.hideChat();
313 313
                     } else {
314 314
                         app.showChat();
315 315
                     }
316 316
                 }
  317
+                if (game.started && !$('#chatbox').hasClass('active'))
  318
+                {
  319
+                    pos = {
  320
+                        x: game.player.gridX,
  321
+                        y: game.player.gridY
  322
+                    };
  323
+                    switch(key) {
  324
+                        case Types.Keys.LEFT:
  325
+                        case Types.Keys.A:
  326
+                        case Types.Keys.KEYPAD_4:
  327
+                            pos.x -= 1;
  328
+                            game.keys(pos, Types.Orientations.LEFT);
  329
+                            break;
  330
+                        case Types.Keys.RIGHT:
  331
+                        case Types.Keys.D:
  332
+                        case Types.Keys.KEYPAD_6:
  333
+                            pos.x += 1;
  334
+                            game.keys(pos, Types.Orientations.RIGHT);
  335
+                            break;
  336
+                        case Types.Keys.UP:
  337
+                        case Types.Keys.W:
  338
+                        case Types.Keys.KEYPAD_8:
  339
+                            pos.y -= 1;
  340
+                            game.keys(pos, Types.Orientations.UP);
  341
+                            break;
  342
+                        case Types.Keys.DOWN:
  343
+                        case Types.Keys.S:
  344
+                        case Types.Keys.KEYPAD_2:
  345
+                            pos.y += 1;
  346
+                            game.keys(pos, Types.Orientations.DOWN);
  347
+                            break;
  348
+                        case Types.Keys.SPACE:
  349
+                            game.makePlayerAttackNext();
  350
+                            break;
  351
+                        case Types.Keys.I:
  352
+                            $('#achievementsbutton').click();
  353
+                            break;
  354
+                        case Types.Keys.H:
  355
+                            $('#helpbutton').click();
  356
+                            break;
  357
+                        case Types.Keys.M:
  358
+                            $('#mutebutton').click();
  359
+                            break;
  360
+                        case Types.Keys.P:
  361
+                            $('#playercount').click();
  362
+                            break;
  363
+                        default:
  364
+                            break;
  365
+                    }
  366
+                }
317 367
             });
318 368
             
319 369
             $('#chatinput').keydown(function(e) {
21  shared/js/gametypes.js
@@ -97,6 +97,27 @@ Types = {
97 97
         DOWN: 2,
98 98
         LEFT: 3,
99 99
         RIGHT: 4
  100
+    },
  101
+
  102
+    Keys: {
  103
+        ENTER: 13,
  104
+        UP: 38,
  105
+        DOWN: 40,
  106
+        LEFT: 37,
  107
+        RIGHT: 39,
  108
+        W: 87,
  109
+        A: 65,
  110
+        S: 83,
  111
+        D: 68,
  112
+        SPACE: 32,
  113
+        I: 73,
  114
+        H: 72,
  115
+        M: 77,
  116
+        P: 80,
  117
+        KEYPAD_4: 100,
  118
+        KEYPAD_6: 102,
  119
+        KEYPAD_8: 104,
  120
+        KEYPAD_2: 98
100 121
     }
101 122
 };
102 123
 
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.