js 一個連連看小遊戲

時間 2019-11-15

原文原文鏈接

剛開始學JavaScript，寫了一個連連看小遊戲。暫時實現了基本的遊戲功能。準備往後慢慢完善。
演示地址： http://llkgame.sinaapp.com/

javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> css

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title>Welcome to Lianliankan Game</title> <script type = "text/javascript" charset="utf-8"> var level= 0; var SIMPLE=5, NORMAL=10, HARD=15; var block_one=-1; var block_two=-1; var img_src_one="one"; var img_src_two="two"; var break_point_one=new Array(); var break_point_one_pointer=-1; var break_point_two=new Array(); var break_point_two_pointer=-1; level=NORMAL; // Those two functions are used to decide which row or col the block is in. function get_row_start(block){ var row_start = Math.floor((block/(level+2)))*(level+2); return row_start; } function get_col_start(block){ var col_start = block%(level+2); return col_start; } // It seems that we can't use document.getElementById(block_one).style.opacity to get the opacity even we set them in the css. // So I decide to set all of the td's opacity first. Because I need to use the opacity to decide the block was "eliminated" or not. function set_opacity(){ for (var i = 0; i < level + 2; i++) { for (var j = 0; j < level + 2; j++) { var id= i*(level+2)+j; if(i>=1&&i<=level&&j>=1&&j<=level) document.getElementById(id).style.opacity= 1; else document.getElementById(id).style.opacity= 0; } } } //Initialization. To draw all the game block. function ini(){ var html_table = "<table width=800px height=500px>"; for (var i = 0; i < level + 2; i++) { html_table += "<tr>"; for (var j = 0; j < level + 2; j++) { var id= i*(level+2)+j; var num = Math.round(Math.random()*3) var img="<IMG SRC=\""+"/static/"+num+".png"+"\">" if(i>=1&&i<=level&&j>=1&&j<=level) html_table += "<td "+"onclick=\"get_element(event)\" "+"id='"+id+"'>"+img+"</td>"; else html_table += "<td "+"id='"+id+"'>"+id+"</td>"; } html_table += "</tr>"; } html_table += "</table>"; document.getElementById("gamle_field").innerHTML=html_table; set_opacity(); } //Choose the block which was "eliminated" and can link to the choosed block directly. function pick_block(block,block_array){ var pointer=0; var row_start = get_row_start(block); var col_start = get_col_start(block); var row_start_block = document.getElementById(row_start); var col_start_block = document.getElementById(col_start); for (var i = 0; i < level + 2; i++) { var new_id = parseInt(row_start_block.id) + i; if((document.getElementById(new_id).style.opacity!=1)&&(check_link(parseInt(block),new_id)==1)){ block_array[pointer]=new_id; pointer++; } var new_id = parseInt(col_start_block.id) + (i*(level+2)); if((document.getElementById(new_id).style.opacity!=1)&&(check_link(parseInt(block),new_id)==1)){ block_array[pointer]=new_id; pointer++; } } } //Check whether two block can link each other directly. function check_link(id_1,id_2){ var feedback=1; var row_start_one = get_row_start(id_1); var col_start_one = get_col_start(id_1); var row_start_two = get_row_start(id_2); var col_start_two = get_col_start(id_2); if (row_start_one==row_start_two){ for (var i = Math.min(id_1,id_2)+1; i < Math.max(id_1,id_2); i++){ var middle_block = document.getElementById(i); if(middle_block.style.opacity!=1) continue; else{ feedback=-1; break; } } } else if (col_start_one==col_start_two){ for (var i = Math.min(id_1,id_2)+level + 2; i < Math.max(id_1,id_2); i+=(level + 2)) { var middle_block = document.getElementById(i); if(middle_block.style.opacity!=1) continue; else{ feedback=-1; break; } } } else {feedback=-1;} return feedback } //Remove the choosed block. function remove(){ block_one=-1; block_two=-1; img_src_one="one"; img_src_two="two"; for(i in break_point_one) break_point_one[i]=-1 for( j in break_point_two) break_point_two[j]=-1 } //Judge the two block can be eliminated function judge(){ if(img_src_one==img_src_two){ //alert("good"); if((block_one>0)&&(block_two>0)){ if(check_link(block_one,block_two)==1){ document.getElementById(block_one).style.opacity= 0; document.getElementById(block_two).style.opacity= 0; remove() } else{ pick_block(block_one,break_point_one); pick_block(block_two,break_point_two); for(i in break_point_one){ for( j in break_point_two){ if((break_point_one[i]>-1)&&(break_point_two[j]>-1)){ if(check_link(break_point_one[i],break_point_two[j])==1){ document.getElementById(block_one).style.opacity= 0; document.getElementById(block_two).style.opacity= 0; remove() break; } } } if((block_one==-1)&&(block_two==-1)){ break; } } if((block_one!=-1)&&(block_two!=-1)){ alert("wrong choice!"); remove() } } } } else { alert("WRONG~~~"); remove() } } function get_element(event){ var targ,targ_id; /*This part I got it from w3cschool, because at first I just use the "e = window.event e.target" But It seems that It can't work on IE, so It is used for the compatibility, in fact, I don't know why.*/ if (!e) var e = window.event if (e.target) targ_c = e.target else if (e.srcElement) targ_c = e.srcElement targ=targ_c.parentNode targ_id=targ.id if( document.getElementById(targ_id).style.opacity!= 0){ if(block_one>=0){ block_two=targ_id; img_src_two=targ_c.src; } else{ block_one=targ_id; img_src_one=targ_c.src; } } if((block_one>0)&&(block_two>0)&&(block_one!=block_two)){ judge(); } } </script> </head> <body onload="ini()"> <div id='gamle_field'> </div> </body> </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。