cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <body>
  <section class="hello">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <h2 class="text-center">Kamień papier nożyce</h2>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">
          <div class="icons">
            <div>
              <img src="http://i.imgur.com/v6vjRpq.png">
            </div>
            <div>
              <img src="http://i.imgur.com/tDYPLiC.png">
            </div>
            <div>
              <img src="http://i.imgur.com/NXN4oZE.png">
            </div>
          </div>
        </div>
      </div>
      <div id="js-newGameElement" class="hello-button">
        <div class="row text-center">
          <div class="col-lg-12">
            <button id="js-startGameButton" class="btn btn-default btn-custom">Nowa Gra</button>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="play">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div id="js-playerPickElement" class="play-button text-center">
            <button id="js-playerPick_rock" class="btn btn-custom2">Kamień</button>
            <button id="js-playerPick_paper" class="btn btn-custom2">Papier</button>
            <button id="js-playerPick_scissors" class="btn btn-custom2">Nożyce</button>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="results">
    <div id="js-resultsTableElement" class="container">
      <div class="row">
        <div class="col-xs-5 text-center">
          <span id="js-playerPoints" class="badge badge-custom">0</span>
          <span id="js-playerName">Imię gracza</span>
        </div>
        <div class="col-xs-2 text-center">
          <p>VS.
            <p>
        </div>
        <div class="col-xs-5 text-center">
          <span id="js-computerPoints" class="badge badge-custom">0</span> KOMPUTER
        </div>
      </div>
      <div class="row">
        <div class="col-xs-5 text-center">
          <span id="js-playerPick">
                Wybór gracza
              </span>
        </div>
        <div class="col-xs-2"></div>
        <div class="col-xs-5 text-center">
          <span id="js-computerPick">
                Wybór komputera
              </span>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-5 text-center">
          <span id="js-playerResult">
                Wynik gracza
              </span>
        </div>
        <div class="col-xs-2"></div>
        <div class="col-xs-5 text-center">
          <span id="js-computerResult">
                Wynik komputera
              </span>
        </div>
      </div>
    </div>
  </section>
</body>
            
          
!
            
              body {
	font-family: 'Raleway', sans-serif;
}
.hello h2 {
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	color: #fff;
	font-weight: 200;
	letter-spacing: 0.2em;
	font-size: 2.2em;
}
.container {
	padding: 50px;
}
.hello {
	background-color: #000000;
}
.hello-button{
	margin-top: 6em;
}
.hello-button .btn-custom {
	border-radius: 0;
	background-color: #fff;
	border: none;
	color: #000000;
	letter-spacing: 0.1em;
}
.hello-button .btn-custom:hover, .hello-button .btn-custom:focus, .hello-button .btn-custom:active:focus {
	background-color: #ff0000;
	color: #fff;
}
.icons {
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	align-content: space-around;
}
.icons div {
	height: 7.4em;
	width: 7.4em;
	border-radius: 50%;
	background-color: #fff;
	margin-top: 1em;
	margin-bottom: 1em;
}
.icons div:nth-child(2), .play-button button:nth-child(2) {
	margin-right: 2em;
	margin-left: 2em;
}
.icons div img{
	width: 100%;
	height: auto;
}
.play-button .btn-custom2 {
	height: 7.4em;
	width: 7.4em;
	border-radius: 50%;
	background-color: #ff0000;
	margin-top: 1em;
	margin-bottom: 1em;
	color: #fff;
	text-transform: uppercase;
}
.play-button .btn-custom2:hover {
	background-color: #000000;
} 
.play-button .btn-custom2:focus, .play-button .btn-custom2:active:focus {
	outline: none;
	outline-offset: none;
}
.results .badge-custom {
	background-color: #000000;
	height: 2em;
	width: 2em;
	border-radius: 50%;
	line-height: 1.5em;
	font-size: 1.2em; 
}
.results #js-playerName, .results #js-playerPick, .results #js-computerPick, .results #js-playerResult, .results #js-computerResult{
	text-transform: uppercase;
	font-weight: bold;
}
#js-resultsTableElement .col-xs-2.text-center p {
	color:  #ff0000;
	font-weight: bold;
	font-size: 1.5em;
	letter-spacing: 0.1em;
}
.col-xs-5 {
	padding-bottom: 1em;
	padding-top: 0.5em;
	background-color: #e0e0e0;
}

            
          
!
            
              //start buttton

var startGameButton = document.getElementById('js-startGameButton');
startGameButton.addEventListener('click',newGame);

// buttony gracza
var pickRock = document.getElementById('js-playerPick_rock'),
    pickPaper = document.getElementById('js-playerPick_paper'),
    pickScissors = document.getElementById('js-playerPick_scissors');
// buttony gracza po kliknieciu
pickRock.addEventListener('click', function() { playerPick('rock') });
pickPaper.addEventListener('click', function() { playerPick('paper') });
pickScissors.addEventListener('click', function() { playerPick('scissors') });
// logika gry 
// 1. wartosci na poczatku

var gameState = 'notStarted',  //started // ended
    player = {
        name: '',
        score: 0
    },
    computer = {
        score: 0
    };

// 2. wyswietlanie elem gry (kazda sekcja ma id)
    
    var newGameButton = document.getElementById('js-startGameButton'),
        newGameElement = document.getElementById('js-newGameElement'),
        pickElement = document.getElementById('js-playerPickElement'),
        resultsElement = document.getElementById('js-resultsTableElement');

// funkcja, wyswietlanie elem zalezne od stanu gry

function setGameElements () {
    switch(gameState) {        //Use the switch statement to select one of many blocks of code to be executed
        case 'started' :                                // nie widzimy kontenera z rozpoczeciem gry
            newGameElement.style.display = 'none';
            pickElement.style.display = 'block';
            resultsElement.style.display = 'block';
            break;
        case 'ended' :                                  // przycisk rozpoczynania gry ma miec napis
            startGameButton.innerText = 'Jeszcze raz!';
        case 'notStarted' :    
        default:                        //  przed rozpoczeciem gry: nie mamy innych sekcji poza pierwszej
            newGameElement.style.display = 'block';
            pickElement.style.display ='none';
            resultsElement.style.display = 'none';    
    }
}           
setGameElements ();

// rozpoczecie 1. zmienne ktore beda aktualizowane przez rozpoczeciem gry

var playerPointsElem = document.getElementById('js-playerPoints'),
    playerNameElem = document.getElementById('js-playerName'),
    computerPointsElem = document.getElementById('js-computerPoints');

function newGame() {
    player.name = prompt('Graczu, wpisz swoje imię', 'imię gracza');
    if (player.name) {
    player.score = computer.score = 0;
    gameState = 'started';
    setGameElements();

    playerNameElem.innerHTML = player.name;
    setGamePoints();
  }
}
// wybor gracza

function getComputerPick() {
    var x = Math.random();
    var possiblePicks = ['rock', 'paper', 'scissors'];
    return possiblePicks[Math.floor(Math.random()*3)];
}

var playerPickElem = document.getElementById('js-playerPick'),
    computerPickElem = document.getElementById('js-computerPick'),
    playerResultElem = document.getElementById('js-playerResult'),
    computerResultElem = document.getElementById('js-computerResult');

function playerPick(playerPick) {
    var computerPick = getComputerPick();
    
    playerPickElem.innerHTML = playerPick;
    computerPickElem.innerHTML = computerPick;
    checkAllWinner();
    checkRoundWinner(playerPick, computerPick);
}
// logika i punkty 
function setGamePoints() {
    playerPointsElem.innerHTML = player.score;
    computerPointsElem.innerHTML = computer.score;
}

function checkRoundWinner(playerPick, computerPick) {
  playerResultElem.innerHTML = computerResultElem.innerHTML = '';

  var winnerIs = 'player';

    if (playerPick == computerPick) {
        winnerIs = 'noone'; // remis
    } else if (
        (computerPick == 'rock' &&  playerPick == 'scissors') ||
        (computerPick == 'scissors' &&  playerPick == 'paper') ||
        (computerPick == 'paper' &&  playerPick == 'rock') ) {
        
        winnerIs = 'computer';
    }

    if (winnerIs == 'player') {
        playerResultElem.innerHTML = "Wygrana jest twoja!";
        player.score++;
    } else if (winnerIs == 'computer') {
        computerResultElem.innerHTML = "Wygrał komputer";
        computer.score++;
    }
    setGamePoints()
}

setGameElements ();
    function checkAllWinner() {
        if (player.score === 10) {
            alert('Koniec, wygrywa: ' + player.name);
            gameState = 'ended';
            setGameElements();
        }
        if (computer.score == 10) {
            alert('Koniec, wygrywa komp!');
            gameState = 'ended';
            setGameElements();
        }
    }

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console