Übungsaufgabe: Lassen Sie uns Python- und JavaScript-Kacheln auslegen!

Heute wurde mir eine Frage von Emilia mit einem echten Lebensproblem gestellt.

Ich dachte, ich würde dir schreiben, weil ich heute das Lebensbedürfnis habe, etwas zu schreiben, das die quadratischen Fliesen in der richtigen Reihenfolge in der Küche aufstellt. ─

5 farben, 5 Zeilen, 31 Spalten
Die Fliese darf keine andere Farbe berühren.
Am Ausgang kann ich Tabellen mit Farbsymbolen erhalten.
Würdest du mir bitte raten, dies in Python zu tun? Ich habe noch nicht mit Tabellen gearbeitet, und ich weiß nicht, ob es Sinn macht. Ich würde den Hinweis sehr schätzen

Natürlich kann dies mit Python gelöst werden!

Aber wir sind in der JS-Woche auf dem Prüfstand, also lassen Sie uns das auf zwei Arten tun

Wir legen die Fliesen algorithmisch aus

Wir müssen einen eigenen Algorithmus erstellen. Das grundlegende Konzept könnte darin bestehen, eine 2-dimensionale Liste (Array) zu verwenden – unsere Wand, bei der jede Zelle dieses Arrays eine einzelne Kachel darstellt.

Wir können dieses Array mit zufälligen Kacheln füllen, um sicherzustellen, dass keine zwei benachbarten Kacheln übereinstimmen.

Meine Kacheln sind eine Sammlung von 5 Emoticons: 🟥, 🟧, 🟨, 🟩, 🟦

Der Algorithmus könnte ungefähr so aussehen:

  1. Erstellen Sie ein leeres Brett mit den richtigen Abmessungen
  2. Durchlaufen Sie das Array Zeile für Zeile, Spalte für Spalte
  3. Überprüfen Sie für jede Zelle die verfügbaren Farben -dies ist nicht dasselbe wie das Emoji in benachbarten Zellen
  4. Aus anderen Farben zeichnen
  5. Fügen Sie die gezeichneten Emoticons in die Zelle ein
  6. Wiederholen Sie die Schritte 2 bis 5, bis das gesamte Board voll ist

Sieht es ziemlich einfach und logisch aus?

Wir müssen uns jedoch daran erinnern, dass dieser Algorithmus für ein großes Array und eine große Anzahl von Emoticons ziemlich ineffizient sein kann.

Es gibt mehrere Wörter über die Komplexität übrigens: Die Schleife durch Spalten (m) und Zeilen (n) gibt uns die Komplexität von o(m x n) – wenn m und n gleich groß waren, dann haben wir es hier mit der pessimistisch quadratischen Komplexität von o(n2) zu tun. Für m=1, wenn der Unterschied zwischen n und m signifikant ist, kann man als optimistisches O (N) betrachten.

Es kann auf verschiedene Arten optimiert werden, aber die Basisversion sollte für kleine Whiteboards und eine kleine Anzahl von Emoticons funktionieren.

Zuerst Python und dann Pure JS 😉

Kacheln in Python

import random

cols = 5
rows = 31
colors = ["🟥", "🟧", "🟨", "🟩", "🟦"]

# 1. Tworzymy pustą tablicę
board = []
for _ in range(rows):
    row = []
    for _ in range(cols):
        row.append(None)
    board.append(row)

# 2. Przechodzimy przez każdą komórkę w tablicy
for i in range(rows):
    for j in range(cols):
        # Tworzymy listę jeszcze dostępnych kolorów
        available_colors = colors.copy()

        # 3. Sprawdzamy sąsiadujące komórki i usuwamy ich kolory z dostępnych
        if i > 0 and board[i-1][j] in available_colors:
            available_colors.remove(board[i-1][j])
        if j > 0 and board[i][j-1] in available_colors:
            available_colors.remove(board[i][j-1])

        # 4. Losujemy kolor z dostępnych i (5) przypisujemy do komórki.
        board[i][j] = random.choice(available_colors)

# Wyświetlamy całość
for row in board:
    print(' '.join(row))

Der schwierigste Teil besteht darin, die Farbe der Vorgänger zu bestimmen und aus der Liste für die Auslosung zu entfernen.

Zuerst für die Kanten in der Zeile. Buchstabe i ich iteriere die Zeichenfolge, also i es muss größer als 0 sein (es gibt keinen Vorgänger in der Nullzeile, daher macht es keinen Sinn, es zu überprüfen) und wir kehren zur aktuellen Zeile zurück i zum vorherigen, also 1 Schritt zurück: i - 1

Ähnlich für Spalte: Buchstabe j ich durchlaufe die Spalten, also j wir wollen, dass es größer als 0 ist (es gibt keinen Vorgänger in Spalte 0) und wir kehren von der aktuellen aktuellen Spalte zur vorherigen zurück, dh dem Nachbarn um 1, dh 1 Schritt zurück: i - 1.

if i > 0 and board[i-1][j] in available_colors: 
    available_colors.remove(board[i-1][j]) 
if j > 0 and board[i][j-1] in available_colors:
    available_colors.remove(board[i][j-1])

Lassen Sie uns diesen Code nach PEP-8 schleifen:

  • lassen Sie uns die Konstanten oben im Skript herausziehen – Array-Größen und verfügbare Farben
  • lassen Sie uns den Code in Funktionen analysieren, erinnern wir uns an die Funktion main()
  • fügen Sie list comprehension hinzu

Es gab noch keinen comprehension-Brief, also ein kurzes Wort der Einführung

– dies ist eine Syntax, mit der Sie Listen prägnanter erstellen können als eine klassische Schleife for, die Sie im Python-cz-Kurs treffen werden. 7: schleife für

board = []
for _ in range(rows):
    row = []
    for _ in range(cols):
        row.append(None)
    board.append(row)

wir können sparen

empty_row = [None for _ in range(cols)]

board = [list(empty_row) for _ in range(rows)]

oder Anhang empty_row

board = [[None for _ in range(cols)] for _ in range(rows)]

import random

COLS = 5
ROWS = 31
COLORS =  ["🟥", "🟧", "🟨", "🟩", "🟦"]

def create_board():
    return [[None for _ in range(COLS)] for _ in range(ROWS)]

def assign_colors(board):
    for i in range(ROWS):
        for j in range(COLS):
            available_colors = COLORS.copy()

            if i > 0 and board[i-1][j] in available_colors:
                available_colors.remove(board[i-1][j])
            if j > 0 and board[i][j-1] in available_colors:
                available_colors.remove(board[i][j-1])

            board[i][j] = random.choice(available_colors)
    return board

def display_board(board):
    for row in board:
        print(' '.join(row))

def main():
    board = create_board()
    assign_colors(board)
    display_board(board)

if __name__ == "__main__":
    main()

Kacheln in JavaScript

Der Hauptalgorithmus bleibt unverändert, wie oben beschrieben.

Beginnen wir wie oben mit einer einfacheren Version 😉

script.js

const cols = 5;
const rows = 31;
const colors = ["🟥", "🟧", "🟨", "🟩", "🟦"];

// 1. Tworzymy pustą tablicę 
let board = [];

for (let i = 0; i < rows; i++) {
  let row = [];
  for (let j = 0; j < cols; j++) {
    row.push(null);
  }
  board.push(row);
}

// 2. Przechodzimy przez każdą komórkę w tablicy
for (let i = 0; i < rows; i++) {
    for (let j = 0; j < cols; j++) {
        // Tworzymy listę jeszcze dostępnych kolorów
        let availableColors = [...colors];

        // Sprawdzamy sąsiadujące komórki i usuwamy ich kolory z dostępnych
        if (i > 0 && availableColors.includes(board[i-1][j])) {
            availableColors.splice(availableColors.indexOf(board[i-1][j]), 1);
        }
        if (j > 0 && availableColors.includes(board[i][j-1])) {
            availableColors.splice(availableColors.indexOf(board[i][j-1]), 1);
        }

        // Losujemy kolor z dostępnych i (5) przypisujemy do komórki
        board[i][j] = availableColors[Math.floor(Math.random() * availableColors.length)];
    }
}


board.forEach(row => console.log(row.join(' '))); 

Das schleifen wir wie zuvor!

  • wir werden const wo immer möglich anwenden,
  • zeit zum Abrufen von Logik in eine Funktion
  • bessere Benennung und Einführung von Konstanten
  • beachten Sie auch die Verwendung Array.from
const ROWS = 5;
const COLS = 31;
const COLORS = ["🟥", "🟧", "🟨", "⬜", "🟪"];

function createBoard(rows, cols) {
    return Array.from(Array(rows), () => Array(cols).fill(null));
}


function getAvailableColors(board, i, j) {
    let availableColors = [...COLORS];
    if (i > 0 && availableColors.includes(board[i-1][j])) {
        availableColors.splice(availableColors.indexOf(board[i-1][j]), 1);
    }
    if (j > 0 && availableColors.includes(board[i][j-1])) {
        availableColors.splice(availableColors.indexOf(board[i][j-1]), 1);
    }
    return availableColors;
}


function fillBoard(board) {
    for (let i = 0; i < ROWS; i++) {
        for (let j = 0; j < COLS; j++) {
            let availableColors = getAvailableColors(board, i, j);
            board[i][j] = availableColors[Math.floor(Math.random() * availableColors.length)];
        }
    }
}


let board = createBoard(ROWS, COLS);
fillBoard(board);

board.forEach(row => console.log(row.join(' ')));

Was weiter?

Vielleicht lohnt es sich, zum Beispiel die Anzahl der Kacheln hinzuzufügen, welcher Typ wird verwendet? 😉

Bereit, uns in Aktion zu sehen:

More To Explore

Haben Sie ein Projekt im Sinn?

Kontaktieren Sie uns:

small_c_popup.png