【無料版のGPTで】テトリスを作ってみた！

2023年4月19日 20:48

質問は以下

You are a programmer. Make a Tetris that works in your browser. The programming languages are html and javascript.

結果はコチラ

Sure, I can provide you with a basic implementation of a Tetris game using HTML and JavaScript. Here's a step-by-step guide on how you can create a Tetris game that works in your browser:

Create the HTML structure: Start by creating an HTML file with a canvas element for the game board and a container for the score.

htmlCopy code<!DOCTYPE html>
<html>
<head>
  <title>Tetris Game</title>
</head>
<body>
  <canvas id="game-board" width="200" height="400"></canvas>
  <div id="score">Score: 0</div>
  <script src="tetris.js"></script>
</body>
</html>

Define the game board and game pieces: In your JavaScript file, define the game board as a two-dimensional array of cells and create the game pieces using arrays of coordinates. You'll also need to define the colors for each game piece.

javascriptCopy codeconst BOARD_WIDTH = 10;
const BOARD_HEIGHT = 20;
const CELL_SIZE = 20;

const board = Array.from({ length: BOARD_HEIGHT }, () => Array(BOARD_WIDTH).fill(0));

const pieces = {
  I: {
    shape: [
      [0, 1, 0, 0],
      [0, 1, 0, 0],
      [0, 1, 0, 0],
      [0, 1, 0, 0]
    ],
    color: 'cyan'
  },
  J: {
    shape: [
      [0, 2, 0],
      [0, 2, 0],
      [2, 2, 0]
    ],
    color: 'blue'
  },
  L: {
    shape: [
      [0, 3, 0],
      [0, 3, 0],
      [0, 3, 3]
    ],
    color: 'orange'
  },
  O: {
    shape: [
      [4, 4],
      [4, 4]
    ],
    color: 'yellow'
  },
  S: {
    shape: [
      [0, 5, 5],
      [5, 5, 0],
      [0, 0, 0]
    ],
    color: 'green'
  },
  T: {
    shape: [
      [0, 6, 0],
      [6, 6, 6],
      [0, 0, 0]
    ],
    color: 'purple'
  },
  Z: {
    shape: [
      [7, 7, 0],
      [0, 7, 7],
      [0, 0, 0]
    ],
    color: 'red'
  }
};

Draw the game board and game pieces: Create a function that draws the game board and game pieces on the canvas element. You can use the fillRect method to draw the cells and clearRect method to clear the canvas.

javascriptCopy codeconst canvas = document.getElementById('game-board');
const ctx = canvas.getContext('2d');

function draw() {
  // Clear the canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Draw the game board
  for (let y = 0; y < BOARD_HEIGHT; y++) {
    for (let x = 0; x < BOARD_WIDTH; x++) {
      if (board[y][x]) {
        ctx.fillStyle = pieces[board[y][x]].color;
        ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL

上記でできるみたいです。

ただ無料版なので精度は保証しません。

勿論、有料版の方が精度は高いと思います。

また上記のコードでエラーがあれば

〇〇のエラーを直して！っていう命令を出せば治してくれるっぽいので是非やってみてね！

ref

この記事が気に入ったらサポートをしてみませんか？