ජාවාස්ක්රිප්ට් වර්ණ වෙනස් කිරීමේ ක්රීඩාව
මෙම කොටසෙන් ඔබ මගේ උපකාරයෙන් ක්රීඩාවක් ක්රියාත්මක කරනු ඇත. ක්රීඩාව වන්නේ විවිධ අහඹු වර්ණවලින් තිව්ර කරන ලද කොටු සහිත වගුවක් වනු ඇත.
වර්ණ කිහිපයක් ඇතැයි සිතමු, උදාහරණයක් ලෙස, රතු, කොළ, නිල්. සෑම ක්ලික් කිරීමක්ම කොටුවක වර්ණය වටකුරු ලෙස වෙනස් කරයි. ක්රීඩාවේ ඉලක්කය - අඩුම ක්ලික් ගණනකින් වගුව එක් - ඕනෑම - වර්ණයක් කිරීම.
අපි ක්රියාත්මක කිරීම ආරම්භ කරමු. පළමුව
වගුවක් ලෙස ක්රීඩා ක්ෂේත්රය සාදමු <table>:
<table id="field"></table>
රූපලාවන්යය වැඩි කරන සීඑස්එස් කේතයක් එකතු කරමු:
#field td {
width: 50px;
height: 50px;
border: 1px solid black;
text-align: center;
font-weight: bold;
}
දැන් අපගේ ක්රීඩාව ක්රියාත්මක කිරීමට කෙසේ ප්රවේශ විය යුතුද යන්න සාකච්ඡා කරමු. ඔබට පෙනෙන පරිදි, මෙම කාර්යය දැනටමත් කෙලින්ම විසඳීමට තරම් විශාලය. එබැවින් එය සමහර අංශ - උපකාර්ය වලට කඩා වෙන් කළ යුතුය, ඒවා ක්රියාත්මක කිරීමෙන් අපි ක්රමයෙන් අපගේ ප්රධාන කාර්යය විසඳනු ඇත.
ආරම්භක පියවර ලෙස වගුවේ කොටු සාදන ස්ක්රිප්ට් එකක් ලිවීම වඩාත් තාර්කික වනු ඇත. උදාහරණයක් ලෙස, ක්රීඩා ක්ෂේත්රයේ ප්රමාණය පහත විචල්යයන් තුළ ගබඩා කර ඇතැයි සිතමු:
let rows = 3;
let cols = 3;
ලබා දී ඇති HTML සහ CSS කේත ඔබටම පිටපත් කර ගන්න. දී ඇති ප්රමාණයේ වගුවක් සාදන කේතය ලියන්න.
