学习坐标【javascript】拼图小游戏 -java教程_java拼图小游戏教学视频-CSDN博客

本文链接：https://blog.csdn.net/javablogs/article/details/8843592

发一下牢骚和主题无关：

兴致才是学习的力动源泉。始终欢喜游戏类的编程，因为得觉好玩。。。

周末这2天预备写个拼图的小游戏，只为学习面向对象，虽然对面向对象里的很多西东还不太熟悉。

昨天（星期六）开始写了面界，写着写着，感到困了就睡觉去了^ ^,明天早上起来把它完成了，顺便在博客里记载下来，下次不懒的时候，再加点动画效果。

上面是HTML分部，用了一个bg.jpg的图片。

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
#box{width:480px;height:480px;border:5px solid #ccc;position:relative;margin:20px auto 0;}
#box div{background:url(bg.jpg) no-repeat;width:158px;height:158px;border:1px dashed #fafafa;position:absolute;}
#box .on{width:158px;height:158px;border:1px solid #ff0;}
#box img{position:absolute;top:0;left:0;width:480px;height:480px;display:none;}
#box span{position:absolute;top:420px;left:490px;background:#ccc;width:60px;height:30px;color:#000;line-height:30px;text-align:center;cursor:pointer;}
</style>
</head>
<body>
<div id="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <img src="bg.jpg" alt="" />
    <span>view</span>
</div>
<script type="text/javascript" src="effect.js"></script>
</body>
</html>

每日一道理
如果你们是蓝天，我愿做衬托的白云；如果你们是鲜花，我愿做陪伴的小草；如果你们是大树，我愿做点缀的绿叶……我真诚地希望我能成为你生活中一个欢乐的音符，为你的每一分钟带去祝福。

上面是现实功能的Javascript码代

/**************
Author:Jason Yu
Date:2012-11-24
**************/
var oBox = document.getElementById("box");
var aBoxDiv = oBox.getElementsByTagName("div");
var oBoxSpan = oBox.getElementsByTagName("span")[0];
var oBoxImg = oBox.getElementsByTagName("img")[0];
var iBoxDivSize = 160;
var iStatic = true;
var arr = [];  //div坐标
var arr2 = [];   //背景坐标
var arrBox1=null;
var arrBox2=null;
var len = aBoxDiv.length;

function Box(){}
Box.prototype = {
    reset:function(){
        arr = [];  
        arr2 = [];  
        len = aBoxDiv.length;

        for(var i=0; i<3; i++){
            for(var j=0; j<3; j++){
                arr.push([iBoxDivSize*i,iBoxDivSize*j]);
                arr2.push([iBoxDivSize*i,iBoxDivSize*j]);
            }
        }

        for(var i=0, l=aBoxDiv.length; i<l; i++){
            var a = Math.floor(Math.random()*len);
            aBoxDiv[i].style.left = arr[a][0] + "px";
            aBoxDiv[i].style.top = arr[a][1] + "px";
            aBoxDiv[i].style.backgroundPosition= "-" + (arr2[i][0]+1) + "px" + " " + "-" + (arr2[i][1]+1) + "px"; 
            arr.splice(a,1);
            len--;
            var that = this;
            aBoxDiv[i].index = i;
            aBoxDiv[i].onclick = function(){
                that.move(this);
            }
        }
    },
    move:function(obj){
        for(var j=0, l=aBoxDiv.length; j<l; j++){
            aBoxDiv[j].className = "";
        }
        
        if(iStatic){
            obj.className = "on";
            arrBox1 = [parseInt(obj.style.left), parseInt(obj.style.top), obj.index];
            
        }else{
            arrBox2 = [parseInt(obj.style.left), parseInt(obj.style.top), obj.index];
            
            if(arrBox1[0]-arrBox2[0]==0 && Math.abs(arrBox1[1]-arrBox2[1])==iBoxDivSize){
                aBoxDiv[arrBox1[2]].style.top = arrBox2[1]+"px";
                aBoxDiv[arrBox2[2]].style.top = arrBox1[1]+"px";
            }else if(arrBox1[1]-arrBox2[1]==0 && Math.abs(arrBox1[0]-arrBox2[0])==iBoxDivSize){
                aBoxDiv[arrBox1[2]].style.left = arrBox2[0]+"px";
                aBoxDiv[arrBox2[2]].style.left = arrBox1[0]+"px";
            }
        }
        iStatic = !iStatic;
        this.judge();
    },
    judge:function(){
        var iCan = false;
        for(var i=0, l=aBoxDiv.length; i<l; i++){
            if(parseInt(aBoxDiv[i].style.left)==arr2[i][0] && parseInt(aBoxDiv[i].style.top)==arr2[i][1]){
                iCan = true;
            }else{
                iCan = false;
                break;
            }
        }
        
        if(iCan){
            if(confirm("喜恭您拼图胜利！重来？")){
                this.reset();
            }
        }
    },
    viewimg:function(){
        oBoxImg.style.display = "block";
    },
    hideimg:function(){
        oBoxImg.style.display = "none";
    }
}
var iBox = new Box();
iBox.reset();
oBoxSpan.onmousedown = function(){iBox.viewimg();}
oBoxSpan.onmouseup = function(){iBox.hideimg();}