رفتن به مطلب

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


امین مهدی نژاد

ارسال‌های توصیه شده

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

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

<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>

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

لینک ارسال
به اشتراک گذاری در سایت های دیگر

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

  • کاربران آنلاین در این صفحه   0 کاربر

    • هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.
×
×
  • اضافه کردن...