<!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. SpringApplication到底run了什么（下）

    在上篇文章中SpringApplication到底run了什么(上)中,我们分析了下面这个run方法的前半部分,本篇文章继续开工 public ConfigurableApplicationConte ...

  2. 双栈（Dual Stack）

    参考博客: 双栈数据结构: https://blog.csdn.net/hebtu666/article/details/83011115 https://blog.csdn.net/cainv89/ ...

  3. i春秋——“百度杯”CTF比赛 九月场——Test（海洋cms / seacms 任意代码执行漏洞）

    打开发现是海洋cms,那就搜索相关漏洞 找到一篇介绍海洋cms的命令执行漏洞的文章:https://www.jianshu.com/p/ebf156afda49 直接利用其中给出的poc /searc ...

  4. 安装Docker报container-selinux >= 2.9错

    Docker装了无数次,还是会遇到如此熟悉的问题,知道他是版本需要更新,但是就是找不到对应的,在网上找了差不多一个下午都没弄好.发现平时还是要多动脑子才行,既然知道是版本需要更新,那么到官网直接找版本 ...

  5. Python基础-numpy

    创建数组 numpy.array():括号内可以是列表.元祖.数组.生成器等 numpy.arange():类似range(),在给定间隔内返回均匀间隔的值 #numpy.linspace() 返回在 ...

  6. itextpdf中表格中单元格的文字水平垂直居中的设置

    在使用itextpdf中,版本是5.5.6,使用Doucument方式生成pdf时,设置单元格中字体的对齐方式时,发现一些问题,并逐渐找到了解决方式. 给我的经验就是:看官网的例子才能保证代码的效果, ...

  7. ubuntu16.04 共享文件夹之后 /mnt/hgfs目录下没有显示共享的文件夹

    root权限执行: apt-get install open-vm-tools vmhgfs-fuse .host:/ /mnt/hgfs

  8. windows校验文件的值

    Windows校验文件值的三种方式 win键+R键输入cmd调出命令行 查看MD5值: certutil -hashfile 文件名 MD5 查看 SHA1 certutil -hashfile 文件 ...

  9. 数据结构 - 二叉搜索树封装 C++

    二叉搜索树封装代码 #pragma once #include <iostream> using namespace std; template<class T>class T ...

  10. ArcGIS 10 线转点 polyline to points

    核心提示,使用Construct Points工具,在编辑里,选中一条polyline,然后编辑工具栏里的Construct Points.图等有空再补上吧.