Kółko i krzyżyk v.1

Kółko i krzyżyk to gra strategiczna dla dwóch graczy, w której gracze stawiają na przemian kółko i krzyżyk na planszy 3×3. Celem gry jest zajęcie trzech pól w jednej linii.
Gra może być również rozgrywana na planszy 15×15, gdzie trzeba postawić pięć kółek/krzyży w linii. Pole może być objęte przez jednego gracza i nie zmienia swego właściciela przez cały przebieg gry.
Gracze obejmują pola na przemian dążąc do objęcia trzech pól w jednej linii, przy jednoczesnym uniemożliwieniu tego samego przeciwnikowi. Gdy któryś z graczy stworzy linię trzech krzyżyków lub trzech kółek, przekreśla ją i zostaje zwycięzcą. Gdy wszystkie pola są zajęte i nie zostaje utworzona linia, gra kończy się remisem.
Istnieją optymalne strategie dla obu graczy, które pozwalają na osiągnięcie remisu, ale nie gwarantują zwycięstwa.
GraczGracz 1 ()
Remis:
KomputerGracz 2 ()
Jak wstawić grę na własną stronę?

Tworzymy odpowiedni plik: index.html
I wklejamy skopiowany poniżej kod do gry..
Lub można pobrać to całościowo jako gotowe pliki. I dopiero wtedy edytować.
index.html

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kółko i Krzyżyk</title>
<meta name="keywords" content="kółko, krzyżyk, tic, tac, toe, gra, online" />     
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">     
<style>
  @charset "utf-8";
  /* CSS Document */
  html {
    box-sizing: border-box;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }
  body {
    margin: 0;
    padding: 0;
    color: #000;
    font-family: sans-serif;
    background-color: #fff;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }
  .game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }
  .game {
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1/1;
    margin: 0 auto;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .alt {
    display: none;
  }
  .board {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
  @keyframes border-blink {
    50% {
      border-color: #000;
    }
  }
  @keyframes blink {
    50% {
      visibility: hidden;
    }
  }
  @keyframes appear {
    from {
      transform: scale(0.3);
    }
    to {
      transform: scale(1);
    }
  }
  .square {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
  }
  .square:nth-child(1), .square:nth-child(2), .square:nth-child(3) {
    border-bottom-style: solid;
    border-bottom-color: #000;
  }
  .square:nth-child(4), .square:nth-child(5), .square:nth-child(6) {
    border-bottom-style: solid;
    border-bottom-color: #000;
  }
  .square:nth-child(1), .square:nth-child(4), .square:nth-child(7) {
    border-right-style: solid;
    border-right-color: #000;
  }
  .square:nth-child(2), .square:nth-child(5), .square:nth-child(8) {
    border-right-style: solid;
    border-right-color: #000;
  }
  .board.blink .square {
    animation: border-blink 0.3s steps(1) 2;
  }
  .square .o.blink, .square .x.blink {
    animation: blink 0.3s steps(1) 2;
  }
  .o {
    width: 60%;
    height: 60%;
    border-radius: 50%;
    border: 15px solid #ff0000;
    animation: appear 0.15s cubic-bezier(0.5, 1.8, 0.1, 1.1);
  }
  .x {
    width: 60%;
    height: 60%;
    position: relative;
    animation: appear 0.15s cubic-bezier(0.5, 1.8, 0.1, 1.1);
  }
  .x:before, .x:after {
    position: absolute;
    content: "";
    display: block;
    background-color: #000;
    width: 15px;
    height: 100%;
    border-radius: 4px;
    top: 0;
    left: 50%;
    margin-left: -7.5px;
  }
  .x:before {
    transform: rotate(-45deg);
  }
  .x:after {
    transform: rotate(45deg);
  }
  .restart {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0);
    display: none;
  }
  .scores {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 600px;
    margin-top: 20px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
  }
  .scores p {
    font: 20px "Raleway", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
    padding: 0;
  }
  .scores .swap {
    display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 30px;
    margin: -5px -30px 0 0;
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.1s linear;
  }
  .scores:hover .swap {
    opacity: 1;
  }
  .scores .score {
    font-size: 50px;
    display: block;
    height: 60px;
    padding: 10px 0 0 0;
    will-change: transform;
  }
  .scores .score.appear {
    animation: appear 0.3s cubic-bezier(0.5, 4, 0.1, 1.1);
  }
  .scores .o {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-width: 2px;
    margin: 1px;
  }
  .scores .x {
    display: inline-block;
    width: 17px;
    height: 17px;
  }
  .scores .x:before, .scores .x:after {
    top: 2px;
    left: auto;
    margin-left: 8px;
    width: 2px;
    height: 17px;
  }
  .player1, .player2, .ties {
    flex: 1;
    white-space: nowrap;
    padding: 0 10px;
  }
  .scores.p1 .p2 {
    display: none;
  }
  .scores.p2 .p1 {
    display: none;
  }
  .scores .turn {
    opacity: 0.4;
  }
  .mute {
    position: absolute;
    width: 38px;
    height: 38px;
    right: 15px;
    top: 15px;
    opacity: 0.4;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.1s linear;
    z-index: 10;
  }
  .mute:hover {
    opacity: 1;
  }
  .back-button {
    position: absolute;
    left: 15px;
    top: 15px;
    z-index: 10;
  }
  .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%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
  }
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
  
  /* Responsywność */
  @media (max-width: 630px), (max-height: 760px) {
    .game {
      max-width: 450px;
    }
    .square .o {
      border-width: 12px;
    }
    .square .x:before, .square .x:after {
      width: 12px;
    }
    .scores {
      max-width: 450px;
    }
    .scores p {
      font-size: 17px;
      letter-spacing: 0;
    }
    .scores .score {
      font-size: 40px;
      padding-top: 8px;
      height: 50px;
    }
    .scores .o {
      width: 12px;
      height: 12px;
      border-width: 2px;
      margin: 0 1px;
    }
    .scores .x {
      width: 12px;
      height: 12px;
    }
    .scores .x:before, .scores .x:after {
      top: 0;
      margin-left: 5px;
      width: 2px;
      height: 14px;
    }
  }
  @media (max-width: 540px), (max-height: 550px) {
    .game {
      max-width: 300px;
    }
    .square .o {
      border-width: 8px;
    }
    .square .x:before, .square .x:after {
      width: 8px;
    }
    .scores {
      max-width: 300px;
    }
    .scores .swap {
      display: none;
    }
    .scores p {
      font-size: 14px;
    }
    .scores .score {
      font-size: 25px;
      padding-top: 9px;
      height: 50px;
    }
    .scores .o {
      width: 9px;
      height: 9px;
      margin: 0;
    }
    .scores .x {
      width: 10px;
      height: 10px;
    }
    .scores .x:before, .scores .x:after {
      margin-left: 4px;
      height: 11px;
    }
  }
  @media (max-height: 480px) {
    .game-container {
      padding-top: 60px;
    }
  }
</style>
</head>
<body>
<div class="game-container">
  <div class="mute">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <g fill="#000">
        <polygon points="14.025,38.004 14.025,61.993 31.548,61.993 55.537,85.982 55.537,14.018 31.552,38.004"></polygon>
        <path d="M67.41,34.095l-4.243,4.239c6.43,6.432,6.43,16.896,0,23.324L67.41,65.9C76.179,57.129,76.179,42.864,67.41,34.095z"></path>
        <path d="M75.89,25.616l-4.241,4.239c11.105,11.105,11.105,29.176,0,40.284l4.241,4.241C89.337,60.934,89.337,39.06,75.89,25.616z"></path>
      </g>
    </svg>
  </div>
  
  <div class="back-button">
    <div class="tooltip">
      <a href="https://skrip.pl/html/gry1.html">
        <i class="material-icons" style="font-size: 2.5em; color: #ff0000;">fast_rewind</i>
      </a>
      <span class="tooltiptext">Powrót do menu</span>
    </div>
  </div>
  
  <div class="game">
    <div class="board">
      <div class="square"><div></div></div>
      <div class="square"><div></div></div>
      <div class="square"><div></div></div>
      <div class="square"><div></div></div>
      <div class="square"><div></div></div>
      <div class="square"><div></div></div>
      <div class="square"><div></div></div>
      <div class="square"><div></div></div>
      <div class="square"><div></div></div>
    </div>
    <div class="restart"></div>
  </div>
  
  <div class="scores p1">
    <div class="player1">
      <p><span class="p1">Gracz</span><span class="p2">Gracz 1</span> (<span class="x"></span>)</p>
      <span class="score">0</span>
    </div>
    <div class="ties">
      <p>Remis:</p>
      <span class="score">0</span>
    </div>
    <div class="player2">
      <p><span class="p1">Komputer</span><span class="p2">Gracz 2</span> (<span class="o"></span>)</p>
      <span class="score">0</span>
    </div>
    <div class="swap">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <g fill="#000">
          <path class="p1" d="M49.947,90.991c0.693,0,1.41,0.02,2.104,0c13.547-0.201,26.439-1.723,28.775-3.945 c0.537-4.928,1.195-7.311-20.65-17.644c-3.107-1.742-1.465-8.492-1.465-8.492c6.578-4.969,11.096-16.463,11.096-25.676 c0-15.921-7.18-23.453-17.756-24.234h-2.104c-10.557,0.781-17.734,8.312-17.734,24.234c0,9.213,4.496,20.707,11.078,25.676 c0,0,1.641,6.75-1.449,8.492C19.979,79.735,20.635,82.118,21.176,87.046C23.51,89.269,36.402,90.79,49.947,90.991z"></path>
          <path class="p2" d="M66.219,85h1.562c9.92-0.14,19.38-1.2,21.08-2.779c0.422-3.44,0.9-5.101-15.142-12.341 c-2.279-1.22-1.059-5.939-1.059-5.939c4.822-3.48,8.123-11.521,8.123-17.98c0-11.14-5.263-16.419-13.001-16.959h-1.562 c-7.738,0.54-13,5.799-13,16.959c0,6.46,3.301,14.5,8.121,17.98c0,0,1.221,4.719-1.059,5.939c-16.041,7.24-15.562,8.9-15.14,12.341 C46.84,83.8,56.301,84.86,66.219,85z M30.217,69h1.564c9.918-0.14,19.378-1.2,21.078-2.779c0.422-3.44,0.9-5.1-15.14-12.34 c-2.279-1.22-1.059-5.939-1.059-5.939c4.82-3.48,8.121-11.521,8.121-17.98c0-11.14-5.262-16.42-13-16.96h-1.564 c-7.738,0.54-13,5.8-13,16.96c0,6.459,3.301,14.5,8.121,17.98c0,0,1.221,4.72-1.059,5.939c-16.041,7.24-15.562,8.9-15.14,12.34 C10.839,67.8,20.299,68.86,30.217,69z"></path>
        </g>
      </svg>
    </div>
  </div>
</div>

<script>
(function () {
  var ui = {
      board: document.querySelector('.board'),
      squares: document.querySelectorAll('.square'),
      restart: document.querySelector('.restart'),
      mute: document.querySelector('.mute'),
      scores: {
        scores: document.querySelector('.scores'),
        swap: document.querySelector('.swap'),
        player1: document.querySelector('.player1 .score'),
        player2: document.querySelector('.player2 .score'),
        ties: document.querySelector('.ties .score'),
        turn1: document.querySelector('.player1'),
        turn2: document.querySelector('.player2'),
        turnTies: document.querySelector('.ties')
      }
    },
    computerScores = {
      player1: 0,
      player2: 0,
      ties: 0
    },
    twoPlayerScores = {
      player1: 0,
      player2: 0,
      ties: 0
    },
    player1 = 'x',
    player2 = 'o',
    audio = {},
    context, totalSquares = 9,
    hasLocalStorage, muted, playing, turn = true,
    firstTurn = true,
    twoPlayer = false,
    delay = 300,
    playerChance = 0.75,
    board, win = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6]
    ];

  function loadAudio(name) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/assets/audio/' + name + '.wav', true);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function () {
      if (xhr.status === 200) {
        context.decodeAudioData(xhr.response, function (buffer) {
          audio[name] = buffer;
        }, function () {
          console.error('Could not load audio: ' + name);
        });
      }
    };
    xhr.onerror = function() {
      console.error('Error loading audio: ' + name);
    };
    xhr.send();
  }

  function playAudio(name) {
    if (muted || !audio[name]) {
      return;
    }
    var source = context.createBufferSource();
    source.buffer = audio[name];
    source.connect(context.destination);
    source.start(0);
  }

  function updateMuteIcon() {
    var muteSoundWaves = ui.mute.querySelectorAll('path');
    for (var i = muteSoundWaves.length; i--;) {
      muteSoundWaves[i].style.display = muted ? 'none' : '';
    }
  }

  function toggleMute() {
    muted = !muted;
    if (hasLocalStorage) {
      try {
        localStorage.setItem('muted', muted.toString());
      } catch (e) {}
    }
    updateMuteIcon();
  }

  function toggleTwoPlayer() {
    twoPlayer = !twoPlayer;
    var t = ui.scores.scores.classList;
    if (twoPlayer) {
      t.remove('p1');
      t.add('p2');
      firstTurn = true;
    } else {
      t.remove('p2');
      t.add('p1');
      firstTurn = false;
    }
    ui.scores.player1.innerHTML = (twoPlayer ? twoPlayerScores.player1 : computerScores.player1);
    ui.scores.player2.innerHTML = (twoPlayer ? twoPlayerScores.player2 : computerScores.player2);
    ui.scores.ties.innerHTML = (twoPlayer ? twoPlayerScores.ties : computerScores.ties);
    playing = false;
    start();
  }

  function updateBoard(player, index) {
    ui.squares[index].querySelector('div').classList.add(player);
  }

  function updateTurn() {
    var t1 = ui.scores.turn1.classList,
      t2 = ui.scores.turn2.classList,
      ties = ui.scores.turnTies.classList;
    if (twoPlayer && ui.restart.style.display === 'none') {
      if (turn) {
        t2.remove('turn');
        t1.add('turn');
      } else {
        t1.remove('turn');
        t2.add('turn');
      }
      ties.add('turn');
    } else {
      t1.remove('turn');
      t2.remove('turn');
      ties.remove('turn');
    }
  }

  function selectSquare(index) {
    if (board[index] !== 0 || isGameOver() || (!twoPlayer && turn)) {
      return;
    }
    if (twoPlayer) {
      turn = !turn;
      board[index] = turn ? -1 : 1;
      updateBoard(turn ? player1 : player2, index);
      playAudio('note-' + (turn ? 'low' : 'high'));
      isGameOver();
    } else {
      board[index] = -1;
      updateBoard(player1, index);
      turn = true;
      playAudio('note-low');
      setTimeout(computerPlay, delay);
    }
    updateTurn();
  }

  function initSquare(index) {
    ui.squares[index].onmousedown = function (event) {
      event.preventDefault();
      selectSquare(index);
    };
    ui.squares[index].ontouchstart = function (event) {
      event.preventDefault();
      selectSquare(index);
    };
  }

  function start() {
    if (playing) {
      return;
    }

    playing = true;
    ui.restart.style.display = 'none';
    board = [0, 0, 0, 0, 0, 0, 0, 0, 0];
    for (var i = totalSquares; i--;) {
      ui.squares[i].querySelector('div').className = '';
    }
    ui.scores.ties.classList.remove('appear');
    ui.scores.player1.classList.remove('appear');
    ui.scores.player2.classList.remove('appear');
    ui.board.classList.remove('blink');
    turn = firstTurn = !firstTurn;
    updateTurn();
    if (firstTurn && !twoPlayer) {
      setTimeout(computerPlay, delay);
    }
  }

  function init() {
    try {
      hasLocalStorage = 'localStorage' in window && window['localStorage'] !== null;
    } catch (e) {
      hasLocalStorage = false;
    }
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    if (window.AudioContext) {
      context = new AudioContext();
      loadAudio('note-high');
      loadAudio('note-low');
      loadAudio('game-over');
      loadAudio('game-over-tie');
      if (hasLocalStorage) {
        try {
          muted = localStorage.getItem('muted') === 'true';
        } catch (e) {
          muted = false;
        }
      }
      updateMuteIcon();
      ui.mute.ontouchstart = ui.mute.onclick = function (event) {
        event.preventDefault();
        toggleMute();
      };
    } else {
      ui.mute.style.display = 'none';
    }
    for (var i = totalSquares; i--;) {
      initSquare(i);
    }
    ui.restart.ontouchstart = ui.scores.scores.ontouchstart = function (event) {
      event.preventDefault();
    };
    ui.scores.scores.ontouchend = ui.scores.scores.onclick = function (event) {
      event.preventDefault();
      toggleTwoPlayer();
    };
    ui.restart.ontouchend = ui.restart.onclick = function (event) {
      event.preventDefault();
      start();
    };
  }

  function endGame(winner, sq) {
    ui.restart.style.display = 'block';
    setTimeout(function () {
      var action = 'Game',
        label = (twoPlayer ? 'players ' : 'computer ');
      setTimeout(function () {
        playing = false;
      }, delay);
      if (sq) {
        for (var i = 3; i--;) {
          ui.squares[sq[i]].querySelector('div').classList.add('blink');
        }
      }
      switch (winner) {
        case player1:
          ui.scores.player1.innerHTML = (twoPlayer ? ++twoPlayerScores.player1 : ++computerScores.player1);
          ui.scores.player1.classList.add('appear');
          playAudio('game-over');
          break;
        case player2:
          ui.scores.player2.innerHTML = (twoPlayer ? ++twoPlayerScores.player2 : ++computerScores.player2);
          ui.scores.player2.classList.add('appear');
          playAudio('game-over');
          break;
        default:
          ui.scores.ties.innerHTML = (twoPlayer ? ++twoPlayerScores.ties : ++computerScores.ties);
          ui.scores.ties.classList.add('appear');
          ui.board.classList.add('blink');
          playAudio('game-over-tie');
          break;
      }
    }, (turn && !twoPlayer) ? 100 : delay + 100);
  }

  function isGameOver() {
    for (var i = win.length; i--;) {
      var sq = win[i],
        line = board[sq[0]] + board[sq[1]] + board[sq[2]];
      if (line === 3 || line === -3) {
        endGame(line === 3 ? player2 : player1, sq);
        return true;
      }
    }
    var count = 0;
    for (i = totalSquares; i--;) {
      if (board[i] !== 0) {
        count++;
      }
    }
    if (count === 9) {
      endGame();
      return true;
    }
    return false;
  }

  function computerPlay() {
    if (isGameOver()) {
      return;
    }
    var i, j, k, max, chosen, firstSquare, count = 0;
    turn = false;
    updateTurn();
    playAudio('note-high');
    for (i = totalSquares; i--;) {
      if (board[i] !== 0) {
        count++;
        if (count === 1) {
          firstSquare = i;
        }
      }
    }
    if (count < 2 && Math.random() > 0.2) {
      do {
        chosen = Math.floor(Math.random() * totalSquares);
      } while (chosen === firstSquare);
    } else {
      for (i = totalSquares; i--;) {
        for (j = totalSquares; j--;) {
          if (board[j] !== 0) {
            continue;
          }
          board[j] = 1;
          if (isGameOver()) {
            updateBoard(player2, j);
            return;
          }
          board[j] = 0;
        }
        if (board[i] !== 0) {
          continue;
        }
        board[i] = 1;
        var min = null,
          temp = board.concat();
        for (j = totalSquares; j--;) {
          if (temp[j] !== 0) {
            continue;
          }
          temp[j] = -1;
          for (k = win.length; k--;) {
            if (temp[win[k][0]] + temp[win[k][1]] + temp[win[k][2]] === -3 && Math.random() > playerChance) {
              board[i] = 0;
              board[j] = 1;
              updateBoard(player2, j);
              isGameOver();
              return;
            }
          }
          var max2 = 0,
            min2 = 0,
            tempMax = temp.concat(),
            tempMin = temp.concat();
          for (k = totalSquares; k--;) {
            if (tempMax[k] === 0) {
              tempMax[k] = 1;
            }
            if (tempMin[k] === 0) {
              tempMin[k] = -1;
            }
          }
          for (k = win.length; k--;) {
            if (tempMax[win[k][0]] + tempMax[win[k][1]] + tempMax[win[k][2]] === 3) {
              max2++;
            }
            if (tempMin[win[k][0]] + tempMin[win[k][1]] + tempMin[win[k][2]] === -3) {
              min2++;
            }
          }
          var d = max2 - min2;
          min = min == null ? d : (min > d ? d : min);
          temp[j] = 0;
        }
        if (max == null || max < min) {
          max = min;
          chosen = i;
        }
        board[i] = 0;
      }
    }
    board[chosen] = 1;
    updateBoard(player2, chosen);
    isGameOver();
  }
  
  // Inicjalizacja gry
  init();
  start();
}());
</script> 

</body>
</html>
Top Stories

Edytor Zdjęć Online – Darmowe Narzędzie do Edycji Obrazów

Macierz w Matematyce – Kalkulator Online

Kalkulator arytmetyczny międzysystemowy, konwerter systemów liczbowych oraz tekstu ASCII na Binarny

Kółko i krzyżyk v.1 – gra online

Kółko i krzyżyk to gra strategiczna dla dwóch graczy

Kółko i krzyżyk v.1

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

index.html

Chmurka tagów

Zaprzyjaźniona strona

Najczęściej oglądane wpisy

Top Stories

Edytor Zdjęć Online – Darmowe Narzędzie do Edycji Obrazów

Macierz w Matematyce – Kalkulator Online

Kalkulator arytmetyczny międzysystemowy, konwerter systemów liczbowych oraz tekstu ASCII na Binarny

Kółko i krzyżyk v.1

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

index.html

Może Ci się spodobać:

Doom – strzelanka online

Apka pogodowa na stronę v.2

Co to jest TOR?

Space Invaders – gra online
