- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <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.*/
- var e = window.event || arguments[0];
- 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>
- //该片段来自于http://www.codesnippet.cn/detail/180920136003.html
来源: http://www.codesnippet.cn/detail/180920136003.html