Kamień, papier, nożyce v.3

Kamień, papier, nożyce to gra, w której dwóch graczy wybiera jedną z trzech opcji: kamień, papier lub nożyce. Kamień pokonuje nożyce, nożyce pokonują papier, a papier pokonuje kamień. Gra kończy się, gdy jeden z graczy zdobędzie określoną liczbę punktów lub gdy zostanie osiągnięta określona liczba rund.

Taka najprostsza wersja gry.

Poniżej można pobrać pliki źródłowe do wstawienia na własną stronę.

Gramy?

Jak wstawić grę na swoją stronę

Jak wstawić grę na własną stronę?

Tworzymy odpowiednie pliki:

index.html
style.css
script.js

index.html

<!DOCTYPE html>
<html lang="pl">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=0.6">
<head>
<title>Kamień Papier Nożyce v.3</title>
<meta name="robots" content="NOODP,NOYDIR" />
<meta name="robots" content="all" />
<meta name="robots" content="index,follow">
<meta name="googlebot" content="index,follow" />
<meta name="autor" content="Tomaszek63">
<meta name="copyright" content="Copyright skrip.pl" />
<meta name="description" content="Papier, kamień, nożyce – prosta gra online. Taka dla zabicia czasu." />
<!--Fontawesome--> 
<script src="https://kit.fontawesome.com/940df7fa6d.js" crossorigin="anonymous"></script> 
<!--Google Font-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<!--CSS-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
  <div class="scores">
    <p>Komputer : <span id="computer_score">0</span> </p>
    <p> Twój wynik: <span id="user_score">0</span> </p>
  </div>
  <div class="weapons">
    <button onclick="checker('kamień')"> <i class="far fa-hand-rock"></i> </button>
    <button onclick="checker('papier')"> <i class="far fa-hand-paper"></i> </button>
    <button onclick="checker('nożyce')"> <i class="far fa-hand-scissors"></i> </button>
  </div>
  <div class="details">
    <p id="user_choice"></p>
    <p id="comp_choice"></p>
    <p id="result"></p>
  </div>
  <div class="shape shape-1">
    <div class="tooltip"> <a href="https://skrip.pl/" target="_parent"><i class="material-icons" style="font-size: 2.5em; color: #2196f3;">home</i></a> <span class="tooltiptext">Strona domowa</span> </div>
  </div>
</div>
<!--Script--> 
<script src="script.js"></script>
</body>
</html>

style.css

/* www.skrip.pl*/
*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
  height: 100vh;
  background: #fff;
}
a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}
.container{
    width: 600px;
    min-width: 500px;
    background-color: #ffffff;
    padding: 10px 10px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    border: solid 1px #cccccc;
}
.scores{
    margin-bottom: 50px;
    text-align: right;
    font-size: 2em;
}
.weapons{
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-around;
}
.weapons button{
    background-color: #2196f3;
    color: white;
    border: none;
    font-size: 6em;
    height: 9rem;
    width: 9rem;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
}

.details{
    margin-top: 30px;
    text-align: center;
    font-size: 1em;
}
.scores,.details{
    font-family: 'Poppins',sans-serif;
    font-weight: 600;
    font-size: 1.7em;
}
#result{
    width: 300px;
    padding: 10px 0;
    margin: 30px auto;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 1.2em;
}
#user_choice{
    font-weight: 500;
    margin-bottom: 10px;
    font-size: 1.2em;
}
#comp_choice{
    font-weight: 500;
    margin-bottom: 10px;
    font-size: 1.2em;
}
span{
    font-weight: 900;
    color: red;
}

.shape {
  position: absolute;
  border-radius: 50%;
  font-size: 0.9em;
}

.shape-1 {
  height: 10em;
  width: 10em;
  bottom: -7em;
  left: 10px;
}
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: black;
  font-family: "Poppins", sans-serif;
  font-size: 0.9em;
  font-weight: 400;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

script.js

// JavaScript Document
// www.skrip.pl
let [computer_score,user_score]=[0,0];
let result_ref = document.getElementById("result");
let choices_object = {
    'kamień' : {
        'kamień' : 'draw',
        'nożyce' : 'win',
        'papier' : 'lose'
    },
    'nożyce' : {
        'kamień' : 'lose',
        'nożyce' : 'draw',
        'papier' : 'win'
    },
    'papier' : {
        'kamień' : 'win',
        'nożyce' : 'lose',
        'papier' : 'draw'
    }

}

function checker(input){
    var choices = ["kamień", "papier", "nożyce"];
    var num = Math.floor(Math.random()*3);

    document.getElementById("comp_choice").innerHTML = 
    ` Komputer: <span> ${choices[num].toUpperCase()} </span>`;

    document.getElementById("user_choice").innerHTML = 
    ` Twój wybór: <span> ${input.toUpperCase()} </span>`;

    let computer_choice = choices[num];

    switch(choices_object[input][computer_choice]){
        case 'win':
            result_ref.style.cssText = "background-color: #2196f3; color: #ffffff; border-radius: 10px";
            result_ref.innerHTML = "WYGRYWASZ";
            user_score++;
            break;
        case 'lose':
            result_ref.style.cssText = "background-color: #ff0000; color: #ffffff; border-radius: 10px";
            result_ref.innerHTML = "PRZEGRYWASZ";
            computer_score++;
            break;
        default:
            result_ref.style.cssText = "background-color: #18191b; color: #eaeaea; border-radius: 10px";
            result_ref.innerHTML = "REMIS";
            break;
    }

    document.getElementById("computer_score").innerHTML = computer_score;
    document.getElementById("user_score").innerHTML = user_score;
}

Top Stories

Wangiri scam – jak nie zostać ofiarą

Statystyki wyszukiwarki PornHub za 2024 rok

Prosty sposób na zdobycie 1000 GB transferu danych na rok w Orange na kartę

Kamień, papier, nożyce v.3- gra online

Kamień, papier, nożyce v.3

Gramy?

Jak wstawić grę na swoją stronę

Jak wstawić grę na własną stronę?

index.html

style.css

script.js

WOŚP 2025

Chmurka tagów

Zaprzyjaźniona strona

Najczęściej oglądane wpisy