Игры Кубок Короля


Я просто написал небольшую карточная игра на JavaScript, CSS и HTML. Это мой первый проект, который я заботился о фронт-энд. Так что я получил вещи, чтобы работать, но я уверен, что это не самый умный способ сделать это.

Если кто-то может дать мне некоторые рекомендации о том, как это было бы сделано более профессионально, я бы очень благодарны.

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('<input type="text" ' +
                'class="input_field center" id="num" ' +
                'value="Number of players">' +
                '<img alt="setup button" ' + 
                'class="button center" ' +
                'onclick="set_players()" ' +
                'src="static/button_proceed.png">');
}

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 < window.number_of_players; i++){
        var player_number = i + 1;
        $('#set_up').append('<input class="input_field center"' + 
                    ' value="Player #' + 
                    player_number + '" type="text" id="' + 
                    i + '" >');
    }
    $('.set_up').append('<img alt="proceed button" id="proceed_button" ' +
                'class="center button" src="static/button_proceed.png"' + 
                ' onclick=register_players()>');
 }

function register_players(){
    players = new Array();
    for (i = 0; i < window.number_of_players; i++){
        players[i] = document.getElementById(i).value;
    }
    window.players = players;
    set_up_rules();
}

function set_up_rules(){
    $('.set_up').empty();
    for (i = 0; i < 12; i++){
        if (i == 0){
            name = 'Ace';
        }
        else if (i == 10){
            name = 'Jack';
        }
        else if (i == 11){
            name = 'Queen';
        }

    else{
        name = 'card ' + (i + 1);
    }
    $('.set_up').append('<input value="Rule for ' + 
                name + '" class="input_field center" id="other' + 
                i + '" type="text">');
}   
$('.set_up').append('<br><img alt="setup button" class="button center"' + 
            ' src="static/button_startgame.png" ' + 
            'onclick="set_rules()">');
}

function set_rules(){
    rule_set = new Array();
    for (i = 0; i < 12; i++){
        card_rule = document.getElementById('other' + i).value;
        rule_set[i] = card_rule;
    }
    rule_set[12] = 'KINGS CUP!!'
    window.rule_set = rule_set; 
    start_game();
}

function start_game(){
    new_deck();
    pull_card();
    $('#help_button').hide();
    $('#set_up').hide();
    $('#turn').show();
    $('#card').show();
    $('#game_buttons').show();
    game = true;
}

function pull_card(){
    item = Math.random() * deck.length;
    card = window.deck.splice(item,1);
    display_card(card);
}

function display_card(card){
    //weird flash, need to empty content for each card
    game_buttons = '<img class="center button" alt="next card button" ' +
            'src="static/button_nextcard.png" ' +
            'onclick="pull_card()" >' +
            '<img class="center button" alt="remind me of rule button" ' + 
            'src="static/button_remindme.png" ' + 
            'onclick="display_rule()" >';

if(card < 1){
    alert("Deck is empty. The game will reload");
    window.location.reload();
    }

current_turn = get_current_turn()
turn = get_next_turn()    

//need to be called to check if it is the last king
get_rule(card, current_turn)

//needs to be done to prevent weird flash
$('#game_buttons').empty();
$('#card').empty();
$('#card').append('<img class="center" alt="' + card + '"src=/static/cards/' + 
            card + '.png >');
$('#game_buttons').append(game_buttons);
$('#turn').empty();

if (current_turn != undefined){
    $('#turn').append('<h2 class="center" >Current player: ' + 
                current_turn + '</h2>');
}

if (turn != undefined){
    $('#turn').append('<h2 class="center">Next player: ' + 
    turn + '</h2>'); 
}

}

function get_next_turn(){
    //add test on get number
    if (window.turn_counter == (window.players.length - 1)){
        window.turn_counter = -1;
    }
    window.turn_counter += 1;
    player = window.players[window.turn_counter];
    return player;     
}

function get_current_turn(){
    return window.players[window.turn_counter];
}

function get_rule(card, player){
    num = String(card);
    num = num.substring(1);
    if (num == 13){
        window.kings +=1;
        if (window.kings == 4){
            if (player == undefined){
                alert('LAST KING! Congratulations!')
            }
        else{
            alert('LAST KING! Congratulations ' + player + '!')
        }
    }
}
return window.rule_set[num - 1];
}

function display_rule(){
    rule = get_rule(card, get_current_turn());
    alert(rule);
}

function new_deck(){
var deck = new Array(
            'd1',
            'd2',
            'd3',
            'd4',
            'd5',
            'd6',
            'd7',
            'd8',
            'd9',
            'd10',
            'd11',
            'd12',
            'd13',
            'h1',
            'h2',
            'h3',
            'h4',
            'h5',
            'h6',
            'h7',
            'h8',
            'h9',
            'h10',
            'h11',
            'h12',
            'h13',
            'c1',
            'c2',
            'c3',
            'c4',
            'c5',
            'c6',
            'c7',
            'c8',
            'c9',
            'c10',
            'c11',
            'c12',
            'c13',
            's1',
            's2',
            's3',
            's4',
            's5',
            's6',
            's7',
            's8',
            's9',
            's10',
            's11',
            's12',
            's13'
            );
    window.deck = deck;
}

Я не буду размещать HTML и CSS, но вы можете найти игры здесь.



565
4
задан 12 октября 2011 в 09:10 Источник Поделиться
Комментарии
3 ответа

Для начала не хранить любой из ваших переменных в глобальной области видимости (окно Е. И..ХХХ). Вся твоя пришла может быть заключен с использованием шаблона модуля. Чтобы использовать шаблон модуля вы будете делать что-то вроде этого:

//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('<input type="text" ' +
'class="input_field center" id="num" ' +
'value="Number of players">' +
'<img alt="setup button" ' +
'class="button center" ' +
'onclick="set_players()" ' +
'src="static/button_proceed.png">');
}

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

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

Другое дело, что я бы сделать, это создать некоторые универсальные функции для таких вещей, как элементы скрываются. Это типичная картина называется цикл 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
}
}
}

Теперь вместо того, чтобы:

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

вы бы:

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

Хорошая вещь об этом является то, что его можно вызвать с любым количеством элементов одновременно. Есть намного больше я могу добавить, но мне нужно вернуться на работу. Я буду видеть, если я могу вернуться завтра и добавить еще несколько.

3
ответ дан 13 октября 2011 в 01:10 Источник Поделиться

Это отличный старт. С точки Raynos' вы могли бы смоделировать это на более управляемые куски. Вот такое jQuery шаблон статьи, чтобы помочь вам начать работу: необходимые jQuery плагин картины Адди Османи

1
ответ дан 12 октября 2011 в 10:10 Источник Поделиться

Пару вещей могли бы сделать это чище.

Как другие сказали ... модулировать/плагин-Изе и т. д. в процессе пока нет

window.GlobalVariableName = someVal;

вместо того, чтобы сделать объект:

window.MyCardGame = {
GlobalVariableName: somVal,

GlobalFunction: function (){ ... }
};

Или закрытие

(function(){
var Global = val; // Global variable to anything in this closure only.
})();

модели, как:

for(i = 0; i < 12; i++){
if (i == 0){
name = 'Ace';
}
else if (i == 10){
name = 'Jack';
}
else if (i == 11){
name = 'Queen';
}

else{
name = 'card ' + (i + 1);
}
// etc.
}

может быть выражено с помощью переключателя, который
чище/легче читать (ИМХО):

for(i = 0; i < 12; i++){
switch(i)
{
case 0:
name = 'Ace';
break;
case 10:
name = 'Jack';
break;
case 11:
name = 'Queen';
break;
default:
name = 'card ' + (i + 1);
break;
}
// etc.
}

зы: где король?

Когда вы делаете

$("#elementID").someFN();
$("#elementID").otherFN();

Он должен получить два раза один и тот же элемент. jQuery имеет возможность цепочки:

$("#elementID").someFN().otherFN();
// OR
$("#elementID")
.someFN()
.otherFN();

1
ответ дан 12 октября 2011 в 11:10 Источник Поделиться