Kółko i krzyżyk v.3

„Kółko i krzyżyk” to gra, w której dwóch graczy próbuje ułożyć trzy swoje elementy w jednym rzędzie: pionowo, poziomo lub po skosie.

Gra polega na tym, że każdy z graczy ma do dyspozycji kółka lub krzyżyki, a następnie na zmianę stawia je na planszy podzielonej na 9 pól. Gracz, który jako pierwszy ułoży trzy swoje elementy w jednym rzędzie, wygrywa grę.

Gra jest bardzo prosta i może być grana przez osoby w każdym wieku. Kto w to nie grał w szkole?

W najbardziej popularnej w Polsce wersji gra odbywa się na polu o wymiarach 3×3.

Tu mamy trzy poziomy trudności.

Gramy?

Kody gry do wstawienia na stronę

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

Tworzymy odpowiednie pliki:

index.html
grab.css
gra.js

I wklejamy skopiowane kody do gry w odpowiednie pliki.

Lub można pobrać to całościowo jako gotowe pliki. I dopiero wtedy edytować.

index.html

<!DOCTYPE html>
<html lang="pl">
  <head>    
    <meta name="charset" content="UTF-8">
    <title>Kółko i krzyżyk</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    <link href="grab.css" rel="stylesheet">
  </head>

  <body>
	  
    <div class="modal-background hidden">
      <div class="modal-wrapper">
        <div class="modal">
          <div class="modal-header">
            <h3>Tryb Gry</h3>
          </div>
          <ul class="modal-body">
            <li><a class="game-mode selected" id="p2" href="#">Gracz 1 vs Gracz 2</a></li>
            <li><a class="game-mode" id="easy" href="#">Koputer: Łatwy</a></li>
            <li><a class="game-mode" id="medium" href="#">Komputer: Średni</a></li>
            <li><a class="game-mode" id="master" href="#">Komputer: Mistrz</a></li>
          </ul>
          <div class="modal-footer">
            <button id="proceed-create">Start</button> <button id="cancel-create">Zakończ</button>
          </div>

        </div>
      </div>
    </div>
    <div class="container">
      <div class="header">

        <div class="match-info">

          <div class="player-info p1-info">
            <div class="player-name">
              <span id="p1-name">Gracz 1</span>
              <i class="fas fa-times marker"></i></div>
            <div class="score" id="p1-score">0</div>
          </div>
			
		 <div class="home-info menu-info">
<div class="menu-info"><a href="https://skrip.pl/gry/" target="_blank">MENU</a></div>
<div class="refresh"><a href="javascript:history.go(0)">Restart</a></div>
          </div>

          <div class="player-info p2-info">
            <div class="player-name">
              <i class="far fa-circle marker"></i>
              <span id="p2-name">Gracz 2</span></div>
            <div class="score" id="p2-score">0</div>
          </div>
        </div>

      </div>
      <div class="main">
        <table class="board">
          <tr>            
            <td><div class="cell highlight" id="cell_0" data-index="0">X</div></td>
            <td><div class="cell" id="cell_1" data-index="1">O</div></td>
            <td><div class="cell" id="cell_2" data-index="2">O</div></td>
          </tr>
          <tr>    
            <td><div class="cell" id="cell_3" data-index="3">O</div></td>
            <td><div class="cell highlight" id="cell_4" data-index="4">X</div></td>
            <td><div class="cell" id="cell_5" data-index="5">O</div></td>
          </tr>
          <tr>    
            <td><div class="cell" id="cell_6" data-index="6">X</div></td>
            <td><div class="cell" id="cell_7" data-index="7">O</div></td>
            <td><div class="cell highlight" id="cell_8" data-index="8">X</div></td>
          </tr>
        </table>
        <div class="status">
          <span id="active-marker"></span> <span id="status-message">Zapraszam do gry - <a href="https://skrip.pl/gry/" target="_blank">skrip.pl</a></span>
        </div>
      </div>
    </div>

    <script src="gra.js"></script>
  </body>
</html>

grab.css

*, *:before, *:after {
  box-sizing: border-box;

  /* Disable selection of characters in the game board */
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
html {
  font-size: 16px;  
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
  height: 100%;
  color: #2196f3;
  background-color: #fff;
}

i {
  pointer-events: none;
}

button {
  font: inherit;
}

button:focus {
  outline: 0;
}

body {
  margin: 0;
  display: flex;
  height: 100%;
  margin: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.hidden {
  display: none !important;
}

.modal-background {
  position: fixed;
  display: flex;
  width: 100%;
  height: 100%;

  overflow: auto;
  background-color: rgb(0,0,0,.5);
}

.modal-wrapper {
  margin: auto;
  padding: 1rem;
}

.modal {
  width: 100%;
  font-size: 1rem;
  line-height: 1.5rem;
  border-radius: 5px;
  border: 1px solid #444;
  overflow: hidden;  
  background-color: #18191b;
}

.modal-header, .modal-body, .modal-footer {
  padding: .5rem 1rem;
}

.modal-body {
  margin: 0;
  list-style: none;
}

.modal-body li {
  white-space: nowrap;
}

.game-mode {
  padding: 0 .2rem;
  display: block;
}

.selected {  
    background-color: antiquewhite;
    color: #000;
}

.game-mode:hover {
  background-color: ghostwhite;
  color: #000;
  text-decoration: none;
}


.modal-header {
  text-align: center;
}

.modal h3 {
  margin: 0;
}

.modal-footer {
  display: flex;
  font-weight: bold;
}

.modal-footer button {
  width: 50%;
  border: 0;
  color: #fff;
  background-color: transparent;
  cursor: pointer;
}

.modal-footer button:hover {
  background-color: antiquewhite;
  color: #000;
}

.container {
  width: 100%;
  margin: auto;
  overflow: hidden;
}

.header, .main {
	width: 100%;
}

.match-info {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  width: 320px;
  margin: auto;
  padding: .2rem 0;
}

.player-info {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.p1-info {
  align-items: center;
}

.p2-info {
  align-items: center;
}
.home-info {
  display: flex;
  flex-direction: column;
  width: 30%;
}

.menu-info {
  align-items: center;
  font-size: 0.4rem;
  line-height: 0.6rem;
  font-weight: 600;
}

.refresh {
  align-items: center;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.2rem;
  color: #ff0000;
}

.player-name {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
  border: 0;
  cursor: pointer;
  background-color: #fff;
}

#p1-name, #p2-name {
  pointer-events: none;
}

.marker {
  padding: 0 .4rem;
}

.score {
  font-size: 0.8rem;
  line-height: 1rem;
  font-weight: bold;
}

.board {
  border: 1px solid #444;
  border-collapse: collapse;
  color: #2196f3;
  margin: auto;
  width: 320px;
  height: 320px;
}

.board tr {
  height: 30%;
}

.board td {
  width: 30%;  
  padding: 0;
  border: 1px solid #444;
  overflow: hidden;
}

.cell {
  font-size: 2.5rem;
  padding: 0;
  width: 100% !important;
  height: 100% !important;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: .3s;
  text-shadow: 3px 3px 7px #333;
}

.cell:hover {
  font-size: 4rem;
}

.cell:active {
  font-size: 3rem;
}

.highlight {  
  font-size: 3rem !important;
  color: #000;
  background-color: slategray;
  animation: pulse .5s ease 2;
}

.status {
  text-align: center;
  padding: .2rem 0;
  font-size: 0.8rem;
  line-height: 1rem;
}

@keyframes pulse {
  50% {
    font-size: 4rem;
  }
  100% {
    font-size: 3rem;
  }
}

@media (min-width: 500px) {
  html {
    font-size: 24px;
  }

  .board {
    height: 480px;
    width: 480px;
  }

  .match-info {
    width: 480px;
  }
}

@media (min-width: 1400px) {
  html {
    font-size: 32px;
  }

  .board {
    height: 580px;
    width: 580px;
  }

  .match-info, .github {
    width: 580px;
  }
}

gra.js

// JavaScript Document
// www.skrip.pl
// Game mode
let gameMode = "p2"
let selectedGameMode = gameMode

// Game mode modal close / cancel game mode selection
const cancelCreateBtn = document.querySelector("#cancel-create")
const modalBg = document.querySelector(".modal-background")
cancelCreateBtn.addEventListener('click', e => modalBg.classList.add("hidden"))


// Reset selected item for game mode selection
const gameModeSelectionBtns = document.querySelectorAll(".game-mode")
const resetSelection = () => {
  gameModeSelectionBtns.forEach(btn => btn.classList.remove("selected"))
}

// Game mode modal open
document.addEventListener('click', e => {
  if (e.target && e.target.className === "player-name") {
    resetSelection()    
    selectedGameMode = gameMode
    document.getElementById(gameMode).classList.add("selected")
    modalBg.classList.remove("hidden")
  }
})

// Game mode selection
document.addEventListener('click', e => {
  if (e.target && e.target.className === "game-mode") {
    document.getElementById(selectedGameMode).classList.remove("selected")
    selectedGameMode = e.target.id
    document.getElementById(selectedGameMode).classList.add("selected")
  }
})

// Proceed game mode change
const proceedCreateBtn = document.querySelector("#proceed-create")
proceedCreateBtn.addEventListener('click', e => { 
  gameMode = selectedGameMode
  modalBg.classList.add("hidden")
  game.initialize()
})

// Board cells
let cellElements = []
for(let i = 0; i < 9; i ++) {
  element = document.querySelector(`#cell_${i}`)
  cellElements.push(element)
}

document.addEventListener('click', e => {  
  if (e.target && e.target.classList.contains("cell")) {
    let cellNo = e.target.dataset["index"]
    if (!game.isInitialized()) {
      modalBg.classList.remove("hidden")
    }
    else if (!game.isOver() && !game.currentPlayer().isComputer) {
      game.currentPlayer().markThis(cellNo)
    }
    else if(game.isOver())
      game.newRound()
    else if (game.currentPlayer().isComputer)
      console.log(`Czekaj na swój ruch.`)
  }
})

// Game module
const game = (() => {
  let _game  
  let _activeTurn
  let _players
  let _board
  let _isOver = true
  let _status
  const patterns = [[0, 1, 2], [3, 4, 5], [6, 7, 8],   // horizontal
                    [0, 3, 6], [1, 4, 7], [2, 5, 8],   // vertical
                    [0, 4, 8], [2, 4, 6]]              // diagonal

  const newBoard = () => {
    let cells = []
    for (let i = 0; i < 9; i ++)
      cells.push("")
    _board = cells
  }

  const switchTurn = () => {
    _activeTurn = _activeTurn === 0 ? 1 : 0
  }

  const notifyComputer = () => {
    if(currentPlayer().isComputer)
      currentPlayer().notify()
  }

  const currentPlayer = () => _players[_activeTurn]

  playerNameElements = [document.getElementById("p1-name"),
                        document.getElementById("p2-name")]
  const generatePlayers = () => {
    let p1 = Player("Gracz 1", "x")
    let p2
    switch (gameMode) {
      case "easy": 
        p2 = Computer("Cienias", "o", 1)
        break;
      case "medium": 
        p2 = Computer("Średniak", "o", 5)
        break;
      case "master": 
        p2 = Computer("Mistrz", "o", 8)
        break;
      default: 
        p2 = Player("Gracz 2", "o")
    }
    playerNameElements[0].textContent = p1.name
    playerNameElements[1].textContent = p2.name
    _players = [p1, p2]
  }

  const board = () => _board.slice(0)

  const players = () => _players

  const setupGame = () => {    
    newBoard()    
    refreshCellView()
    _activeTurn = Math.floor(Math.random() * 2)
    updateScores()
    _isOver = false
    _status = `Ruch ${currentPlayer().name}`
    status()
    notifyComputer()   
  }

  const isInitialized = () => (_activeTurn === 0 || _activeTurn === 1)
 
  const initialize = () => {    
    generatePlayers()
    _scores = [0, 0]
    updateScores()
    setupGame()
  }

  const newRound = () => { 
    if (_isOver) setupGame()
  }
  
  const mark = cell => {
    if (_board[cell] === "") {
      _board[cell] = currentPlayer().marker
      updateCellView(cell)
      checkGameConditions()
    }
    else {
      console.log("Proszę wybrać inne pole.")
      notifyComputer()
    }
  }

  const boardMarkers = ["<i class='fas fa-times'></i>", "<i class='far fa-circle'></i>"]
  const updateCellView = cell => {
    cellElements[cell].innerHTML = boardMarkers[_activeTurn]
  }

  const refreshCellView = () => {
    for(let i = 0; i < 9; i ++) {
      cellElements[i].textContent = ""
      cellElements[i].classList.remove("highlight")
    }
  }

  const highlightWinningPattern = pattern => {
    pattern.forEach(index => {
      cellElements[index].classList.add("highlight")
    })
  }

  const findEmptyCells = boardInstance => {
    let freeCells = []
    for(let i = 0; i < 9; i ++)
      if (boardInstance[i] === "")
        freeCells.push(i)
    return freeCells
  }

  const checkGameConditions = () => {
    let winningPattern = findWinningPattern(_board)
    if (winningPattern) {
      _isOver = true
      _status = `${currentPlayer().name} wygrał!`
      highlightWinningPattern(winningPattern)
      _scores[_activeTurn] ++
      updateScores()
      status()
    }
    else if (draw(_board)) {
      _isOver = true
      _status = "REMIS!"
      status()
    }
    else {      
      switchTurn()
      _status = `Teraz ${currentPlayer().name}.`
      status()
      notifyComputer()
    }
  }

  let playerScoreElements = [document.getElementById("p1-score"), 
                             document.getElementById("p2-score")]
  let _scores = [0, 0]
  const updateScores = () => {
    playerScoreElements[0].textContent = _scores[0]
    playerScoreElements[1].textContent = _scores[1]
  }

  const isOver = () => _isOver

  const findWinningPattern = (boardInstance) => {    
    let winPattern = []
    patterns.forEach(pattern => {
      let pick = boardInstance[pattern[0]]
      if (pick && pattern.every(index => boardInstance[index] === pick)) {
        winPattern.push(...pattern)
      }
    }) 

    if (winPattern.length !== 0)
      return winPattern
    return false  
  }

  const winner = boardInstance => {
    for(let i = 0; i < patterns.length; i ++) {
      let currentPattern = patterns[i]
      let pick = boardInstance[currentPattern[0]]
      if (pick && currentPattern.every(index => boardInstance[index] === pick)) {
        return pick
      }
    }
    return false
  }

  const draw = boardInstance => {
    if (boardInstance.some(cell => cell === ""))
      return false    
    return true    
  }

  const markers = () => _players.map(p => p.marker)

  const statusMessageElement = document.getElementById("status-message")
  const activeMarkerElement = document.getElementById("active-marker")
  const status = () => {
    console.log(`Players: ${_players[0].name} vs ${_players[1].name}`)
    console.log(_board)
    console.log(_status)
    statusMessageElement.textContent = _status
    activeMarkerElement.innerHTML = boardMarkers[_activeTurn]

  }

  _game = { 
    board, currentPlayer, isOver, isInitialized,
    initialize, newRound, status, mark, markers, findEmptyCells, winner, draw
  }
  return _game
})()

// PLAYER

const Player = (name, marker) => {
  game
  const markThis = (cell) => {
    game.mark(cell)
  }
  return { name, marker, markThis, game }
}

// COMPUTER

const Computer = (name , marker, difficulty = 2) => {
  game
  difficulty = (difficulty < 1 || isNaN(difficulty)) ? 1 : difficulty

  const markThis = (cell) => {
    game.mark(cell)
  }

  const notify = () => {
   let bestMove = findBestMove()
   markThis(bestMove.position)
  }

  const findBestMove = () => minimax(game.board(), "max")

  const minimax = (board, mode, depth = 0) => {
    let gameScore = evaluate(board)
    if (gameScore !== false)
      return { score: gameScore, position: null }

    if (depth === difficulty) 
      return { score: 0, position: null }

    let nextMode = mode === "max" ? "min" : "max"

    let minimaxedMoves = []
    game.findEmptyCells(board).forEach(cell => {
      minimaxedMoves.push({
        score: minimax(simulate(board, cell, mode), nextMode, depth + 1).score, 
        position: cell
      })
    })


    let bestMoves = minimaxedMoves.reduce((stored, current) => { 
      if (stored.length === 0)
        return [current]
      else if (stored[0].score < current.score && mode === "max") //max
        return [current]
      else if (stored[0].score > current.score && mode === "min") //min
        return [current]
      else if (stored[0].score === current.score)
        stored.push(current)
      return stored
    }, [])

    return bestMoves[Math.floor(Math.random() * bestMoves.length)]
  }

  let _opponentMarker
  const opponentMarker = () => { 
    _opponentMarker = _opponentMarker || game.markers().find(m => m !== marker)
    return _opponentMarker
  }

  const simulate = (board, position, mode) => {
    let simMarker = mode === "max" ? marker : opponentMarker()
    simulation = board.slice(0)
    simulation.splice(position, 1, simMarker)
    return simulation
  }

  const evaluate = board => {
    let winner = game.winner(board)
    if (winner)
      if (winner === marker)
        return 10
      else if (winner !== marker)
        return -10

    if (game.draw(board))
      return 0
    return false
  }


  let isComputer = true
  return { name, marker, markThis, game, isComputer, notify }
}

Top Stories

Jak nie zostać ofiarą oszustów. Sposób na rozpoznanie fałszywego maila

Wangiri scam – jak nie zostać ofiarą

Statystyki wyszukiwarki PornHub za 2024 rok

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

Kto nie grał na lekcjach?