Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Notas del Curso IA

    Cargado por

    Pedro José Cruz Guevara
    4 vistas5 páginas
    A quien interese

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    TXT, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    A quien interese

    Copyright:

    © All Rights Reserved
    Descargue como TXT, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    4 vistas5 páginas

    Notas del Curso IA

    Cargado por

    Pedro José Cruz Guevara
    A quien interese

    Copyright:

    © All Rights Reserved
    Descargue como TXT, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 5

    https://www.youtube.

    com/@alejavirivera
    https://codepen.io/ // me logueo con Google
    cruzgprogramar@gmail.com/@alejavirivera
    https://chat.openai.com
    Crea [el juego de tic tac toe], genera con un código para una app móvil en
    html, css y js
    HTML:
    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-
    scale=1.0">
    <title>Tic Tac Toe</title>
    <style>
    body {
    font-family: Arial, sans-serif;
    text-align: center;
    }
    .board {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-gap: 5px;
    margin: 20px auto;
    }
    .cell {
    width: 100px;
    height: 100px;
    font-size: 36px;
    text-align: center;
    border: 2px solid #000;
    cursor: pointer;
    }
    </style>
    </head>
    <body>
    <h1>Tic Tac Toe</h1>
    <div class="board" id="board">
    <div class="cell" onclick="makeMove(0)"></div>
    <div class="cell" onclick="makeMove(1)"></div>
    <div class="cell" onclick="makeMove(2)"></div>
    <div class="cell" onclick="makeMove(3)"></div>
    <div class="cell" onclick="makeMove(4)"></div>
    <div class="cell" onclick="makeMove(5)"></div>
    <div class="cell" onclick="makeMove(6)"></div>
    <div class="cell" onclick="makeMove(7)"></div>
    <div class="cell" onclick="makeMove(8)"></div>
    </div>
    <p id="status">¡Es el turno del Jugador X!</p>
    <button id="reset" onclick="resetBoard()">Reiniciar
    Juego</button>

    <script>
    let currentPlayer = 'X';
    let board = ['', '', '', '', '', '', '', '', ''];
    let gameActive = true;

    const winPatterns = [
    [0, 1, 2], [3, 4, 5], [6, 7, 8],
    [0, 3, 6], [1, 4, 7], [2, 5, 8],
    [0, 4, 8], [2, 4, 6]
    ];

    const boardElement = document.getElementById('board');


    const statusElement = document.getElementById('status');

    function makeMove(index) {
    if (board[index] === '' && gameActive) {
    board[index] = currentPlayer;
    boardElement.children[index].textContent =
    currentPlayer;
    if (checkWinner()) {
    statusElement.textContent = `¡El Jugador
    ${currentPlayer} ha ganado!`;
    gameActive = false;
    } else if (board.indexOf('') === -1) {
    statusElement.textContent = '¡Es un
    empate!';
    gameActive = false;
    } else {
    currentPlayer = currentPlayer === 'X' ?
    'O' : 'X';
    statusElement.textContent = `¡Es el turno
    del Jugador ${currentPlayer}!`;
    }
    }
    }

    function checkWinner() {
    for (const pattern of winPatterns) {
    const [a, b, c] = pattern;
    if (board[a] && board[a] === board[b] &&
    board[a] === board[c]) {
    return true;
    }
    }
    return false;
    }

    function resetBoard() {
    board = ['', '', '', '', '', '', '', '', ''];
    currentPlayer = 'X';
    gameActive = true;
    statusElement.textContent = '¡Es el turno del Jugador
    X!';
    for (let cell of boardElement.children) {
    cell.textContent = '';
    }
    }
    </script>
    </body>
    </html>

    CSS:
    .board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    width: 300px;
    margin-bottom: 20px;
    }

    .cell {
    width: 100px;
    height: 100px;
    background-color: lightgray;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    cursor: pointer;
    }

    button {
    font-size: 24px;
    }
    JS:
    let currentPlayer = "X";
    let gameBoard = ["", "", "", "", "", "", "", "", ""];

    function placeMarker(index) {
    if (gameBoard[index] === "") {
    gameBoard[index] = currentPlayer;
    document.getElementsByClassName("cell")[index].innerText =
    currentPlayer;
    if (checkWin()) {
    alert("Player " + currentPlayer + " wins!");
    resetBoard();
    } else if (gameBoard.every(cell => cell !== "")) {
    alert("It's a tie!");
    resetBoard();
    } else {
    currentPlayer = currentPlayer === "X" ? "O" : "X";
    }
    }
    }

    function checkWin() {
    const winConditions = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
    ];

    for (let condition of winConditions) {


    if (
    gameBoard[condition[0]] === currentPlayer &&
    gameBoard[condition[1]] === currentPlayer &&
    gameBoard[condition[2]] === currentPlayer
    ) {
    return true;
    }
    }

    return false;
    }

    function resetBoard() {
    currentPlayer = "X";
    gameBoard = ["", "", "", "", "", "", "", "", ""];
    const cells = document.getElementsByClassName("cell");
    for (let cell of cells) {
    cell.innerText = "";
    }
    }

    https://chat.openai.com
    pon el juego centrado
    CSS: (Lo adicionamos)
    .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    }
    https://chat.openai.com
    añade un fondo de color gradiente oscuro
    CSS:
    body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: linear-gradient(to bottom, #333, #000);
    }
    .board {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-gap: 5px;
    margin: 20px auto;
    }
    .cell {
    width: 100px;
    height: 100px;
    font-size: 36px;
    text-align: center;
    border: 2px solid #000;
    cursor: pointer;
    background-color: #555;
    color: #fff;
    }

    https://chat.openai.com
    Añade como título del juego "Pyma Games" con las letras en color blanco
    CSS:

    https://tiiny.host/ hosting gratuito


    https://www.hostinger.co/hosting-web?
    utm_medium=affiliate&utm_source=aff151995&utm_campaign=6&session=102758ffecb9c9f620
    5838c9c1ade1
    DE PAGO

    SONIDOS:
    <audio id="turnSound" src="path/to/your/turn-sound.mp3"></audio>
    <audio id="winSound" src="path/to/your/win-sound.mp3"></audio>
    <audio id="tieSound" src="path/to/your/tie-sound.mp3"></audio>

    También podría gustarte