Dandy Now!
  • Gemini CLI AI Agent로 테트리스 게임 만들기
    2025년 06월 26일 09시 44분 00초에 업로드 된 글입니다.
    작성자: DandyNow
    728x90
    반응형

    Gemini CLI AI Agent

    Cluade Code(https://www.anthropic.com/claude-code)와 유사한 방식의 AI Agent를 구글에서도 발표했다. Gemini CLI(https://blog.google/technology/developers/introducing-gemini-cli-open-source-ai-agent/)는 현재 무료로 이용 가능해서 테스트겸 사용해 봤다.

    google-gemini 깃허브(https://github.com/google-gemini/gemini-cli)에 소스코드와 설치 방법을 소개하고 있다.

    1. 설치하기

    C:\Users\dandycode\Documents\GitHub>npm install -g @google/gemini-cli
    npm WARN EBADENGINE Unsupported engine {
    npm WARN EBADENGINE   package: '@google/genai@1.6.0',
    npm WARN EBADENGINE   required: { node: '>=20.0.0' },
    npm WARN EBADENGINE   current: { node: 'v18.18.2', npm: '9.8.1' }
    npm WARN EBADENGINE }
    npm WARN EBADENGINE Unsupported engine {
    npm WARN EBADENGINE   package: 'undici@7.10.0',
    npm WARN EBADENGINE   required: { node: '>=20.18.1' },
    npm WARN EBADENGINE   current: { node: 'v18.18.2', npm: '9.8.1' }
    npm WARN EBADENGINE }
    npm WARN EBADENGINE Unsupported engine {
    npm WARN EBADENGINE   package: 'eventsource-parser@3.0.3',
    npm WARN EBADENGINE   required: { node: '>=20.0.0' },
    npm WARN EBADENGINE   current: { node: 'v18.18.2', npm: '9.8.1' }
    npm WARN EBADENGINE }
    
    added 425 packages in 12s

    2. 설치 확인하기

    C:\Users\dandycode\Documents\GitHub>npm ls -g
    C:\Program Files\nodejs -> .\
    +-- @google/gemini-cli@0.1.3

    3. 실행하기

    • 최초 실행하면 테마 등 설정이 진행된다.
    C:\Users\dandycode\Documents\GitHub>gemini
    
     ███            █████████  ██████████ ██████   ██████ █████ ██████   █████ █████
    ░░░███         ███░░░░░███░░███░░░░░█░░██████ ██████ ░░███ ░░██████ ░░███ ░░███
      ░░░███      ███     ░░░  ░███  █ ░  ░███░█████░███  ░███  ░███░███ ░███  ░███
        ░░░███   ░███          ░██████    ░███░░███ ░███  ░███  ░███░░███░███  ░███
         ███░    ░███    █████ ░███░░█    ░███ ░░░  ░███  ░███  ░███ ░░██████  ░███
       ███░      ░░███  ░░███  ░███ ░   █ ░███      ░███  ░███  ░███  ░░█████  ░███
     ███░         ░░█████████  ██████████ █████     █████ █████ █████  ░░█████ █████
    ░░░            ░░░░░░░░░  ░░░░░░░░░░ ░░░░░     ░░░░░ ░░░░░ ░░░░░    ░░░░░ ░░░░░
    
    
    Tips for getting started:
    1. Ask questions, edit files, or run commands.
    2. Be specific for the best results.
    3. Create GEMINI.md files to customize your interactions with Gemini.
    4. /help for more information.
    
    ╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
    │                                                                                                                                                                                                                                                          │
    │ > Select Theme                                                                                                    Preview                                                                                                                                │
    │ ○ ANSI Dark                                                                                                       ┌────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐ │
    │ ○ Atom One Dark                                                                                                   │                                                                                                                                    │ │
    │ ○ Ayu Dark                                                                                                        │ 1 # function                                                                                                                       │ │
    │ ● Default Dark                                                                                                    │ 2 -def fibonacci(n):                                                                                                               │ │
    │ ○ Dracula Dark                                                                                                    │ 3 -    a, b = 0, 1                                                                                                                 │ │
    │ ○ GitHub Dark                                                                                                     │ 4 -    for _ in range(n):                                                                                                          │ │
    │ ○ ANSI Light Light                                                                                                │ 5 -        a, b = b, a + b                                                                                                         │ │
    │ ○ Ayu Light Light                                                                                                 │ 6 -    return a                                                                                                                    │ │
    │ ○ Default Light Light                                                                                             │                                                                                                                                    │ │
    │ ○ GitHub Light Light                                                                                              │ ╭────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮ │ │
    │ ○ Google Code Light                                                                                               │ │                                                                                                                                │ │ │
    │ ○ Xcode Light                                                                                                     │ │ No changes detected.                                                                                                           │ │ │
    │                                                                                                                   │ │                                                                                                                                │ │ │
    │   Apply To                                                                                                        │ ╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯ │ │
    │ ● User Settings                                                                                                   │                                                                                                                                    │ │
    │ ○ Workspace Settings                                                                                              └────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘ │
    │                                                                                                                                                                                                                                                          │
    │ (Use Enter to select, Tab to change focus)                                                                                                                                                                                                               │
    │                                                                                                                                                                                                                                                          │
    ╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
    
    ~\Documents\GitHub                                                                                        no sandbox (see /docs)                                                                                          gemini-2.5-pro (100% context left)
    • 테트리스 게임을 만들어 보았다.
     ███            █████████  ██████████ ██████   ██████ █████ ██████   █████ █████
    ░░░███         ███░░░░░███░░███░░░░░█░░██████ ██████ ░░███ ░░██████ ░░███ ░░███
      ░░░███      ███     ░░░  ░███  █ ░  ░███░█████░███  ░███  ░███░███ ░███  ░███
        ░░░███   ░███          ░██████    ░███░░███ ░███  ░███  ░███░░███░███  ░███
         ███░    ░███    █████ ░███░░█    ░███ ░░░  ░███  ░███  ░███ ░░██████  ░███
       ███░      ░░███  ░░███  ░███ ░   █ ░███      ░███  ░███  ░███  ░░█████  ░███
     ███░         ░░█████████  ██████████ █████     █████ █████ █████  ░░█████ █████
    ░░░            ░░░░░░░░░  ░░░░░░░░░░ ░░░░░     ░░░░░ ░░░░░ ░░░░░    ░░░░░ ░░░░░
    
    
    Tips for getting started:
    1. Ask questions, edit files, or run commands.
    2. Be specific for the best results.
    3. Create GEMINI.md files to customize your interactions with Gemini.
    4. /help for more information.
    
    
    > 3
    
    ✦ I see that algorithm-gaepum/ is the third item in the list you provided. Would you like me to list the contents of that directory?
    
    > tetris-game 폴더를 생성해줘
    
    ✦ I will create a new directory named tetris-game in the current working directory.
     ╭───────────────────────────────────────────────────────────────────────────╮
     │ ✔  Shell mkdir tetris-game (Create a new directory named `tetris-game`.)  │
     ╰───────────────────────────────────────────────────────────────────────────╯
    ✦ Okay, the tetris-game directory has been created. I will now create the basic files for the game: index.html, style.css, and script.js.
     ╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
     │ ✔  Shell touch tetris-game/index.html tetris-game/style.css tetris-game/script.js (Create index.html, style.css, and script.js in the tetris-game directory.)                                                                                     │
     │                                                                                                                                                                                                                                                   │
                                                                                                                                                                                        │
                                                                                                                                                                                                                                 │
     │                                                                                                                                                                                                                                                   │
     ╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
    ✦ It seems the touch command is not available. I will create the files individually.
     ╭──────────────────────────────────────────────────────────────────────────────────────────────────────────╮
     │ ✔  Shell echo. > tetris-game\index.html (Create an empty index.html file in the tetris-game directory.)  │
     ╰──────────────────────────────────────────────────────────────────────────────────────────────────────────╯
     ╭────────────────────────────────────────────────────────────────────────────────────────────────────────╮
     │ ✔  Shell echo. > tetris-game\style.css (Create an empty style.css file in the tetris-game directory.)  │
     ╰────────────────────────────────────────────────────────────────────────────────────────────────────────╯
     ╭────────────────────────────────────────────────────────────────────────────────────────────────────────╮
     │ ✔  Shell echo. > tetris-game\script.js (Create an empty script.js file in the tetris-game directory.)  │
     ╰────────────────────────────────────────────────────────────────────────────────────────────────────────╯
    ✦ Now that the files are created, I will add the basic HTML structure to index.html.
     ╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
     │ ✔  WriteFile Writing to tetris-game\index.html                                                                                                                                                                                                    │
     │                                                                                                                                                                                                                                                   │
                                                                                                                                                                                                                                          │
     │    1    + <!DOCTYPE html>                                                                                                                                                                                                                         │
     │    2    + <html lang="en">                                                                                                                                                                                                                        │
     │    3    + <head>                                                                                                                                                                                                                                  │
     │    4    +     <meta charset="UTF-8">                                                                                                                                                                                                              │
     │    5    +     <meta name="viewport" content="width=device-width, initial-scale=1.0">                                                                                                                                                              │
     │    6    +     <title>Tetris</title>                                                                                                                                                                                                               │
     │    7    +     <link rel="stylesheet" href="style.css">                                                                                                                                                                                            │
     │    8    + </head>                                                                                                                                                                                                                                 │
     │    9    + <body>                                                                                                                                                                                                                                  │
     │    10   +     <h1>Tetris</h1>                                                                                                                                                                                                                     │
     │    11   +     <canvas id="tetris" width="240" height="400"></canvas>                                                                                                                                                                              │
     │    12   +     <script src="script.js"></script>                                                                                                                                                                                                   │
     │    13   + </body>                                                                                                                                                                                                                                 │
     │    14   + </html>                                                                                                                                                                                                                                 │
     ╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
    ✦ Next, I'll add some basic styling to style.css.
     ╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
     │ ✔  WriteFile Writing to tetris-game\style.css                                                                                                                                                                                                     │
     │                                                                                                                                                                                                                                                   │
                                                                                                                                                                                                                                          │
     │    1    + body {                                                                                                                                                                                                                                  │
     │    2    +     background: #202028;                                                                                                                                                                                                                │
     │    3    +     color: #fff;                                                                                                                                                                                                                        │
     │    4    +     font-family: sans-serif;                                                                                                                                                                                                            │
     │    5    +     font-size: 2em;                                                                                                                                                                                                                     │
     │    6    +     text-align: center;                                                                                                                                                                                                                 │
     │    7    + }                                                                                                                                                                                                                                       │
     │    8    + canvas {                                                                                                                                                                                                                                │
     │    9    +     border: 1px solid #fff;                                                                                                                                                                                                             │
     │    10   +     background: #000;                                                                                                                                                                                                                   │
     │    11   + }                                                                                                                                                                                                                                       │
     ╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
    ✦ Now, I'll add the basic JavaScript structure to script.js.
     ╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
     │ ✔  WriteFile Writing to tetris-game\script.js                                                                                                                                                                                                     │
     │                                                                                                                                                                                                                                                   │
     │    1    + const canvas = document.getElementById('tetris');                                                                                                                                                                                       │
     │    2    + const context = canvas.getContext('2d');                                                                                                                                                                                                │
     │    3                                                                                                                                                                                                                                              │
     │    4    + context.scale(20, 20);                                                                                                                                                                                                                  │
     │    5    +                                                                                                                                                                                                                                         │
     │    6    + const matrix = [                                                                                                                                                                                                                        │
     │    7    +     [0, 0, 0],                                                                                                                                                                                                                          │
     │    8    +     [1, 1, 1],                                                                                                                                                                                                                          │
     │    9    +     [0, 1, 0],                                                                                                                                                                                                                          │
     │    10   + ];                                                                                                                                                                                                                                      │
     │    11   +                                                                                                                                                                                                                                         │
     │    12   + function drawMatrix(matrix, offset) {                                                                                                                                                                                                   │
     │    13   +     matrix.forEach((row, y) => {                                                                                                                                                                                                        │
     │    14   +         row.forEach((value, x) => {                                                                                                                                                                                                     │
     │    15   +             if (value !== 0) {                                                                                                                                                                                                          │
     │    16   +                 context.fillStyle = 'red';                                                                                                                                                                                              │
     │    17   +                 context.fillRect(x + offset.x, y + offset.y, 1, 1);                                                                                                                                                                     │
     │    18   +             }                                                                                                                                                                                                                           │
     │    19   +         });                                                                                                                                                                                                                             │
     │    20   +     });                                                                                                                                                                                                                                 │
     │    21   + }                                                                                                                                                                                                                                       │
     │    22   +                                                                                                                                                                                                                                         │
     │    23   + const player = {                                                                                                                                                                                                                        │
     │    24   +     pos: {x: 5, y: 5},                                                                                                                                                                                                                  │
     │    25   +     matrix: matrix,                                                                                                                                                                                                                     │
     │    26   + }                                                                                                                                                                                                                                       │
     │    27   +                                                                                                                                                                                                                                         │
     │    28   + drawMatrix(player.matrix, player.pos);                                                                                                                                                                                                  │
     ╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
    ✦ I have created the basic files for the Tetris game. You can now open the index.html file in a web browser to see the result. Would you like me to continue building the game?
    • HTML, CSS, JavaScript로 만들었기 때문에 브라우저에서 실행하라고 명령했다. 실행 결과 실제 게임은 불가능한 모양만 만들어 졌다. 그래서 플레이 가능한 테트리스 게임을 만들라고 다시 지시했다.
    > 브라우저에서 실행해줘
    
    ✦ I will now open the index.html file in your default web browser.
     ╭────────────────────────────────────────────────────────────────────────────────────╮
     │ ✔  Shell start tetris-game\index.html (Opening the Tetris game in a web browser.)  │
     ╰────────────────────────────────────────────────────────────────────────────────────╯
    ✦ The game has been opened in your browser. Do you want to continue with the game's development?
    
    > 플레이 가능한 테트리스 게임을 만들어야 해
    
    ✦ Of course. I will continue developing the Tetris game to make it playable.
    
    
      First, I'll read the current script.js file to get the existing code.
     ╭────────────────────────────────────╮
     │ ✔  ReadFile tetris-game\script.js  │
     ╰────────────────────────────────────╯
    ✦ Okay, I have the current code. Now, I will add the game loop and the ability to move the player's piece. I'll also add the logic for clearing completed rows.
     ╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
     │ ✔  WriteFile Writing to tetris-game\script.js                                                                                                                                                                                                     │
     │                                                                                                                                                                                                                                                   │
     │    3                                                                                                                                                                                                                                              │
     │    4      context.scale(20, 20);                                                                                                                                                                                                                  │
     │    5                                                                                                                                                                                                                                              │
     │    6    - const matrix = [                                                                                                                                                                                                                        │
     │    6    + function arenaSweep() {                                                                                                                                                                                                                 │
     │    7    +     let rowCount = 1;                                                                                                                                                                                                                   │
     │    8    +     outer: for (let y = arena.length - 1; y > 0; --y) {                                                                                                                                                                                 │
     │    9    +         for (let x = 0; x < arena[y].length; ++x) {                                                                                                                                                                                     │
     │    10   +             if (arena[y][x] === 0) {                                                                                                                                                                                                    │
     │    11   +                 continue outer;                                                                                                                                                                                                         │
     │    12   +             }                                                                                                                                                                                                                           │
     │    13   +         }                                                                                                                                                                                                                               │
     │    14   +                                                                                                                                                                                                                                         │
     │    15   +         const row = arena.splice(y, 1)[0].fill(0);                                                                                                                                                                                      │
     │    16   +         arena.unshift(row);                                                                                                                                                                                                             │
     │    17   +         ++y;                                                                                                                                                                                                                            │
     │    18   +                                                                                                                                                                                                                                         │
     │    19   +         player.score += rowCount * 10;                                                                                                                                                                                                  │
     │    20   +         rowCount *= 2;                                                                                                                                                                                                                  │
     │    21   +     }                                                                                                                                                                                                                                   │
     │    22   + }                                                                                                                                                                                                                                       │
     │    23   +                                                                                                                                                                                                                                         │
     │    24   + function collide(arena, player) {                                                                                                                                                                                                       │
     │    25   +     const [m, o] = [player.matrix, player.pos];                                                                                                                                                                                         │
     │    26   +     for (let y = 0; y < m.length; ++y) {                                                                                                                                                                                                │
     │    27   +         for (let x = 0; x < m[y].length; ++x) {                                                                                                                                                                                         │
     │    28   +             if (m[y][x] !== 0 &&                                                                                                                                                                                                        │
     │    29   +                (arena[y + o.y] &&                                                                                                                                                                                                       │
     │    30   +                 arena[y + o.y][x + o.x]) !== 0) {                                                                                                                                                                                       │
     │    31   +                 return true;                                                                                                                                                                                                            │
     │    32   +             }                                                                                                                                                                                                                           │
     │    33   +         }                                                                                                                                                                                                                               │
     │    34   +     }                                                                                                                                                                                                                                   │
     │    35   +     return false;                                                                                                                                                                                                                       │
     │    36   + }                                                                                                                                                                                                                                       │
     │    37   +                                                                                                                                                                                                                                         │
     │    38   + function createMatrix(w, h) {                                                                                                                                                                                                           │
     │    39   +     const matrix = [];                                                                                                                                                                                                                  │
     │    40   +     while (h--) {                                                                                                                                                                                                                       │
     │    41   +         matrix.push(new Array(w).fill(0));                                                                                                                                                                                              │
     │    42   +     }                                                                                                                                                                                                                                   │
     │    43   +     return matrix;                                                                                                                                                                                                                      │
     │    44   + }                                                                                                                                                                                                                                       │
     │    45   +                                                                                                                                                                                                                                         │
     │    46   + function createPiece(type)                                                                                                                                                                                                              │
     │    47   + {                                                                                                                                                                                                                                       │
     │    48   +     if (type === 'T') {                                                                                                                                                                                                                 │
     │    49   +         return [                                                                                                                                                                                                                        │
     │    50                 [0, 0, 0],                                                                                                                                                                                                                  │
     │    51                 [1, 1, 1],                                                                                                                                                                                                                  │
     │    52                 [0, 1, 0],                                                                                                                                                                                                                  │
     │    53             ];                                                                                                                                                                                                                              │
     │    54   +     } else if (type === 'O') {                                                                                                                                                                                                          │
     │    55   +         return [                                                                                                                                                                                                                        │
     │    56   +             [2, 2],                                                                                                                                                                                                                     │
     │    57   +             [2, 2],                                                                                                                                                                                                                     │
     │    58   +         ];                                                                                                                                                                                                                              │
     │    59   +     } else if (type === 'L') {                                                                                                                                                                                                          │
     │    60   +         return [                                                                                                                                                                                                                        │
     │    61   +             [0, 3, 0],                                                                                                                                                                                                                  │
     │    62   +             [0, 3, 0],                                                                                                                                                                                                                  │
     │    63   +             [0, 3, 3],                                                                                                                                                                                                                  │
     │    64   +         ];                                                                                                                                                                                                                              │
     │    65   +     } else if (type === 'J') {                                                                                                                                                                                                          │
     │    66   +         return [                                                                                                                                                                                                                        │
     │    67   +             [0, 4, 0],                                                                                                                                                                                                                  │
     │    68   +             [0, 4, 0],                                                                                                                                                                                                                  │
     │    69   +             [4, 4, 0],                                                                                                                                                                                                                  │
     │    70   +         ];                                                                                                                                                                                                                              │
     │    71   +     } else if (type === 'I') {                                                                                                                                                                                                          │
     │    72   +         return [                                                                                                                                                                                                                        │
     │    73   +             [0, 5, 0, 0],                                                                                                                                                                                                               │
     │    74   +             [0, 5, 0, 0],                                                                                                                                                                                                               │
     │    75   +             [0, 5, 0, 0],                                                                                                                                                                                                               │
     │    76   +             [0, 5, 0, 0],                                                                                                                                                                                                               │
     │    77   +         ];                                                                                                                                                                                                                              │
     │    78   +     } else if (type === 'S') {                                                                                                                                                                                                          │
     │    79   +         return [                                                                                                                                                                                                                        │
     │    80   +             [0, 6, 6],                                                                                                                                                                                                                  │
     │    81   +             [6, 6, 0],                                                                                                                                                                                                                  │
     │    82   +             [0, 0, 0],                                                                                                                                                                                                                  │
     │    83   +         ];                                                                                                                                                                                                                              │
     │    84   +     } else if (type === 'Z') {                                                                                                                                                                                                          │
     │    85   +         return [                                                                                                                                                                                                                        │
     │    86   +             [7, 7, 0],                                                                                                                                                                                                                  │
     │    87   +             [0, 7, 7],                                                                                                                                                                                                                  │
     │    88   +             [0, 0, 0],                                                                                                                                                                                                                  │
     │    89   +         ];                                                                                                                                                                                                                              │
     │    90   +     }                                                                                                                                                                                                                                   │
     │    91   + }                                                                                                                                                                                                                                       │
     │    92                                                                                                                                                                                                                                             │
     │    93   + function draw() {                                                                                                                                                                                                                       │
     │    94   +     context.fillStyle = '#000';                                                                                                                                                                                                         │
     │    95   +     context.fillRect(0, 0, canvas.width, canvas.height);                                                                                                                                                                                │
     │    96   +                                                                                                                                                                                                                                         │
     │    97   +     drawMatrix(arena, {x: 0, y: 0});                                                                                                                                                                                                    │
     │    98   +     drawMatrix(player.matrix, player.pos);                                                                                                                                                                                              │
     │    99   + }                                                                                                                                                                                                                                       │
     │    100  +                                                                                                                                                                                                                                         │
     │    101    function drawMatrix(matrix, offset) {                                                                                                                                                                                                   │
     │    102        matrix.forEach((row, y) => {                                                                                                                                                                                                        │
     │    103            row.forEach((value, x) => {                                                                                                                                                                                                     │
     │    104                if (value !== 0) {                                                                                                                                                                                                          │
     │    16   -                 context.fillStyle = 'red';                                                                                                                                                                                              │
     │    17   -                 context.fillRect(x + offset.x, y + offset.y, 1, 1);                                                                                                                                                                     │
     │    ═════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════  │
     │    105  +                 context.fillStyle = colors[value];                                                                                                                                                                                      │
     │    106  +                 context.fillRect(x + offset.x,                                                                                                                                                                                          │
     │    107  +                                  y + offset.y,                                                                                                                                                                                          │
     │    108  +                                  1, 1);                                                                                                                                                                                                 │
     │    109                }                                                                                                                                                                                                                           │
     │    110            });                                                                                                                                                                                                                             │
     │    111        });                                                                                                                                                                                                                                 │
     │    112    }                                                                                                                                                                                                                                       │
     │    113                                                                                                                                                                                                                                            │
     │    114  + function merge(arena, player) {                                                                                                                                                                                                         │
     │    115  +     player.matrix.forEach((row, y) => {                                                                                                                                                                                                 │
     │    116  +         row.forEach((value, x) => {                                                                                                                                                                                                     │
     │    117  +             if (value !== 0) {                                                                                                                                                                                                          │
     │    118  +                 arena[y + player.pos.y][x + player.pos.x] = value;                                                                                                                                                                      │
     │    119  +             }                                                                                                                                                                                                                           │
     │    120  +         });                                                                                                                                                                                                                             │
     │    121  +     });                                                                                                                                                                                                                                 │
     │    122  + }                                                                                                                                                                                                                                       │
     │    123  +                                                                                                                                                                                                                                         │
     │    124  + function playerDrop() {                                                                                                                                                                                                                 │
     │    125  +     player.pos.y++;                                                                                                                                                                                                                     │
     │    126  +     if (collide(arena, player)) {                                                                                                                                                                                                       │
     │    127  +         player.pos.y--;                                                                                                                                                                                                                 │
     │    128  +         merge(arena, player);                                                                                                                                                                                                           │
     │    129  +         playerReset();                                                                                                                                                                                                                  │
     │    130  +         arenaSweep();                                                                                                                                                                                                                   │
     │    131  +         updateScore();                                                                                                                                                                                                                  │
     │    132  +     }                                                                                                                                                                                                                                   │
     │    133  +     dropCounter = 0;                                                                                                                                                                                                                    │
     │    134  + }                                                                                                                                                                                                                                       │
     │    135  +                                                                                                                                                                                                                                         │
     │    136  + function playerMove(dir) {                                                                                                                                                                                                              │
     │    137  +     player.pos.x += dir;                                                                                                                                                                                                                │
     │    138  +     if (collide(arena, player)) {                                                                                                                                                                                                       │
     │    139  +         player.pos.x -= dir;                                                                                                                                                                                                            │
     │    140  +     }                                                                                                                                                                                                                                   │
     │    141  + }                                                                                                                                                                                                                                       │
     │    142  +                                                                                                                                                                                                                                         │
     │    143  + function playerReset() {                                                                                                                                                                                                                │
     │    144  +     const pieces = 'ILJOTSZ';                                                                                                                                                                                                           │
     │    145  +     player.matrix = createPiece(pieces[pieces.length * Math.random() | 0]);                                                                                                                                                             │
     │    146  +     player.pos.y = 0;                                                                                                                                                                                                                   │
     │    147  +     player.pos.x = (arena[0].length / 2 | 0) -                                                                                                                                                                                          │
     │    148  +                    (player.matrix[0].length / 2 | 0);                                                                                                                                                                                   │
     │    149  +     if (collide(arena, player)) {                                                                                                                                                                                                       │
     │    150  +         arena.forEach(row => row.fill(0));                                                                                                                                                                                              │
     │    151  +         player.score = 0;                                                                                                                                                                                                               │
     │    152  +         updateScore();                                                                                                                                                                                                                  │
     │    153  +     }                                                                                                                                                                                                                                   │
     │    154  + }                                                                                                                                                                                                                                       │
     │    155  +                                                                                                                                                                                                                                         │
     │    156  + function playerRotate(dir) {                                                                                                                                                                                                            │
     │    157  +     const pos = player.pos.x;                                                                                                                                                                                                           │
     │    158  +     let offset = 1;                                                                                                                                                                                                                     │
     │    159  +     rotate(player.matrix, dir);                                                                                                                                                                                                         │
     │    160  +     while (collide(arena, player)) {                                                                                                                                                                                                    │
     │    161  +         player.pos.x += offset;                                                                                                                                                                                                         │
     │    162  +         offset = -(offset + (offset > 0 ? 1 : -1));                                                                                                                                                                                     │
     │    163  +         if (offset > player.matrix[0].length) {                                                                                                                                                                                         │
     │    164  +             rotate(player.matrix, -dir);                                                                                                                                                                                                │
     │    165  +             player.pos.x = pos;                                                                                                                                                                                                         │
     │    166  +             return;                                                                                                                                                                                                                     │
     │    167  +         }                                                                                                                                                                                                                               │
     │    168  +     }                                                                                                                                                                                                                                   │
     │    169  + }                                                                                                                                                                                                                                       │
     │    170  +                                                                                                                                                                                                                                         │
     │    171  + function rotate(matrix, dir) {                                                                                                                                                                                                          │
     │    172  +     for (let y = 0; y < matrix.length; ++y) {                                                                                                                                                                                           │
     │    173  +         for (let x = 0; x < y; ++x) {                                                                                                                                                                                                   │
     │    174  +             [                                                                                                                                                                                                                           │
     │    175  +                 matrix[x][y],                                                                                                                                                                                                           │
     │    176  +                 matrix[y][x],                                                                                                                                                                                                           │
     │    177  +             ] = [                                                                                                                                                                                                                       │
     │    178  +                 matrix[y][x],                                                                                                                                                                                                           │
     │    179  +                 matrix[x][y],                                                                                                                                                                                                           │
     │    180  +             ];                                                                                                                                                                                                                          │
     │    181  +         }                                                                                                                                                                                                                               │
     │    182  +     }                                                                                                                                                                                                                                   │
     │    183  +                                                                                                                                                                                                                                         │
     │    184  +     if (dir > 0) {                                                                                                                                                                                                                      │
     │    185  +         matrix.forEach(row => row.reverse());                                                                                                                                                                                           │
     │    186  +     } else {                                                                                                                                                                                                                            │
     │    187  +         matrix.reverse();                                                                                                                                                                                                               │
     │    188  +     }                                                                                                                                                                                                                                   │
     │    189  + }                                                                                                                                                                                                                                       │
     │    190  +                                                                                                                                                                                                                                         │
     │    191  + let dropCounter = 0;                                                                                                                                                                                                                    │
     │    192  + let dropInterval = 1000;                                                                                                                                                                                                                │
     │    193  +                                                                                                                                                                                                                                         │
     │    194  + let lastTime = 0;                                                                                                                                                                                                                       │
     │    195  + function update(time = 0) {                                                                                                                                                                                                             │
     │    196  +     const deltaTime = time - lastTime;                                                                                                                                                                                                  │
     │    197  +     lastTime = time;                                                                                                                                                                                                                    │
     │    198  +                                                                                                                                                                                                                                         │
     │    199  +     dropCounter += deltaTime;                                                                                                                                                                                                           │
     │    200  +     if (dropCounter > dropInterval) {                                                                                                                                                                                                   │
     │    201  +         playerDrop();                                                                                                                                                                                                                   │
     │    202  +     }                                                                                                                                                                                                                                   │
     │    203  +                                                                                                                                                                                                                                         │
     │    204  +     draw();                                                                                                                                                                                                                             │
     │    205  +     requestAnimationFrame(update);                                                                                                                                                                                                      │
     │    206  + }                                                                                                                                                                                                                                       │
     │    207  +                                                                                                                                                                                                                                         │
     │    208  + function updateScore() {                                                                                                                                                                                                                │
     │    209  +     document.getElementById('score').innerText = player.score;                                                                                                                                                                          │
     │    210  + }                                                                                                                                                                                                                                       │
     │    211  +                                                                                                                                                                                                                                         │
     │    212  + const colors = [                                                                                                                                                                                                                        │
     │    213  +     null,                                                                                                                                                                                                                               │
     │    214  +     '#FF0D72',                                                                                                                                                                                                                          │
     │    215  +     '#0DC2FF',                                                                                                                                                                                                                          │
     │    216  +     '#0DFF72',                                                                                                                                                                                                                          │
     │    217  +     '#F538FF',                                                                                                                                                                                                                          │
     │    218  +     '#FF8E0D',                                                                                                                                                                                                                          │
     │    219  +     '#FFE138',                                                                                                                                                                                                                          │
     │    220  +     '#3877FF',                                                                                                                                                                                                                          │
     │    221  + ];                                                                                                                                                                                                                                      │
     │    222  +                                                                                                                                                                                                                                         │
     │    223  + const arena = createMatrix(12, 20);                                                                                                                                                                                                     │
     │    224  +                                                                                                                                                                                                                                         │
     │    225    const player = {                                                                                                                                                                                                                        │
     │    24   -     pos: {x: 5, y: 5},                                                                                                                                                                                                                  │
     │    25   -     matrix: matrix,                                                                                                                                                                                                                     │
     │    ═════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════  │
     │    226  +     pos: {x: 0, y: 0},                                                                                                                                                                                                                  │
     │    227  +     matrix: null,                                                                                                                                                                                                                       │
     │    228  +     score: 0,                                                                                                                                                                                                                           │
     │    229  + };                                                                                                                                                                                                                                      │
     │    230  +                                                                                                                                                                                                                                         │
     │    231  + document.addEventListener('keydown', event => {                                                                                                                                                                                         │
     │    232  +     if (event.keyCode === 37) {                                                                                                                                                                                                         │
     │    233  +         playerMove(-1);                                                                                                                                                                                                                 │
     │    234  +     } else if (event.keyCode === 39) {                                                                                                                                                                                                  │
     │    235  +         playerMove(1);                                                                                                                                                                                                                  │
     │    236  +     } else if (event.keyCode === 40) {                                                                                                                                                                                                  │
     │    237  +         playerDrop();                                                                                                                                                                                                                   │
     │    238  +     } else if (event.keyCode === 81) {                                                                                                                                                                                                  │
     │    239  +         playerRotate(-1);                                                                                                                                                                                                               │
     │    240  +     } else if (event.keyCode === 87) {                                                                                                                                                                                                  │
     │    241  +         playerRotate(1);                                                                                                                                                                                                                │
     │    242        }                                                                                                                                                                                                                                   │
     │    243  + });                                                                                                                                                                                                                                     │
     │    244                                                                                                                                                                                                                                            │
     │    28   - drawMatrix(player.matrix, player.pos);                                                                                                                                                                                                  │
     │    ═════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════  │
     │    245  + playerReset();                                                                                                                                                                                                                          │
     │    246  + updateScore();                                                                                                                                                                                                                          │
     │    247  + update();                                                                                                                                                                                                                               │
     ╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
    ✦ I've updated the script.js file with the complete game logic. I also need to add a score display to the index.html file.
     ╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
     │ ✔  WriteFile Writing to tetris-game\index.html                                                                                                                                                                                                    │
     │                                                                                                                                                                                                                                                   │
     │    8      </head>                                                                                                                                                                                                                                 │
     │    9      <body>                                                                                                                                                                                                                                  │
     │    10         <h1>Tetris</h1>                                                                                                                                                                                                                     │
     │    11   +     <div id="score"></div>                                                                                                                                                                                                              │
     │    12         <canvas id="tetris" width="240" height="400"></canvas>                                                                                                                                                                              │
     │    13         <script src="script.js"></script>                                                                                                                                                                                                   │
     │    14     </body>                                                                                                                                                                                                                                 │
     ╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
    ✦ Now the game is playable. Please refresh the browser to see the changes. You can move the pieces with the arrow keys, and rotate them with 'q' and 'w'.
    
    > 실행해줘
    
    ✦ I will open the index.html file in your default web browser.
     ╭────────────────────────────────────────────────────────────────────────────────────╮
     │ ✔  Shell start tetris-game\index.html (Opening the Tetris game in a web browser.)  │
     ╰────────────────────────────────────────────────────────────────────────────────────╯
    ✦ The game has been opened in your browser. Enjoy playing Tetris! Let me know if you'd like any other changes.
    • [그림1]과 같이 테트리스 게임이 잘 플레이 되고 있다.

    [그림1] Gemini CLI로 만든 테트리스 게임

    • 제미나이 CLI 종료 방법도 물어 봤다. 알려주는 방법대로 종료하니 Token 사용 결과를 보여 줬다.
    > cli를 종료하는 방법은?
    
    ✦ 이 CLI를 종료하려면 exit를 입력하거나 Ctrl+C를 누르시면 됩니다.
    
    > /quit
    
    ╭──────────────────────────────────╮
    │                                  │
    │  Agent powering down. Goodbye!   │
    │                                  │
    │                                  │
    │  Cumulative Stats (6 Turns)      │
    │                                  │
    │  Input Tokens           197,620  │
    │  Output Tokens            3,250  │
    │  Thoughts Tokens          2,105  │
    │  ──────────────────────────────  │
    │  Total Tokens           202,975  │
    │                                  │
    │  Total duration (API)    1m 39s  │
    │  Total duration (wall)  16m 19s  │
    │                                  │
    ╰──────────────────────────────────╯
    
    728x90
    반응형
    댓글