JavaScript'te Renk Değiştirme Oyunu

Bu bölümde, benim yardımımla bir oyun gerçekleştireceksiniz. Oyun, farklı rastgele renklere boyanmış hücrelerden oluşan bir tablo olacaktır.

Belirli bir renk seti olduğunu varsayalım, örneğin, kırmızı, yeşil, mavi. Her hücre tıklamasının rengini döngüsel olarak değiştirdiğini varsayalım. Oyunun amacı, tabloyu tek - herhangi bir - renk yapmak için en az tıklama sayısını kullanmaktır.

Haydi uygulamaya başlayalım. Başlangıç olarak bir <table> tablosu şeklinde bir oyun alanı yapalım:

<table id="field"></table>

Biraz güzellik katacak bazı CSS kodları ekleyelim:

#field td {
	width: 50px;
	height: 50px;
	border: 1px solid black;
	text-align: center;
	font-weight: bold;
}

Şimdi, oyunumuzu uygulamaya nasıl yaklaşacağımızı tartışalım. Gördüğünüz gibi, bu görev artık onu hemen çözmek için yeterince büyük. Bu nedenle, onu bazı aşamalara - alt görevlere bölmek gerekir, bunları yerine getirerek ana görevimizi aşamalı olarak çözeriz.

Başlangıç olarak en mantıklı aşama, tablonun hücrelerini oluşturan bir betik yazmak olacaktır. Örneğin, oyun alanının boyutunun aşağıdaki değişkenlerde saklandığını varsayalım:

let rows = 3;
let cols = 3;

Verilen HTML ve CSS kodlarını kendinize kopyalayın. Verilen boyutta bir tablo oluşturacak kodu yazın.