<!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. Python模块File文件操作

    Python模块File简介 Python提供了File模块进行文件的操作,他是Python的内置模块.我们在使用File模块的时候,必须先用Popen()函数打开一个文件,在使用结束需要close关 ...

  2. 2019-11-07 微信小程序入门

    1.什么是微信小程序? 小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”,用户扫一扫或者搜一下即可打开应用,体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题.应用将无处不 ...

  3. web的应用模式

    在开发web应用中,有两种模式: 1.前后端分离. 2.前后端不分离. 一.前后端不分离 在前后端不分离的应用模式中,前端页面看到的效果是有后端控制的,由后端渲染页面或重定向,也就是后端需要控制前端的 ...

  4. Caml 多表关联查询

    using (SPSite site = new SPSite(SiteUrl)) { using (SPWeb web = site.RootWeb) { SPQuery query = new S ...

  5. Android源码分析（八）-----系统启动流程&IPC简述

    一 :系统启动流程图 从下往上依次启动linux kernel -->zygote-->SystemServer-->NativeService-->AndroidServic ...

  6. 串口 PLC 编程FAQ

    1. 不要频繁打开关闭串口,这是个耗时的过程,如果多个工位都争夺串口资源,则会出现卡顿,死锁. 2. PLC 的读写估计100毫秒,如果并发的写,有的写操作会失败,需要Delay或重试. 3. 通常一 ...

  7. Linux Firewalld 基础实例

    本次是一个Firewalld的基础操作实例,利用Firewalld图形操作界面进行访问控制操作. 实验拓扑 需求分析 首先拓扑涉及到两个区域,这里使用work和public区域,分别做相应的规则. 1 ...

  8. Alipay支付宝调用错误：Call to undefined function openssl_sign()

    打开php.ini,找到这一行 ;extension=php_openssl.dll,将前面的“;”去掉: 重启服务器.

  9. xshell 连接报错 Disconnected from remote host

    Type `help' to learn how to use Xshell prompt. [c:\~]$ Connecting to 20.0.0.91:22...Connection estab ...

  10. 仿照手机写一个WIFI的操作程序

    本篇博客仿照手机的功能,写一个WIFI的操作程序. 手机的WIFI功能有哪些呢?当我们进入wlan的设置界面的时候,将自动识别出若干个wifi的热点,并且会自动更新,当点击某个wifi热点的时候,然后 ...