King's Cup game

I just wrote a small card game in JavaScript, CSS and HTML. This is kind of my first project that I have cared about front-end. So I got things to work, but I am sure that this is not the smartest way to do it.

If someone could give me some guidelines on how this would have been done in a more professional way I would be very thankful.

```
window.turn_counter = 0;
window.kings = 0;
window.game = false;

$(document).ready(function(){
$('#help').hide();
$('#turn').hide();
$('#card').hide();
$('#count').hide();
$('#rule_text').hide();
$('#game_buttons').hide();
$('#set_up').hide();

$(document).keydown(function(e) {
//Add this to all the inputs
if (e.keyCode == '32' || e.keyCode == 13) {
if (game == true){
pull_card();
}
}
});
});

function start(){
$('#welcome_screen').hide();
$('#set_up').show();
$('#set_up').append('' +
'');
}

function hide_help(){
$('#help').hide();
$('#game_components').show();
}

function show_help(){
$('#game_components').hide();
$('#help').show();
}

function set_players(){
var number = document.getElementById('num').value;
number = parseInt(number);
//Need do something if string is entered.
window.number_of_players = number;
$('#set_up').empty();

for(i = 0; i ');
}
$('.set_up').append('');
}

function register_players(){
players = new Array();
for (i = 0; i ');
}
$('.set_up').append('');
}

function set_rules(){
rule_set = new Array();
for (i = 0; i ' +
'';

if(card ');
$('#game_buttons').append(game_buttons);
$('#turn').empty();

if (current_turn != undefined){
$('#turn').append('Current player: ' +
current_turn + '');
}

if (turn != undefined){
$('#turn').append('Next player: ' +
turn + '');
}

}

function get_next_turn(){
//add test on get number
if (window.turn_counter == (window.players.length - 1)){
window.turn

For starters don't store any of your variables in the global scope (I.E. window.xxx). Your whole came can be enclosed using the module pattern. To use the module pattern you'll do something like this:

//note that the var game isn't even required if you are only attaching events in here, the var is only needed if there are methods that your module needs to return properties or functions for other parts of your page to use them. 
var game = (function(window, document, undefined){
    //so here you are caching your display elements and putting them in a Object
    var displayElements = {
        help : $('#help'),
        turn : $('#turn'),
        card : $('#card'),
        welcomeScreen :  $('#welcome_screen'),
        setUp : $('#set_up'),
        ....
    },
    numberOfPlayers = 0;
    //anyother stuff you have in your window here

     function start(){
         displayElements.welcomeScreen.hide();
         displayElements.welcomeScreen.hide();
         $('#set_up').append('' +
                '');
     }

     function hide_help(){
         displayElements.help.hide();
         displayElements.gameComponents.show();
     }

     //put your other functions here
}(window, window.document);

Another thing I'd do is create some generic functions for things like hiding elements. This is a typical pattern called a forEach:

function hideElems(elems){
     for(var i = 0; i < elemen.len; i++){
          var elem = elems[i];
          function hide(){
              elem.hide();  //here you won't need jquery since you alredy have jquery objects that you created in the elements object
          }
     }
 }

Now instead of having:

$('#help').hide();
$('#turn').hide();
$('#card').hide();
$('#count').hide();
$('#rule_text').hide();
$('#game_buttons').hide();
$('#set_up').hide();

you'd have:

hideElems([displayElements.help,displayelements.turn...]);

The nice thing about this is that you can call it with any number of elements at a time. There's a lot more I can add but I have to get back to work. I'll see if I can come back tomorrow and add some more.

StackExchange Code Review Q#5329, answer score: 3