js 一个连连看小游戏

最新推荐文章于 2022-12-06 11:38:44 发布

weixin_33975951

最新推荐文章于 2022-12-06 11:38:44 发布

阅读量150

点赞数

文章标签：游戏 javascript xhtml ViewUI

原文链接：https://my.oschina.net/u/861770/blog/94255

版权

2019独角兽企业重金招聘Python工程师标准>>>

刚开始学JavaScript，写了一个连连看小游戏。暂时实现了基本的游戏功能。准备日后慢慢完善。
演示地址： http://llkgame.sinaapp.com/

<!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 "+"οnclick=\"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 οnlοad="ini()">

<div id='gamle_field'>

</div>
</body>
</html>

转载于:https://my.oschina.net/u/861770/blog/94255