AI/AI와 놀기

Gemini CLI AI Agent로 테트리스 게임 만들기

DandyNow 2025. 6. 26. 09:44
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
반응형