一个简单的迷宫游戏（有BUG）

最新推荐文章于 2024-11-01 15:19:31 发布
song_4
最新推荐文章于 2024-11-01 15:19:31 发布
阅读量748
点赞数
分类专栏：网站小白文章标签： html css jquery
本文链接：https://blog.csdn.net/song_4/article/details/42106493
版权
网站小白专栏收录该内容
3 篇文章 0 订阅
订阅专栏
最近用jquery简单写了一个迷宫游戏，改了好几天，还把一些地方优化了，但实现起来还是有问题，留着以后再修改吧。
<!DOCTYPE html PUBLIC >
<html lang="zh-CN">
<head>
<link href="bootstrap.css" type="text/css" rel="stylesheet" />
<style type="text/css">
    body{
    	width: 1300px;
    }
    #container{
    	width: 1000px;
    	height: 1000px;
    	text-align: center;
    	position: fixed;
    }

    #board tr{
    	height: 38px;
    }

    #board td{
    	width:41px;
    	vertical-align: inherit;
    	}


    #cube{
    	width: 41px;
    	height: 38px;
    	background-color: blue;
    	float: left;
    	position:relative;
    }

    #botton1{
    	width: 500px;
    	height: 50px;
    	margin: 20px auto;
    }


    button{
        width: 100px;
    	margin-left: 20px;
    	float: left;
        margin-right: 50px;
    	
    }

    .form-control{
        width: 150px;
        height: 45px;
    }


    .changetop{
    border-top: 2px solid #123456;
    }

    .changeright{
    border-right: 2px solid #123456;
    }

    .table th{
        width:150px;

        padding-left: 20px;
        text-align: center;
    }

   .table  td{
        width: 150px;
        height: 30px;
        padding-left: 20px;
        text-align: center;
    }
    
    .table  {
        margin-top: 50px;
        width:500px;
        float: right;
    }

    h1{
        
        padding-left: 950px;
        padding-top: 20px;
    }

    .bordertop{
        border-top: 2px solid #123456;
    }

    .borderright{
        border-right: 2px solid #123456;
    }
    
   #board td:nth-child(1){
        border-left:2px solid #123456;
    }

    #board td:nth-child(11){
        border-right:2px solid #123456;
    }
    
    #board tr:nth-child(13){
        border-bottom:2px solid #123456;
    }

</style>

<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
    <body>
    	<div id="container">
    	<div id="botton1">
            <button type="button" id="start_game_btn"class="btn btn-Info btn-lg" >Start</button>
            <button type="button" id="end_game_btn"class="btn btn-danger btn-lg" >End</button>
            <input type="text" class="form-control" placeholder="input your name" >
		</div>
    	<div id="divTime"></div>
            <table id="board" cellspacing="0" cellpadding="0" align="center">
            <tbody>
            </tbody>
    </table>
	</div>
    <h1>Rank List</h1>
    <table class="table" >   
        <thead>
            <th>Rank</th>
            <th>Name</th>
            <th>Time</th>
        </thead>
        <tbody  id="rank">
        </tbody>
    </table>
    </body>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){

        var maze = new Array()
    var sides = new Array("Border-top", "Border-right")
    for (var rows=0; rows<13; rows++)
        maze[rows] = new Array()
    
    maze[0][0] = [1,1,1,1,1,1,1,1,1,1,1,1]
    maze[0][1] = [0,0,1,0,1,0,0,0,0,1,0,1]
    maze[1][0] = [1,0,0,0,1,0,1,1,1,0,1,1]
    maze[1][1] = [0,1,1,0,0,1,1,0,0,1,0,1]
    maze[2][0] = [1,0,1,0,1,0,0,1,1,0,1,1]
    maze[2][1] = [0,0,0,0,1,1,1,0,0,0,0,1]
    maze[3][0] = [0,1,1,1,1,1,0,0,0,0,1,1]
    maze[3][1] = [1,0,0,1,0,0,0,1,1,0,0,1]
    maze[4][0] = [0,0,0,0,0,0,1,1,1,1,1,1]
    maze[4][1] = [1,1,1,1,1,0,0,0,0,0,1,1]
    maze[5][0] = [0,0,0,0,1,0,1,1,1,1,0,0]
    maze[5][1] = [1,1,1,1,1,1,0,0,0,1,0,1]
    maze[6][0] = [0,0,0,0,0,0,1,1,0,1,0,1]
    maze[6][1] = [1,1,1,1,1,1,0,0,0,1,0,1]
    maze[7][0] = [1,0,1,0,0,0,1,0,1,1,0,1]
    maze[7][1] = [1,1,1,0,1,0,0,1,0,1,1,1]
    maze[8][0] = [0,0,0,1,0,0,1,1,0,0,0,0]
    maze[8][1] = [0,1,0,1,1,0,0,0,1,1,0,1]
    maze[9][0] = [0,0,0,0,0,1,1,1,1,0,1,1]
    maze[9][1] = [1,1,1,1,0,0,0,0,0,1,1,1]
    maze[10][0] = [0,0,0,0,0,1,1,1,1,1,0,0]
    maze[10][1] = [1,1,1,0,1,0,0,0,0,1,0,1]
    maze[11][0] = [0,0,1,1,1,1,1,1,1,0,0,0]
    maze[11][1] = [1,0,1,0,0,0,0,0,0,0,1,1]
    maze[12][0] = [0,0,0,0,0,1,1,1,1,0,1,0]
    maze[12][1] = [1,1,0,1,0,0,0,1,0,0,1,2]
    
    
    for (var paint_rows=0; paint_rows<13; ++paint_rows){
        var domment_tr;
        var domment_td="<td></td>";
        var domment;
        if(paint_rows==0){
            domment = "<tr><td>"+'<div id="cube">'+'</div>'+"</td><td>"+"</td><td>"+"</td><td>"+"</td><td>"+"</td><td>"+"</td><td>"+"</td><td>"+"</td><td>"+"</td><td>"+"</td><td>"+"</td></tr>";
                $("#board").append(domment);
        }
        else if(paint_rows==12){
            domment = "<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td> "+"end"+"</td></tr>";
            $("#board").append(domment);
        }
        
        else {
            for(var i=0;i<13;++i){
                domment_ele="<tr>";
                for(var j=0;j<12;++j){
                    domment_ele+="<td></td>";
                }
                domment_ele+="</tr>";
            }
            $("#board").append(domment_ele);
        }
    }


    for (var paint_rows=0; paint_rows<13; paint_rows++){
        for(var paint_cols=0; paint_cols<11; paint_cols++){
                if(maze[paint_rows][0][paint_cols]==1)
                    $("tr").eq(paint_rows).find("td").eq(paint_cols).addClass('bordertop');  
                
            
                if(maze[paint_rows][1][paint_cols]==1)
                    $("tr").eq(paint_rows).find("td").eq(paint_cols).addClass('borderright');  
        }
    }

    $("#cube").hide();

    var t;
    var timeIndex = 0;
    var url = "";
    var ranklist = new Array();
    var d;
    var c;

    function setTime(){
        c=new Date();
        var hour = Math.abs(c.getHours()-d.getHours()); 
        var minutes = Math.abs(c.getMinutes()-d.getMinutes()); 
        var seconds = Math.abs(c.getSeconds()-d.getSeconds()); 

        hour = hour < 10 ? "0" + hour : hour;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        $("#divTime").text(hour+":"+minutes+":"+seconds);
        $("#linkTime").attr("href", url + timeIndex);
    }          

          
    $('#start_game_btn').click(function(){
        d=new Date();
        var regex = /dateTime=(\d+)/;
        var src = location.toString();
        if(src.match(regex))
            timeIndex = src.match(regex)[1];
        url = $("#linkTime").attr("href");
        setTime();
        t=setInterval(setTime, 1000);
        $(this).hide();
        $("#cube").show();
        $("#cube" ).animate({left: "0px",top:'0px',marginLeft:0,marginTop: 0});
    });

    $('#end_game_btn').click(function(){
        $('#start_game_btn').show();
        $("#cube").hide();
        clearTimeout(t);
        start.rows = 0
        start.cols = 0

    });
       


    var start = {rows:0,cols:0};
    $(document).keydown(function(e){
        jQuery.fx.interval = 20;
        $.fx.speeds.crawl = 80;
        var kcode = e.keyCode;
        
        switch(kcode){
            case 37: // left
                if (maze[start.rows][1][start.cols-1]==0) {
                    start.cols--
                    $("#cube").animate({"left": "-=41px"},"crawl");  
                } 
                
                break;

            case 38: // up
                if (maze[start.rows][0][start.cols]==0) {
                    start.rows--
                    $("#cube").animate({"top": "-=38px"},"crawl");
                } 

                break;
            
            case 39: // right

                if (maze[start.rows][1][start.cols]==0||maze[start.rows][1][start.cols+1]==2) {
                    start.cols++
                    $("#cube").animate({"left": "+=41px"},"crawl");
                     if (maze[start.rows][1][start.cols]==2){
                        alert("You Win!");
                        $('#start_game_btn').show();
                        $("#cube").hide();
                        clearTimeout(t);
                        start.rows = 0
                        start.cols = 0
                        var obj = {timenumber:timeIndex,name:$(".form-control").val(),time:$("#divTime").text()};
                        ranklist.push(obj);
                        ranklist.sort(function(a,b){
                        return a.timenumber-b.timenumber;
                            });
                        }
                }
                
                break;
        
        console.log(start.rows,start.cols);
            case 40: //down
                
                if (maze[start.rows+1][0][start.cols]==0) {
                    start.rows++
                    $("#cube").animate({"top": "+=38px"},"crawl");
                } 
              
                break;
        }
            $("#rank").html("");
            $.each(ranklist, function(index,value){
                var dom = "<tr><td>"+((index)+1)+"</td><td>"+value.name+"</td><td>"+value.time+"</td></tr>";
                $("#rank").append(dom);
            });
            if(kcode>=37 && kcode<=40)
                return false;
    });
});

</script>
</html>