软件开发培训班 >> 编程开发 >> JavaScript

用javascript做一个webgame连连看大家看下

　　本文标签：js,游戏

<html> 
<head> 
<title>脚本之家-www.jb51.net 连连看</title> 
<style> 
.select{filter:Gray} 
#lineDiv{height:20px} 
.lineDot{position:absolute; background:#f60;padding:0;font-size:0;width:10px;height:10px} 
#gridDiv{padding:50px;background:#000;border:5px solid #ccc} 
#gridTalbe{background-repeat:no-repeat; background-position:center; margin:0} 
#gridTalbe td{width:41px;height:50px;} 
#gridTalbe img{width:40px; border-right:1px solid #666;} 
body{ padding:0; margin:0} 
</style> 
</head> 
<body> 
<table width="100%" border="1"> 
  <tr> 
    <td><div id="gridDiv"></div></td> 
    <td width="180" align="center" bgcolor="#CCCCCC"><input name="button" type="button" onClick="oGrid.shuffle()" value="洗牌"></td> 
  </tr> 
</table> 
<div id="lineDiv"></div> 
<div id="debug"></div>

/************************************************************************ 
设计：tot 
时间：2007-12-29 
MSN：xiaotot@msn.com 
************************************************************************/ 
//记录被选择图块的信息 
var selectImg = ""; 
var selectX = 0; 
var selectY = 0; 
//图块宽度和高度，用来计算画线的位置 
var stepX = 41; 
var stepY = 50;

//初始化棋盘,只能以oGrid命名 
var oGrid = new objGrid(16,8);

/*****************************功能函数*******************************************/ 
//数组元素随机排序,tot设计，修改请保留 
function rndArray(arr){ 
    var le = arr.length; 
        for(var i=0; i < le; i++){ 
            var s = Math.floor(Math.random()*le); 
            var zx = arr[i].x; 
            var zy = arr[i].y;//这里不能写成z=arr[i],因为object是引用 
            arr[i].x = arr[s].x; 
            arr[i].y = arr[s].y; 
            arr[s].x = zx; 
            arr[s].y = zy; 
        } 
} 
//数组元素随机排序 
function ArrayRnd(arr,times){ 
    for(i = 0; i < times; i++)rndArray(arr) 
}

//获取Html元素的绝对位置 
function GetAbsoluteLocation(element){ 
    if ( arguments.length != 1 || element == null ) return null;

//图块对象 
function objImgBlock(pic){ 
    var obj = new Object(); 
    obj.picName = pic; 
    obj.x = 0; 
    obj.y = 0; 
    obj.toHtml = function(){ 
        return "<img name=" + this.picName + " onclick=clickImg(" + this.x + "," + this.y + ") src=images/" 
         + this.picName + ".gif>" 
    } 
    return obj; 
} 
//坐标点对象，对应于承载图块的二元数组下标 
function objPoint(x,y){ return{ X : x, Y : y }} 
//点击图块的动作 
function clickImg(x,y){ 
    eObj = event.srcElement;

if((selectImg.name == eObj.name) && (selectImg !== eObj)){ 
        if(Line(new objPoint(selectX,selectY),new objPoint(x,y))){ 
            selectImg.style.display = "none"; 
            eObj.style.display = "none"; 
            selectImg = ""; 
            selectX = 0; selectY = 0; 
        }else changeSelect(eObj,x,y) 
    }else{ 
        changeSelect(eObj,x,y) 
    } 
} 
//更换选择的图块 
function changeSelect(o,x,y){ 
    selectImg.className = ""; 
    selectImg = o; 
    selectImg.className = "select"; 
    selectX = x; selectY = y; 
}

//画线 
function Line(sPoint,ePoint){ 
    var nLine = oGrid.findNormal(sPoint,ePoint); 
    if(nLine){ 
        oGrid.arrGrid[sPoint.X][sPoint.Y] = ""; 
        oGrid.arrGrid[ePoint.X][ePoint.Y] = "";

drawLine(sPoint,nLine.sP); 
        drawLine(nLine.sP,nLine.eP); 
        drawLine(ePoint,nLine.eP);

setTimeout(clearLine,500); 
        return true; 
    }else{ 
        return false 
    } 
}

//连接两点的画线函数 
function drawLine(sPoint,ePoint){ 
    var startPoint, endPoint, lineType = true;//默认画横线 
    var lineLen;//画线长度 
    var linDiv = document.getElementById("lineDiv"); 
    var O = document.getElementById("gridTalbe"); 
    //原点的绝对坐标 
    var oPoint = new objPoint(GetAbsoluteLocation(O).absoluteLeft - 25, GetAbsoluteLocation(O).absoluteTop - 30);

if(sPoint.X == ePoint.X){ //画竖线 
        if(sPoint.Y > ePoint.Y){//判断起始点 
            startPoint = ePoint; 
            endPoint = sPoint; 
        }else{ 
            startPoint = sPoint; 
            endPoint = ePoint; 
        } 
        lineLen = endPoint.Y - startPoint.Y + 1; 
        lineType = false; 
    }else{//画横线 
        if(sPoint.X > ePoint.X){//判断起始点 
            startPoint = ePoint; 
            endPoint = sPoint; 
        }else{ 
            startPoint = sPoint; 
            endPoint = ePoint; 
        } 
        lineLen = endPoint.X - startPoint.X + 1; 
    }

for(i = 1; i <= lineLen; i++){ 
        var lineDot = document.createElement("<div class=lineDot></div>"); 
        lineDot.style.left = lineType ? (oPoint.X + stepX * (startPoint.X + i) + "px") : (oPoint.X + stepX * (startPoint.X + 1) + "px"); 
        lineDot.style.top = lineType ? (oPoint.Y + stepY * (startPoint.Y + 1) + "px") : (oPoint.Y + stepY * (startPoint.Y + i) + "px"); 
        linDiv.insertBefore(lineDot); 
    } 
} 
//清除画线 
function clearLine(){ 
    var linDiv = document.getElementById("lineDiv"); 
    linDiv.innerHTML = ""; 
} 
//调试用 
function debug(str){ 
    var linDiv = document.getElementById("debug"); 
    linDiv.innerHTML = str + "
" + linDiv.innerHTML; 
} 
function odebug(obj,oname){ 
    var linDiv = document.getElementById("debug"); 
    for(o in obj){ 
        if(typeof(obj[o]) == "object"){ 
            odebug(obj[o],oname + o + ".") 
        } 
        else linDiv.innerHTML = oname + o + "=" + obj[o] + "
" + linDiv.innerHTML; 
    } 
}

</script> 
</body> 
</html>

技术文章快速查找

Jquery cookie操作代码

javascript写的一个链表实现代码

JavaScript 题型问答有答案参考

使用IE8 Beta轻松调试JavaScript

parentElement,srcElement的使用小结

jQuery学习3：操作元素属性和特性

javascript 运算数的求值顺序

jquery 简单的图片展示效果

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建