ساخت مرحله برای بازی ماهجونگ با HTML

[امین مهدی نژاد 2,142]

من مراحل بازی ماهجونگ رو با کد HTML زیر طراحی کردم.

کد رو قرار میدم هم برای بازی ماهجونگ مناسبه و هم یه نمونه کد که شاید بار آموزشی هم داشته باشه

<meta charset="UTF-8"/>
<style>
td{background-color:red;width:50px}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<Button>ساخت مپ</Button>
<table>
  <tr>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>	
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>	
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>	
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>	
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>	
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>	
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>	
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>	
    <td>0</td>
    <td>0</td>
  </tr>  
</table> 
<pre id="out">خروجی</pre>
<script>
$(document).ready(function(){
    $("td").click(function(){
        switch($(this).text()){
		case "0":
			$(this).text("1");
			$(this).css("background-color","silver");
		break;
		case "1":
			$(this).text("2");	
			$(this).css("background-color","yellow");			
		break;
		case "2":
			$(this).text("3");	
			$(this).css("background-color","green");
		break;
		case "3":
			$(this).text("4");
			$(this).css("background-color","blue");
		break;
		case "4":
			$(this).text("0");
			$(this).css("background-color","red");			
		break;		
		}
    });
    $("button").click(function(){
	var str="";
	for(var i=0;i<$("td").length;i++){
	var b=$($("td").get(i)).text();
        switch(b){
		case "1":
			str+=i+"\n";		
		break;
		case "2":
			str+=i+"\n";
			str+=64+i+"\n";		
		break;
		case "3":
			str+=i+"\n";
			str+=64+i+"\n";
			str+=128+i+"\n";		
		break;
		case "4":
			str+=i+"\n";
			str+=64+i+"\n";
			str+=128+i+"\n";
			str+=192+i+"\n";		
		break;		
		}		
	}
		$("#out").text(str.split("\n").map(Number).sort(sortNumber).join("\n").substring(2));
    });	
});
function sortNumber(a,b) {
    return a - b;
}
</script>

«موفق باشید.»