Card-fighting game

Question

I am currently building my first game/app in javascript. It is a very simple script that has about 130~ lines of code. I feel like what I did so far is not optimized, can anyone please help me optimize the code also, can you please explain your changes?

How the game works: At the start of the game every player gets 20 random cards from the cards array. Every time the player clicks on the Attack button the top card from the player and the computer are compared the different of the number is then converted in dmg. Let's say I draw a 4 and the computer a 3, the computer will receive 1 dmg point. Whenever the computer or the player's HP reach 0 the game is over. Functions that I still have to build but that I can't figure it out for now are: the players top card is always visible and the second function I want is a dodge one. So the player can choose dodge left or right, the game picks one at random and if the player got the right one he will deal the full dmg from his card and receives 0 dmg. But if he got it wrong he will get the full dmg and deal 0 dmg.

Game Screenshot:

var cards = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10,
             1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8,8, 9, 9, 10, 10];
var shuffledCards = shuffle(cards);
var playerDeck = shuffledCards.slice(0,20);
var computerDeck = shuffledCards.slice(20);
var playerlife = 25;
var computerLife = 25;
var playerFeedback = document.getElementById('playerFeedback');
var playerName;
var sword = new Audio('sounds/sword.mp3');
var block = new Audio('sounds/block.mp3');

function getPlayerName() {
    playerName = document.getElementById('userInput').value;
    if (playerName.length == 0) {
        return false;
    }
    document.getElementById('playerName').innerHTML = playerName;
    document.getElementById('playerName').innerHTML = playerName;
    document.getElementById('overlay').style.display = 'none';
}

function shuffle(array) {
    var m = array.length, t, i;

    // While there remain elements to shuffle…
    while (m) {

        // Pick a remaining element…
        i = Math.floor(Math.random() * m--);

        // And swap it with the current element.
        t = array[m];
        array[m] = array[i];
        array[i] = t;
    }

    return array;
}

function getTopCard(deck) {
    return deck[0];
}

function dealCards() {
    var playerTopCard = getTopCard(playerDeck);
    var computerTopCard = getTopCard(computerDeck);
    var cardImage = "<img src='images/cardBack.png'/>";

    whoWon();

    document.getElementById("card1").innerHTML = "<div class='cardNumber'>" + playerTopCard + '</div>' + cardImage;
    document.getElementById("card2").innerHTML = "<div class='cardNumber'>" + computerTopCard + '</div>' + cardImage;
    document.getElementById("scoreComputer").innerHTML = computerLife;
    document.getElementById("scorePlayer").innerHTML = playerlife;
}

function whoWon() {
    var playerTopCard = getTopCard(playerDeck);
    var computerTopCard = getTopCard(computerDeck);
    document.getElementById('computerDamageImage').setAttribute('src', 'images/empty.png');
    document.getElementById('playerDamageImage').setAttribute('src', 'images/empty.png');

    if (playerTopCard > computerTopCard) {
        computerLife = computerLife - (playerTopCard - computerTopCard);
        sword.play();
        document.getElementById('computerDamageImage').setAttribute('src', 'images/damage.gif');
        playerFeedback.innerHTML = 'Hunter lost: ' + (playerTopCard - computerTopCard) + ' HP';
        checkIsGameOver();
        playerDeck.shift();
        computerDeck.shift();
    } else if (playerTopCard < computerTopCard) {
        playerlife = playerlife - (computerTopCard - playerTopCard);
        sword.play();
        document.getElementById('playerDamageImage').setAttribute('src', 'images/damage.gif');
        playerFeedback.innerHTML = playerName + ' lost: ' + (computerTopCard - playerTopCard) + ' HP';
        checkIsGameOver();
        playerDeck.shift();
        computerDeck.shift();
    } else {
        block.play();
        playerDeck.shift();
        computerDeck.shift();
        playerFeedback.innerHTML = 'It was a tie!';
    }
}

shuffle(cards);

document.getElementById("click").addEventListener("click", dealCards);
document.getElementById("replay").addEventListener("click", replay);
document.getElementById("userSubmit").addEventListener("click", getPlayerName);
 function replay() {
     window.location.reload();
 }

function checkIsGameOver() {
    var gameResult = document.getElementById('gameResult');
    var gameResultContent = gameResult.innerHTML;
    var replay = document.getElementById('replay');
    var click = document.getElementById('click');
    var dodgeL = document.getElementById('dodgeL');
    var dodgeR = document.getElementById('dodgeR');

    function gameIsOver() {
        playerFeedback.innerHTML = 'Game Over, do you want to play again?';
        gameResult.innerHTML = gameResultContent;
        gameResult.style.display = 'block';
        replay.style.display = 'inline';
        click.style.display = 'none';
        dodgeL.style.display = 'none';
        dodgeR.style.display = 'none';
    }

    if (playerlife <= 0) {
        playerlife = 'Lost';
        computerLife = 'Won';
        gameResultContent = '<p>Hunter won the game!</p>';
        gameIsOver();
    } else if (computerLife <= 0) {
        computerLife = 'Lost';
        playerlife = 'Won';
        gameResultContent = '<p>' + playerName + ' won the game!</p>';
        gameIsOver();
    }
}

Answer 1

There has always been an interesting debate between number of lines and legibility of the code. You could have less lines but not a readable or more lines and bad code. Don't focus so much on the number of lines but on the efficiency and scalability of the code.

Some ways to possibly improve are:

• Suggestion: You could reduce some code if you implement jQuery (It'll make certain things simpler, but not necessarily reduce number of lines)
  • Example: Instead of writing document.getElementById('name') everytime, with jQuery you can simply do $('name')
• The code document.getElementById('playerName').innerHTML = playerName; is repeated twice
• In the whoWon() some lines of code are repeated in every condition such as playerDeck.shift(); and computerDeck.shift();. This can be written once after all the conditions are done.
• When you validate playerName.length == 0, this can be bypassed if spaces are entered, try to trim the value input.value.trim == ''
• Maybe add documentation to function headers

Side note: The game looks interesting and the design is nice. Good luck with it :)