0

我使用 javascript 制作了一个配对游戏，但它无法正常运行。我不知道问题是什么。

图像文件在这里 http://goo.gl/dZv0nQ

我也想知道如何自己解决这样的javascript问题。我尝试在 6 小时内搜索问题所在，但我失败了..

<!DOCTYPE html><head>
<meta charset="utf-8"/>
    <script type='text/javascript'>
        var canvas ;
        var context ;
        var img= "0.jpg" ;
        var imgs=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg","11.jpg","12.jpg","13.jpg","14.jpg","15.jpg","16.jpg","17.jpg","18.jpg","19.jpg","20.jpg","21.jpg","22.jpg","23.jpg","24.jpg","25.jpg","26.jpg","27.jpg","28.jpg","29.jpg","30.jpg","31.jpg","32.jpg"];
        var imgr=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]; 

        var selectedFirstImage = null;
        var selectedFirstI = -1;
        var selectedFirstJ = -1;

        var prevImg = null; //
        var prevI = -1;
        var prevJ = -1;         
        var CurrI= -1; // 
        var CurrJ= -1; // 

        var TimerID = null;
        var cnt = 0;                        
        function rememberImage(e){
            if(TimerID==null){
                    var selectedImageIndex = -1; // 
                    var selectedI = 0 ; //
                    var selectedJ = 0; //

                    for(var i=0; i<8; i++)  { // 
                        for(var j=0; j<8; j++)  { // 
                            if(e.offsetY>(100*(i+0)) && e.offsetY<(100*(i+1))){
                                if(e.offsetX>(100*(j+0)) && e.offsetX<(100*(j+1))){
                                    selectedI=j ; // 
                                    selectedJ=i ; // 
                                    selectedImageIndex = i*8+j ; // 
                                    break ;
                                }
                            }
                        }
                    } // 여기까지 고정실행

                    // 여기서부터 분기문
                    if(prevImg==null){
                        var image=new Image();
                        image.src=imgs[selectedImageIndex];
                        context.drawImage(image,100*selectedI,100*selectedJ,100,100);
                        prevImg=image.src;
                        prevI=selectedI;
                        prevJ=selectedJ;
                    }
                    else{ // prevImg != null 라면
                        var image=new Image();
                        image.src=imgs[selectedImageIndex];

                        if(image.src==prevImg){
                            context.drawImage(image,100*selectedI,100*selectedJ,100,100);
                            prevImg=null;
                            prevI=-1;
                            prevJ=-1;
                        }                       
                        else{
                            CurrI = selectedI;
                            CurrJ = selectedJ;
                            context.drawImage(image,100*selectedI,100*selectedJ,100,100);

                            if(TimerID==null)
                                TimerID=setInterval("showImage()",500);
                        }
                    }
            } // rememberImage 끝
        }
        function showImage(){
            var image = new Image();
            image.src = img;
            context.drawImage(image,100*CurrI,100*CurrJ,100,100);
            context.drawImage(image,100*prevI,100*prevJ,100,100);

            prevImg = null; // 다음 call을 대비
            prevJ = -1;
            prevI = -1;

            CurrI = -1;
            CurrJ = -1;                         
            clearInterval(TimerID);
            TimerID=null;
        }
        function mixImage(){ // 페이지 로드되면 자동호출
            canvas=document.getElementById("canvas");
            context=canvas.getContext("2d");
            if(TimerID==null){
                canvas.addEventListener("mousedown",rememberImage); 
            }

            for(var i=0 ; i<8 ; i++){
                for(var j=0 ; j<8 ; j++){
                    var image = new Image(); // 지역변수생성
                    image.src = img ;
                    context.drawImage(image, 100*j, 100*i, 100, 100);
                    imgr[i*8+j] = Math.random(); // 0에서 1까지의 수를 임의의 공간에 저장한다
                } 
            }
            for(var i=0 ; i < imgs.length ; i++){ 
                for(var j=0 ; j < imgs.length-1 ; j++){ 
                    var tmps;
                    var tmpr;

                    if(imgr[j]>imgr[j+1]){ 
                        tmps = imgs[j];
                        tmpr = imgr[j];

                        imgs[j]=imgs[j+1]; 
                        imgr[j]=imgr[j+1];

                        imgs[j+1]=tmps;
                        imgr[j+1]=tmpr;
                    }
                }
            }
        }
    </script>
</head>
<body onload="mixImage();">
    <canvas id="canvas" width="1000" height="1000" style="border:solid 1px #000000" >
    </canvas>
</body>

4

0 回答 0