基于html的拼图游戏

某厂面试归来，发现自己落伍了！>>>

开发工具：Visual Studio Code

游戏介绍：可通过滑动滑块来调整拼图游戏难度，当拼图完成游戏胜利。

程序设计步骤：

1.编写html代码

2.编写js代码

一，编写html代码

1.设置照片样式

< style >

  .picture  {

      border :  1px   solid   black ;}

 

  </ style >

2.设置游戏难度大小

 

< form >

      < label > 低 </ label >

      < input   type = "range"   id = "scale"   value = "4"   min = "3"   max = "5"   step = "1" >

      < label > 高 </ label >

  </ form >

3.设置游戏边框

  < canvas   id = "puzzle"   width = " 480px"   height = "480px" ></ canvas >

 

二，编写js代码

1.导入图片

var   img = new   Image ();

img . src = 'defa.jpg' ;

img . addEventListener ( 'load' , drawTiles , false );

 

2.设置所需基本参数

var   boardSize = document . getElementById ( 'puzzle' ). width ;

var   tileCount = document . getElementById ( 'scale' ). value ;

 

var   tileSize = boardSize / tileCount ;

 

var   clickLoc = new   Object ;

clickLoc . x = 0 ;

clickLoc . y = 0 ;

 

var   emptyLoc = new   Object ;

emptyLoc . x = 0 ;

emptyLoc . y = 0 ;

 

var   solved = false ;

 

var   boardParts = new   Object ;

 

3.设置移动盘

function   setBoard (){

     boardParts = new   Array ( tileCount );

     for ( var   i = 0 ; i < tileCount ;++ i ) {

         boardParts [ i ]= new   Array ( tileCount );

         for  ( var   j = 0 ; j < tileCount ;++ j ){

             boardParts [ i ][ j ]= new   Object ;

             boardParts [ i ][ j ]. x =( tileCount - 1 )- i ;

             boardParts [ i ][ j ]. y =( tileCount - 1 )- j ;

        }

    }

     emptyLoc . x = boardParts [ tileCount - 1 ][ tileCount - 1 ]. x ;

     emptyLoc . y = boardParts [ tileCount - 1 ][ tileCount - 1 ]. y ;

     solved = false ;

}

 

运行结果：

 

参考代码：

html:

 

  <! doctype   html >

  < html >

  < head >

  < title > 拼图游戏 </ title >

  < style >

  .picture  {

      border :  1px   solid   black ;}

 

  </ style >

  </ head >

  < body >

  < div   id = "title" >

  < h2 > 拼图游戏 </ h2 >

  < div   id = "slider" >

  < form >

      < label > 低 </ label >

      < input   type = "range"   id = "scale"   value = "4"   min = "3"   max = "5"   step = "1" >

      < label > 高 </ label >

  </ form >

  < br >

  </ div >

  < div   id = "main"   class = "main" >

  < canvas   id = "puzzle"   width = " 480px"   height = "480px" ></ canvas >

  </ div >

  < script   src = "sliding.js" ></ script >

  < script   src = "1.js" ></ script >

</ body >

  </ html >

 

js:

var   context = document . getElementById ( 'puzzle' ). getContext ( '2d' );

 

var   img = new   Image ();

img . src = 'defa.jpg' ;

img . addEventListener ( 'load' , drawTiles , false );

 

var   boardSize = document . getElementById ( 'puzzle' ). width ;

var   tileCount = document . getElementById ( 'scale' ). value ;

 

var   tileSize = boardSize / tileCount ;

 

var   clickLoc = new   Object ;

clickLoc . x = 0 ;

clickLoc . y = 0 ;

 

var   emptyLoc = new   Object ;

emptyLoc . x = 0 ;

emptyLoc . y = 0 ;

 

var   solved = false ;

 

var   boardParts = new   Object ;

setBoard ();

 

document . getElementById ( 'scale' ). onchange = function (){

     tileCount = this . value ;

     tileSize = boardSize / tileCount ;

     setBoard ();

     drawTiles ();

};

 

document . getElementById ( 'puzzle' ). onmousemove = function ( e ){

     clickLoc . x = Math . floor (( e . pageX - this . offsetLeft )/ tileSize );

     clickLoc . y = Math . floor (( e . pageY - this . offsetTop )/ tileSize );

};

 

document . getElementById ( 'puzzle' ). onclick = function (){

     if  ( distance ( clickLoc . x , clickLoc . y , emptyLoc . x , emptyLoc . y )== 1 ){

         slideTile ( emptyLoc , clickLoc );

         drawTiles ();

    }

     if ( solved ){

         setTimeout ( function (){ alert ( "You solved it!" );}, 500 );

    }

};

 

function   setBoard (){

     boardParts = new   Array ( tileCount );

     for ( var   i = 0 ; i < tileCount ;++ i ) {

         boardParts [ i ]= new   Array ( tileCount );

         for  ( var   j = 0 ; j < tileCount ;++ j ){

             boardParts [ i ][ j ]= new   Object ;

             boardParts [ i ][ j ]. x =( tileCount - 1 )- i ;

             boardParts [ i ][ j ]. y =( tileCount - 1 )- j ;

        }

    }

     emptyLoc . x = boardParts [ tileCount - 1 ][ tileCount - 1 ]. x ;

     emptyLoc . y = boardParts [ tileCount - 1 ][ tileCount - 1 ]. y ;

     solved = false ;

}

 

function   drawTiles (){

     context . clearRect ( 0 , 0 , boardSize , boardSize );

     for ( var   i = 0 ; i < tileCount ;++ i ){

         for ( var   j = 0 ; j < tileCount ;++ j ){

             var   x = boardParts [ i ][ j ]. x ;

             var   y = boardParts [ i ][ j ]. y ;

             if ( i != emptyLoc . x  ||  j != emptyLoc . y  ||  solved == true ){

                 context . drawImage ( img , x * tileSize , y * tileSize , tileSize , tileCount ,

                     i * tileSize , j * tileSize , tileSize , tileSize );

            }

        }

    }

}

 

function   distance ( x1 , y1 , x2 , y2 ) {

     return   Math . abs ( x1 - x2 )+ Math . abs ( y1 - y2 );

}

 

function   slideTile ( toLoc , fromLoc ){

     if (! solved ){

         boardParts [ toLoc . x ][ toLoc . y ]. x = boardParts [ fromLoc . x ][ fromLoc . y ]. x ;

         boardParts [ toLoc . x ][ toLoc . y ]. y = boardParts [ fromLoc . x ][ fromLoc . y ]. y ;

         boardParts [ fromLoc . x ][ fromLoc . y ]. x = tileCount - 1 ;

         boardParts [ fromLoc . x ][ fromLoc . y ]. y = tileCount - 1 ;

         toLoc . x = fromLoc . x ;

         toLoc . y = fromLoc . y ;

         checkSolved ();

    }

}

 

function   checkSolved (){

     var   flag = true ;

     for ( var   i = 0 ; i < tileCount ;++ i ){

         for ( var   j = 0 ; j < tileCount ;++ j ){

             if ( boardParts [ i ][ j ]. x != i  ||  boardParts [ i ][ j ]. y != j ){

                 flag = false ;

            }

        }

    }

     solved = flag ;

}

 

 

 

来源：oschina

链接：https://my.oschina.net/u/4463382/blog/3196789