Skip to main content
edited tags
Link
Quill
  • 11.9k
  • 5
  • 40
  • 93
edited body; edited tags
Source Link
Simon Forsberg
  • 59.4k
  • 9
  • 156
  • 309

In a few weeks I need to give a workshop about JavaScript to colleagues. They do not have much experience with JavaScript so I will explain the basics of JavaScript. At the end of the day I want them to make a small game with the aspects learned during the day.

I was thinking of Rock Paper Scissors. Below you can find the final code for this game:

var RockPaperScissors = (function () {
    var t = 'Tie',
        c = 'Computer wins',
        p = 'Player wins',
        winningMap = [
            [t, c, p],
            [p, t, c],
            [c, p, t]
        ],
        choices = ["Rock", "Paper", "Scissors"];

    var getComputerChoice = function () {
        return Math.floor(Math.random() * 3);
    };

    var getWinner = function (playerChoice, computerChoice) {
        return winningMap[playerChoice][computerChoice];
    };

    function RockPaperScissors(playerChoice) {
        this.playerChoice = playerChoice;
        this.computerChoice = getComputerChoice();
        this.winner = getWinner(this.playerChoice, this.computerChoice);
    }

    RockPaperScissors.prototype.toString = function () {
        return this.winner + " [Computer: " + choices[this.computerChoice] + ", Player: " + choices[this.playerChoice] + "]";
    };

    return RockPaperScissors;

})();

This code is executed everytime a select input box changes (see this as the user input):

$('#choice').on('change', function () {
    var $input = $(this);

    if ($input.val() === '-1') return;

    var rockPaperScissors = new RockPaperScissors($input.val());

    $('#message').html(rockPaperScissors.toString());
});

I've also set up a Fiddle.

Do you think this code is clear for beginners? Is this too advanced? I'm not sure if I should introduce them to prototyping yes/noor not.

In a few weeks I need to give a workshop about JavaScript to colleagues. They do not have much experience with JavaScript so I will explain the basics of JavaScript. At the end of the day I want them to make a small game with the aspects learned during the day.

I was thinking of Rock Paper Scissors. Below you can find the final code for this game:

var RockPaperScissors = (function () {
    var t = 'Tie',
        c = 'Computer wins',
        p = 'Player wins',
        winningMap = [
            [t, c, p],
            [p, t, c],
            [c, p, t]
        ],
        choices = ["Rock", "Paper", "Scissors"];

    var getComputerChoice = function () {
        return Math.floor(Math.random() * 3);
    };

    var getWinner = function (playerChoice, computerChoice) {
        return winningMap[playerChoice][computerChoice];
    };

    function RockPaperScissors(playerChoice) {
        this.playerChoice = playerChoice;
        this.computerChoice = getComputerChoice();
        this.winner = getWinner(this.playerChoice, this.computerChoice);
    }

    RockPaperScissors.prototype.toString = function () {
        return this.winner + " [Computer: " + choices[this.computerChoice] + ", Player: " + choices[this.playerChoice] + "]";
    };

    return RockPaperScissors;

})();

This code is executed everytime a select input box changes (see this as the user input):

$('#choice').on('change', function () {
    var $input = $(this);

    if ($input.val() === '-1') return;

    var rockPaperScissors = new RockPaperScissors($input.val());

    $('#message').html(rockPaperScissors.toString());
});

I've also set up a Fiddle.

Do you think this code is clear for beginners? Is this too advanced? I'm not sure if I should introduce them to prototyping yes/no.

In a few weeks I need to give a workshop about JavaScript to colleagues. They do not have much experience with JavaScript so I will explain the basics of JavaScript. At the end of the day I want them to make a small game with the aspects learned during the day.

I was thinking of Rock Paper Scissors. Below you can find the final code for this game:

var RockPaperScissors = (function () {
    var t = 'Tie',
        c = 'Computer wins',
        p = 'Player wins',
        winningMap = [
            [t, c, p],
            [p, t, c],
            [c, p, t]
        ],
        choices = ["Rock", "Paper", "Scissors"];

    var getComputerChoice = function () {
        return Math.floor(Math.random() * 3);
    };

    var getWinner = function (playerChoice, computerChoice) {
        return winningMap[playerChoice][computerChoice];
    };

    function RockPaperScissors(playerChoice) {
        this.playerChoice = playerChoice;
        this.computerChoice = getComputerChoice();
        this.winner = getWinner(this.playerChoice, this.computerChoice);
    }

    RockPaperScissors.prototype.toString = function () {
        return this.winner + " [Computer: " + choices[this.computerChoice] + ", Player: " + choices[this.playerChoice] + "]";
    };

    return RockPaperScissors;

})();

This code is executed everytime a select input box changes (see this as the user input):

$('#choice').on('change', function () {
    var $input = $(this);

    if ($input.val() === '-1') return;

    var rockPaperScissors = new RockPaperScissors($input.val());

    $('#message').html(rockPaperScissors.toString());
});

I've also set up a Fiddle.

Do you think this code is clear for beginners? Is this too advanced? I'm not sure if I should introduce them to prototyping or not.

As per site policy, appending updated code is discouraged as it may end up being reviewed as well
Source Link
Jamal
  • 34.9k
  • 13
  • 133
  • 237

Javascript: Rock Paper Scissors in JavaScript

In a few weeks I need to give a workshop about JavascriptJavaScript to colleagues. They do not have much experience with JavascriptJavaScript so I will explain the basics of JavascriptJavaScript. At the end of the day I want them to make a small game with the aspects learned during the day.

Do you think this code is clear for beginners? Is this too advanced? I'm not sure if I should introduce them to prototyping yes/no.

Update

Changed winningMap logic thanks to @maja:

var RockPaperScissors = (function () {
    var stringMap = ["Rock", "Paper", "Scissors"],
        winningMap = {
            Rock: "Scissors",
            Paper: "Rock",
            Scissors: "Paper"
        };

    var getComputerChoice = function () {
        return stringMap[Math.floor(Math.random() * 3)];
    };

    var getWinner = function (playerChoice, computerChoice) {
        if(playerChoice === computerChoice) {
            return 'Tie';   
        }
        
        if(computerChoice === winningMap[playerChoice]) {
            return 'Player wins';   
        }
        
        return 'Computer wins';
    };

    function RockPaperScissors(playerChoice) {
        this.playerChoice = stringMap[playerChoice];
        this.computerChoice = getComputerChoice();
        this.winner = getWinner(this.playerChoice, this.computerChoice);
    }

    RockPaperScissors.prototype.toString = function () {
        return this.winner + " [Computer: " + this.computerChoice + ", Player: " + this.playerChoice + "]";
    };

    return RockPaperScissors;

})();

Ditched jQuery:

var choice = document.querySelector('#choice'),
    message = document.querySelector('#message');

choice.addEventListener('input', function() {
    var value = this.value;
    
    if(value === -1) {
        return;   
    }
    
    var rockPaperScissors = new RockPaperScissors(value);
    
    message.innerHTML = rockPaperScissors.toString();
}, false);

Javascript: Rock Paper Scissors

In a few weeks I need to give a workshop about Javascript to colleagues. They do not have much experience with Javascript so I will explain the basics of Javascript. At the end of the day I want them to make a small game with the aspects learned during the day.

Do you think this code is clear for beginners? Is this too advanced? I'm not sure if I should introduce them to prototyping yes/no.

Update

Changed winningMap logic thanks to @maja:

var RockPaperScissors = (function () {
    var stringMap = ["Rock", "Paper", "Scissors"],
        winningMap = {
            Rock: "Scissors",
            Paper: "Rock",
            Scissors: "Paper"
        };

    var getComputerChoice = function () {
        return stringMap[Math.floor(Math.random() * 3)];
    };

    var getWinner = function (playerChoice, computerChoice) {
        if(playerChoice === computerChoice) {
            return 'Tie';   
        }
        
        if(computerChoice === winningMap[playerChoice]) {
            return 'Player wins';   
        }
        
        return 'Computer wins';
    };

    function RockPaperScissors(playerChoice) {
        this.playerChoice = stringMap[playerChoice];
        this.computerChoice = getComputerChoice();
        this.winner = getWinner(this.playerChoice, this.computerChoice);
    }

    RockPaperScissors.prototype.toString = function () {
        return this.winner + " [Computer: " + this.computerChoice + ", Player: " + this.playerChoice + "]";
    };

    return RockPaperScissors;

})();

Ditched jQuery:

var choice = document.querySelector('#choice'),
    message = document.querySelector('#message');

choice.addEventListener('input', function() {
    var value = this.value;
    
    if(value === -1) {
        return;   
    }
    
    var rockPaperScissors = new RockPaperScissors(value);
    
    message.innerHTML = rockPaperScissors.toString();
}, false);

Rock Paper Scissors in JavaScript

In a few weeks I need to give a workshop about JavaScript to colleagues. They do not have much experience with JavaScript so I will explain the basics of JavaScript. At the end of the day I want them to make a small game with the aspects learned during the day.

Do you think this code is clear for beginners? Is this too advanced? I'm not sure if I should introduce them to prototyping yes/no.

added 1769 characters in body
Source Link
Dieterg
  • 248
  • 3
  • 10
Loading
Tweeted twitter.com/#!/StackCodeReview/status/477804594936811521
Source Link
Dieterg
  • 248
  • 3
  • 10
Loading