<!DOCTYPE html>

<html>

  <head>

    <title>MyHtml.html</title>

  </head>

  <body>

  <canvas id="mycanvas" width="600px" height="600px"></canvas>

  </body>

  <script type="text/javascript">

    //绘制棋盘设置每行有14个单元格，共有196个格子，格子大小为30 X 30

    var aa=;

    var chess = document.getElementById("mycanvas");

    var context = chess.getContext('2d');

    function drawChessBoard(){//绘画

        for(var i=;i<aa+;i++){

            context.strokeStyle='gray';//可选区域

            context.moveTo(+i*,);//垂直方向画15根线，相距30px;

            context.lineTo(+i*,+*aa);

            context.stroke();

            context.moveTo(,+i*);//水平方向画15根线，相距30px;棋盘为14*14；

            context.lineTo(+*aa,+i*);

            context.stroke();

        }

    }

    drawChessBoard();

   //设置两个相邻的格子是否是相同的,二维数组access

   var access = [];

   for(var i =  ; i < aa*aa ; i++){

       access[i] = [];

      for(var j =  ; j< aa*aa ; j++){

         access[i][j] = -;

      }

   }

    //生成迷宫时候用到的并查集

     var  arr = [];

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

      arr[j] = j;

    }

    function search(a){

       while(a != arr[a]){

         a = arr[a];

        }

        return a;

    }

    function union(a,b){

       var  pa = search(a);

       var  pb = search(b);

       arr[pb] = pa;

    }

    function getnei(a)//获得邻居号  random

    {

        var y = parseInt(a/aa);//要精确成整数

        var x = a%aa;

        var mynei=new Array();//储存邻居

        if(x->=){mynei.push(y*aa+x-);}//左节点

        if(x+<){mynei.push(y*aa+x+);}//右节点

        if(y+<){mynei.push((y+)*aa+x);}//

        if(y->=){mynei.push((y-)*aa+x);}//

        var ran=parseInt(Math.random() * mynei.length );

        return mynei[ran];

    }

    function drawline(a,b)//划线，要判断是上下还是左右

    {

        var y1=parseInt(a/aa);

        var x1=a%aa;   //横坐标

        var y2=parseInt(b/aa);

        var x2=b%aa;

        var x3 = x1<x2?x1:x2;

        if(y1-y2==){   //左右方向的点  需要上下划线 x1是较小值

           context.clearRect(+(x3+)*-, +y2*+,,);

        }else{

           context.clearRect(x1*++, ((y1+y2)/+)*-,,);

        }

    }

     // drawline(18,32);

    while(search()!=search())//主要思路

    {

        var num = parseInt(Math.random() * aa*aa );//产生一个小于196的随机数

        var neighbour=getnei(num);

        if(search(num)==search(neighbour)){continue;}

        else//不在一个上

        {

            drawline(num,neighbour);//划线

            union(num,neighbour);

            access[num][neighbour] = ;

            access[neighbour][num] = ;

        }

    }

    //在(0,0)位置上画一个蓝色方框

    var currentLine=;

    var currentCol=;

    context.fillStyle = "blue";

    context.fillRect(currentLine*++,currentCol*++,,);

    //在(13,13)上画一个绿色方框

    context.fillStyle = "green";

    context.fillRect(*++,*++,,);

    context.fillStyle = "blue";

    //监听键盘上下左右键

    document.onkeydown=function(e){

     var tempLine = currentLine;

     var tempCol = currentCol;

     var isExceed = false;

     e=window.event||e;

     var num =  e.keyCode;

      switch(e.keyCode){

        case : //左键

          currentLine--;

          if(currentLine <  || currentLine >  || !checkAccess(tempLine,tempCol , currentLine ,currentCol)){

             currentLine++;

            isExceed = true;

            break;

          }

          break;

        case : //上键

          currentCol--;

          if(currentCol <  || currentCol >  || !checkAccess(tempLine,tempCol , currentLine ,currentCol)){

            currentCol++;

            isExceed = true;

            break;

          }

          break;

        case : //右键

          currentLine++;

          if(currentLine <  || currentLine >  || !checkAccess(tempLine,tempCol , currentLine ,currentCol)){

            currentLine--;

            isExceed = true;

            break;

          }

          break;

        case : //下键

          currentCol++;

          if(currentCol <  || currentCol >  || !checkAccess(tempLine,tempCol , currentLine ,currentCol)){

            currentCol--;

            isExceed = true;

            break;

          }

          break;

        default:

          break;

      }

      if( (num ==  || num ==  || num ==  || num ==  ) && !isExceed){

           context.clearRect(tempLine*++, tempCol*++, , );

           context.fillRect(currentLine*++,currentCol*++,,);

      }

      checkSucess(currentLine ,currentCol );

    }

    function checkAccess(tempLine,tempCol , currentLine ,currentCol){

        var oldSeq = tempCol*+tempLine;

        var newSeq = currentCol*+currentLine;

        if(access[oldSeq][newSeq] ==  || access[newSeq][oldSeq] ==  ){

            return true;

        }else{

           return false;

        }

    }

    function  checkSucess(currentLine ,currentCol ){

       if(currentLine ==  && currentCol == ){

          alert("success!");

          window.location.reload();

          return ;

       }

    }

  </script>

</html>

Js迷宫游戏的更多相关文章

  1. c语言迷宫游戏的实现

    // // main.c // 迷宫游戏代码实现 // #include <stdio.h> #define ROW 6 //宏定义行 #define COL 6 //宏定义列 /** * ...

  2. 51nod 1459 迷宫游戏(dij)

    题目链接:51nod 1459 迷宫游戏 dij裸题. #include<cstdio> #include<cstring> #include<algorithm> ...

  3. Pomelo：网易开源基于 Node.js 的游戏服务端框架

    Pomelo:网易开源基于 Node.js 的游戏服务端框架 https://github.com/NetEase/pomelo/wiki/Home-in-Chinese

  4. 用webgl打造自己的3D迷宫游戏

    用webgl打造自己的3D迷宫游戏 2016/09/19 · JavaScript · WebGL 原文出处: AlloyTeam    背景:前段时间自己居然迷路了,有感而发就想到写一个可以让人迷路 ...

  5. 【Qt编程】3D迷宫游戏

    说起迷宫想必大家都很熟悉,个人感觉迷宫对人的方向感是很大的考验,至少我的方向感是不好的,尤其是在三维空间中.由于这段时间帮导师做项目用到了三维作图,便心血来潮想做个三维迷宫玩玩.要想画出三维的迷宫游戏 ...

  6. 一个js小游戏----总结

    花了大概一天左右的功夫实现了一个js小游戏的基本功能,类似于“雷电”那样的小游戏,实现了随即怪物发生器,碰撞检测,运动等等都实现了,下一个功能是子弹轨迹,还有其他一些扩展功能,没有用库,也没有用web ...

  7. js canvas游戏初级demo-躲避障碍物

    在线演示地址 http://200ok.fun:3100/html/game_demo.html 继上次js canvas游戏初级demo-上下左右移动(https://www.cnblogs.com ...

  8. 51nod--1459 迷宫游戏 （dijkstra）

    1459 迷宫游戏 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 你来到一个迷宫前.该迷宫由若干个房间组成,每个房间都有一个得分,第一次进入这个房间,你就可 ...

  9. 51 NOd 1459 迷宫游戏 （最短路径）

    1459 迷宫游戏  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 你来到一个迷宫前.该迷宫由若干个房间组成,每个房间都有一个得分,第一次进入这个房间, ...

随机推荐

  1. 离散数学交并补运算、差运算、异或运算的实现--biaobiao88

    对集合的交并补运算.差运算及异或运算的代码,可输入字符与数字,内容简单,详情请看以下代码 #include<iostream> using namespace std; int main( ...

  2. html5样式初始化，你值得拥有！！

    /*万能清除法*/     *{padding:0;margin:0;}     li{list-style: none;}     img{vertical-align:top;border: 0; ...

  3. XSS相关Payload及Bypass的备忘录（上）

    翻译学习准备自用,同时分享给大家, 来自于: https://github.com/swisskyrepo/PayloadsAllTheThings/tree/master/XSS%20Injecti ...

  4. 【转载】Gradle学习 第八章：依赖管理基础

    转载地址:http://ask.android-studio.org/?/article/10 This chapter introduces some of the basics of depend ...

  5. linux echo命令颜色显示

    echo命令颜色显示: echo:      -n:  不换行.      -e:让转移符生效. \t(tab) \n (换行) 实例: $ echo -e "\033[34mabcd\03 ...

  6. 关于ORACLE图形化安装过程中出现的竖线的处理办法

    这种情况上传个jre 并指定下就好了 ~/database/runInstaller -jreLoc /usr/local/jre1.8.0_191/

  7. Django框架（十）--常用字段、参数、元信息、多对多关联关系

    一.ORM字段 # AutoField() int自增列,必须填入参数 primary_key=True.当model中如果没有自增列,则自动会创建一个列名为id的列 # IntegerField() ...

  8. 3. 卷积神经网络(CNN)

    关于数据集的介绍 top-N正确率指的是图像识别算法给出前N个答案中有一个是正确的概率. 在图像识别方面,基于卷积神经网络的图像识别算法给图像识别问题带来了质的飞跃,从2013年之后,基本上所有的研究 ...

  9. echarts - 折线图 - 每秒刷新数据并显示

    function randomData() { now = new Date(+now + oneDay); value = value + Math.random() * 21 - 10; var ...

  10. Helm 安装Kafka

    helm镜像库配置 helm repo add stable http://mirror.azure.cn/kubernetes/charts helm repo add incubator http ...