<!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. Java集合大全

    上图为整理的集合类图关系,带对号标志的为线程安全类. 区别说明: 1.List Set Map Queue的区别List: 有序,可以多个元素引用相同的对象Set: 无序,不重复,不可以多个元素引用相 ...

  2. Vue详细介绍模板语法和过滤器的使用！

    表达式 {{ XXX }}使用过滤器 {{ XXX | yyy}}使用多个过滤器 {{ XXX | yyy | yyy1}}过滤器带参数 {{ XXX | yyy(123,"zhuiszhu ...

  3. 【转载】Gradle学习 第二章：概述

    转载地址:http://ask.android-studio.org/?/article/6 Here is a list of some of Gradle's features.<翻译> ...

  4. 5 LInux系统目录结构

      ls /    显示根目录下的文件 /bin bin是Binary的缩写,这个目录存放着经常使用的命令 /boot 存放的是启动Linux时使用的一些核心文件,包括一些连接文件以及镜像文件 /de ...

  5. B端产品经理的金字塔能力模型

    工作这几年,时长思考,作为B端产品经理自己应该具备什么样的能力? 虽然工作依旧在有条不紊的进行,但是时常会陷入到对知识或者能力的焦虑当中.特别时是工作三五年,产品经理进阶门槛时. 虽然产品经理的能力是 ...

  6. Java多线程编程核心技术-第6章-单例模式与多线程-读书笔记

    第 6 章 单例模式与多线程 本章主要内容 如何使单例模式遇到多线程是安全的.正确的. 6.1 立即加载 / “饿汉模式” 什么是立即加载?立即加载就是使用类的时候已经将对象创建完毕,常见的实现办法就 ...

  7. phpcms站点域名配置https无法提交如何处理

    一位网友给ytkah反映说phpcms站点域名配置https无法提交,在后台修改站点域名为https提交后提示“站点域名格式应该为http://www.phpcms.cn/,请以‘/’结束”,这个要如 ...

  8. application platform as a service (aPaaS)

    Application platform as a service (aPaaS) is a cloud service that provides environments for the deve ...

  9. 【Js】创建对象的6种方式总结、（底部包含属性名为动态的形式）

    一.new 操作符 + Object 创建对象 1 var person = new Object(); 2 person.name = "lisi"; 3 person.age ...

  10. arduino控制超声波

    //LingShun LAB #define Trig 2 //引脚Tring 连接 IO D2 #define Echo 3 //引脚Echo 连接 IO D3 float cm; //距离变量 f ...