Web►Other

[Web] Bingo遊戲

原本想要寫的是可以返回的，但對於判斷搞不定加上非必要就不寫了。

試著把所有東西都搬到JavaScript上，如此一來要做變動也方便許多，HTML也看起來乾淨許多。

但寫法仍有待改進，演算法也是。

盡量將畫面和運算分開，沒有做防呆設置，接下來研究如何加上Push及帳號綁定。

Bingo

Layout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
var array_item = new Array("Microsoft","PTT","Google","Mcdonald","HaagenDazs","Yahoo","Nike","LG",
							"Family","Dropbox","CocaCola","BMW","Apple","Android","7-11","Adidas") ;
var size_bingotable = 4 ;
var div_database = document.createElement("div") ;
var div_bingotable = document.createElement("div") ;
var div_call = document.createElement("div") ;
var table_database = document.createElement("table") ;
var table_bingotable = document.createElement("table") ;
var select_call = document.createElement("select") ;
var button_coffrim = document.createElement("button") ;
var button_call = document.createElement("button") ;
SetTable(table_database,1,1,100,50,1) ;
SetTable(table_bingotable,size_bingotable,size_bingotable,100,100,1) ;
SetTableMin(table_database,100,100) ;
SetTableMin(table_bingotable,150,150) ;
for ( var i = 0 ; i < array_item.length ; i ++ )
{
	InsertDataBase(array_item[i]) ;
	select_call.options.add(new Option(array_item[i],array_item[i]));  
}
button_coffrim.style.width = "100%" ;
button_coffrim.style.height = 50 ;
button_coffrim.innerHTML = "確認" ;
button_call.style.width = "50%" ;
button_call.style.height = 50 ;
button_call.innerHTML = "叫號" ;
select_call.style.width = "50%" ;
select_call.style.height = 50 ;
button_coffrim.setAttribute("onclick","Confirm_layout();Confirm_game()") ;
button_call.setAttribute("onclick","Call(select_call.value)")
div_database.appendChild(table_database) ;
div_bingotable.appendChild(table_bingotable) ;
div_call.appendChild(button_coffrim) ;
document.body.appendChild(div_database);
document.body.appendChild(div_bingotable);
document.body.appendChild(div_call);
function SetTable(t ,  r ,  c ,  w ,  h ,  b )
{
	for( var i = 0 ; i < r ; i ++ ) { 
		t.insertRow(); 
	    for( var j = 0 ; j < c ; j ++ ) { 
			t.rows[i].insertCell(j);
			t.rows[i].cells[j].setAttribute("ondrop", "Drop(event)") ;
			t.rows[i].cells[j].setAttribute("ondragover","AllowDrop(event)") ;
			t.rows[i].cells[j].align = "middle" ;
		}    
	} 
	t.width = w + "%"  ;
	t.height = h + "%"  ;
	t.border = b ;
}
function SetTableMin (t , w , h )
{
	for ( i = 0 ; i < t.rows.length ; i ++ )
	{
		t.rows[i].cells[0].height = h ;
		for ( j = 0 ; j < t.rows[i].cells.length ; j ++ )
			t.rows[i].cells[j].width = w ;
	}
}
function InsertDataBase(s)
{
	var img_newitem = document.createElement("img") ;
	img_newitem.src = "pic/" + s + ".png" ;
	img_newitem.setAttribute("id", s); 
	img_newitem.width = 100 ;
	img_newitem.height = 100 ;
	img_newitem.setAttribute("draggable", true);
	img_newitem.setAttribute("ondragstart","Drag(event)") ;
	table_database.rows[0].cells[0].appendChild(img_newitem) ;
}
function AllowDrop(event){
	event.preventDefault();
}
function Drag(event){
	event.dataTransfer.setData("text",event.currentTarget.id);
}
function Drop(event){
	if ( event.currentTarget.childNodes[0] != null && event.currentTarget != table_database )
	{
		table_database.rows[0].cells[0].appendChild(document.getElementById(event.currentTarget.childNodes[0].id));
	}
	event.preventDefault();
	var data=event.dataTransfer.getData("text");
	event.currentTarget.appendChild(document.getElementById(data));
}
function Confirm_layout(){
	div_call.removeChild(div_call.lastChild) ;
	div_call.appendChild(select_call) ;
	div_call.appendChild(button_call) ;
	for ( var i = 0 ; i < array_item.length ; i ++ )
		document.getElementById(array_item[i]).draggable = false ;
}

Game

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
var x_map = {} ;
var y_map = {} ;
function CheckBingo(x,y)
{
	for ( i = 0 ; i < size_bingotable ; i ++ )
	{
		if ( table_bingotable.rows[i].cells[y].bgColor != "green" && table_bingotable.rows[i].cells[y].bgColor != "red" )
			break ;
		if ( i == size_bingotable - 1 )
		{
			for ( j = 0 ; j < size_bingotable ; j ++ )
				table_bingotable.rows[j].cells[y].bgColor = "red" ;
		}
	}
	for ( i = 0 ; i < size_bingotable ; i ++ )
	{
		if ( table_bingotable.rows[x].cells[i].bgColor != "green" && table_bingotable.rows[x].cells[i].bgColor != "red" )
			break ;
		if ( i == size_bingotable - 1  )
		{
			for ( j = 0 ; j < size_bingotable ; j ++ )
				table_bingotable.rows[x].cells[j].bgColor = "red" ;
		}
	}
	if ( x == y )
	{
		for ( i = 0 ; i < size_bingotable ; i ++ )
		{
			if ( table_bingotable.rows[i].cells[i].bgColor != "green" && table_bingotable.rows[i].cells[i].bgColor != "red" )
				break ;
			if ( i == size_bingotable - 1  )
			{
				for ( j = 0 ; j < size_bingotable ; j ++ )
					table_bingotable.rows[j].cells[j].bgColor = "red" ;
			}
		}
	}
	else if ( x + y == size_bingotable -1 )
	{
		for ( i = 0 ; i < size_bingotable ; i ++ )
		{
			if ( table_bingotable.rows[i].cells[size_bingotable-1-i].bgColor != "green" && table_bingotable.rows[i].cells[size_bingotable-1-i].bgColor != "red" )
				break ;
			if ( i == size_bingotable -1  )
			{
				for ( j = 0 ; j < size_bingotable ; j ++ )
					table_bingotable.rows[j].cells[size_bingotable-1-j].bgColor = "red" ;
			}
		}
	}
}
function Call(call)
{
	try{
		if ( call in x_map )
		{
			var x = x_map[call] ;
			var y = y_map[call] ;
			if ( table_bingotable.rows[x].cells[y].bgColor != "red" )
			{
				table_bingotable.rows[x].cells[y].bgColor = "green" ;
				CheckBingo(x,y) ;
			}
		}
	}catch (e)
	{
		;
	}
}
function Confirm_game(){
	for ( i = 0 ; i < 4 ; i ++ )
	{
		for ( j = 0 ; j < 4 ; j ++ )
		{
			try{
				x_map[table_bingotable.rows[i].cells[j].childNodes[0].id] = i ;
				y_map[table_bingotable.rows[i].cells[j].childNodes[0].id] = j ;
			}catch(e)
			{
				;
			}
		}
	}
}