此时情绪此时天，无事小神仙
好好生活，平平淡淡每一天

编辑

小游戏

小霸王其乐无穷：https://www.yikm.net/

圈猫：http://www.mvcat.com/game/catch-the-cat/

3D旋转动画

image
image

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>3D旋转动画</title>
<style type="text/css">
*{
    margin:0 auto;
    padding:0;
}
@keyframes rotate{
    0%{
        transform:rotateX(0deg) rotateY(0deg);
    }
    100%{
        transform:rotateX(360deg) rotateY(360deg);
    }
}
html{
    /* background:linear-gradient(#ff0 0%, #000 80%);*/
    height:100%;
}
.wrap{
    margin-top:200px;
    perspective: 1000px; /* 视图距元素的距离 相当于摄像机 */
}
.cube{
    width:200px;
    height:200px;
    position:relative;
    color:#fff;
    font-size:36px;
    font-weight:bold;
    text-align:center;
    line-height:200px;
    transform-style:preserve-3d; /* 默认flat 2D */
    transform:rotateX(-30deg) rotateY(-70deg); 
    animation:rotate 20s infinite linear; /*播放时间 播放次数为循环 缓动效果为匀速 */
}
.cube >  .photo{
    width:100%;
    height:100%;
    border:1px solid #fff;
    position:absolute;
    background-color:#333;
    opacity:.6;
    transition:transform 0.4s ease-in;
top:0px;
    left:0px;
}
.cube .out-front{
    transform: translateZ(100px);
}
.cube .out-back{
    transform: translateZ(-100px) rotateY(180deg);
}
.cube .out-left{
    transform: translateX(-100px) rotateY(-90deg);
}
.cube .out-right{
    transform: translateX(100px) rotateY(90deg);
}
.cube .out-top{
    transform: translateY(-100px) rotateX(90deg);
}
.cube .out-bottom{
    transform: translateY(100px) rotateX(-90deg);
}
.cube > img{
    display:block;
    width:100px;
    height:100px;
    border:1px solid black;
    background-color:#999;
    position:absolute;
    top:50px;
    left:50px;
}
.cube .in-front{
    transform: translateZ(50px);
}
.cube .in-back{
    transform: translateZ(-50px) rotateY(180deg);
}
.cube .in-left{
    transform: translateX(-50px) rotateY(-90deg);
}
.cube .in-right{
    transform: translateX(50px) rotateY(90deg);
}
.cube .in-top{
    transform: translateY(-50px) rotateX(90deg);
}
.cube .in-bottom{
    transform: translateY(50px) rotateX(-90deg);
}
.wrap:hover .out-front{
    transform: translateZ(200px);
}
.wrap:hover .out-back{
    transform: translateZ(-200px) rotateY(180deg);
}
.wrap:hover .out-left{
    transform: translateX(-200px) rotateY(-90deg);
}
.wrap:hover .out-right{
    transform: translateX(200px) rotateY(90deg);
}
.wrap:hover .out-top{
    transform: translateY(-200px) rotateX(90deg);
}
.wrap:hover .out-bottom{
    transform: translateY(200px) rotateX(-90deg);
}

</style>
</head>
<body>
<div class="wrap">
    <div class="cube">
        <img class="out-front photo" src="http://p4.qhimg.com/bdm/960_593_0/t01e71082414f50bd52.jpg"/>
        <img class="out-back photo" src="http://p0.qhimg.com/bdm/480_296_0/t01f3894323e88ea123.jpg"/>
        <img class="out-left photo" src="http://p15.qhimg.com/bdm/960_593_0/t01acc12e86173a0606.jpg"/>
        <img class="out-right photo" src="http://p6.qhimg.com/bdm/960_593_0/t0127bd4f8758c42304.jpg"/> 
        <img class="out-top photo" src="http://p6.qhimg.com/bdm/480_296_0/t01e501e8d6a74a1a1d.jpg"/>
        <img class="out-bottom photo" src="http://p1.qhimg.com/bdm/960_593_0/t01f95f85f3f4c2c938.jpg"/>

        <img class="in-front photo-in" src="http://p4.qhimg.com/bdm/960_593_0/t01e71082414f50bd52.jpg"/>
        <img class="in-back photo-in" src="http://p0.qhimg.com/bdm/480_296_0/t01f3894323e88ea123.jpg"/>
        <img class="in-left photo-in" src="http://p15.qhimg.com/bdm/960_593_0/t01acc12e86173a0606.jpg"/>
        <img class="in-right photo-in" src="http://p6.qhimg.com/bdm/960_593_0/t0127bd4f8758c42304.jpg"/>
        <img class="in-top photo-in" src="http://p6.qhimg.com/bdm/480_296_0/t01e501e8d6a74a1a1d.jpg"/>
        <img class="in-bottom photo-in" src="http://p1.qhimg.com/bdm/960_593_0/t01f95f85f3f4c2c938.jpg"/>
    </div>
</div>
</body>
</html>
PC贪吃块

image


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>贪吃块</title>
        <script crossorigin="anonymous" integrity="sha384-mlceH9HlqLp7GMKHrj5Ara1+LvdTZVMx4S1U43/NxCvAkzIo8WJ0FE7duLel3wVo" src="https://lib.baomitu.com/jquery/3.4.1/jquery.js"></script>
    </head>
    <style>
        body{
            background: #ECAD9E;
            width: 100%;
            height: 100%;
        }
        #title{
            position: absolute;
            width: 98%;
            height: 17%;
            line-height:100%;
            font-size:150%;
            top: calc(0);
            left: calc(1%);
            text-align:center;
            background: #BEEDC7;
            border: 3px solid #19CAAD;
            border-radius: 5px;
        }
        #ppp{
            width: 40px;
            height: 40px;
            background: red;
            position: absolute;
            left: 100px;
            top: 100px;
        }
        #stage{
            position: absolute;
            width: 98%;
            height: 66%;
            top: calc(17%);
            left: calc(1%);
            background: #BEE7E9;
            border: 3px solid #F4606C;
            border-radius: 5px;
        }
        #food{
            position: absolute;
            width: 10px;
            height: 10px;
            top:calc(50%);
            left: calc(50%);
            background: green;
            visibility: visible;
        }
    </style>
    <script type="text/javascript">

        var setInter;
        var times = 100;
        var grade = 0;
        var isContinue = true;
        var speed = 0;//控制小方块速度
        $(function() {
            var stage = $("#stage");
            var food =$("#food");
            var snake = $("#ppp");
            $(document).keyup(function(event) {//键盘监听
                //var real = String.fromCharCode(event.keyCode);
                clearInterval(setInter);
                var t = event.keyCode;
                var p = $("#ppp");
                var ptxt = p.val();
                p.val(ptxt + t);
                speed = 150-grade*5;
                if(50>=speed){//速度最快是50毫秒
                    speed = 50;
                }
                setInter = setInterval(function(){move(t);},speed);
            });
            function move(t){//移动
                var go = "<span style='color:green;'>go</span>";
                var ready = "<span style='color:red;'>ready</span>";
                switch (t){
                    case 37:
                        $("#content").html(go);
                        moveLeft();
                        break;
                    case 38:
                        $("#content").html(go);
                        moveTop();
                        break;
                    case 39:
                        $("#content").html(go);
                        moveRight();
                        break;
                    case 40:
                        $("#content").html(go);
                        moveBottom();
                        break;
                    default:
                        $("#content").html(ready);
                        break;
                }
                showFood();
                eatFood();
            }

            function eatFood(){//判断是否吃到食物
                var ft = parseInt(food.css("top"))+10;
                var fl = parseInt(food.css("left"))+10;
                var fb = parseInt(food.css("top"));
                var fr = parseInt(food.css("left"));
                var st = parseInt(snake.css("top"));
                var sl = parseInt(snake.css("left"));
                var sb = parseInt(snake.css("top"))+parseInt(snake.css("height"));
                var sr = parseInt(snake.css("left"))+parseInt(snake.css("width"));
                if(ft>st&&fl>sl&&fb<sb&&fr<sr){
                    food.css("visibility","hidden");
                    var co = food.css("background-color");
                    snake.css({"width":parseInt(snake.css("width"))+10+"px","height":parseInt(snake.css("width"))+10+"px","background-color":co});
                    grade++;
                    return;
                }
            }

            function showFood(){//生成食物
                isSucceed();
                if(!isContinue){
                    return true;
                }
                if(food.css("visibility")=="visible")return;
                var r = Math.random()*255;
                var g = Math.random()*255;
                var b = Math.random()*255;
                var s ="rgb("+r+","+g+","+b+")";
                food.css({"top":Math.random()*490,"left":Math.random()*690,"background":s});
                var ft = parseInt(food.css("top"))+10;
                var fl = parseInt(food.css("left"))+10;
                var fb = parseInt(food.css("top"));
                var fr = parseInt(food.css("left"));
                var st = parseInt(snake.css("top"));
                var sl = parseInt(snake.css("left"));
                var sb = parseInt(snake.css("top"))+parseInt(snake.css("height"));
                var sr = parseInt(snake.css("left"))+parseInt(snake.css("width"));
                if(ft>st&&fl>sl&&fb<sb&&fr<sr){
                    showFood();
                    return;
                }
                food.css("visibility","visible");
            }

            function moveLeft(){//左移
                var snake = $("#ppp");
                var odlLeft = snake.css("left");
                gameOver(0,parseInt(odlLeft));
                snake.css("left",parseInt(odlLeft)-10+"px");
            }

            function moveTop(){//上移
                var snake = $("#ppp");
                var odTop = snake.css("top");
                gameOver(0,parseInt(odTop));
                snake.css("top",parseInt(odTop)-10+"px");
            }

            function moveRight(){//右移
                var snake = $("#ppp");
                var odlLeft = snake.css("left");
                var max = stage.width()-snake.width();
                gameOver(parseInt(odlLeft),max);
                snake.css("left",parseInt(odlLeft)+10+"px");
            }

            function moveBottom(){//下移
                var snake = $("#ppp");
                var odBottom = snake.css("top");
                var bottomMax = stage.outerHeight()-snake.height();
                gameOver(parseInt(odBottom),bottomMax);
                snake.css("top",parseInt(odBottom)+10+"px");
            }

            function gameOver(pos,max){//游戏结束
                if(!isContinue){
                    return true;
                }
                if(pos >= max){
                    alert("游戏结束！！你的得分"+grade);
                    window.location.reload();
                }
            }
            function isSucceed(){
                if(!isContinue){
                    return true;
                }
                if(49<grade){
                    isContinue = false;
                    alert("恭喜你,通关了!你的得分"+grade);
                    window.location.reload();
                }
            }

        });
    </script>

    <body>
        <div id="title">
            <h5 style="color:orangered;">消遣娱乐</h5>
            <h4 id="content">ready</h4>
        </div>
        <div id="stage">
            <div id="ppp"></div>
            <div id="food"></div>
        </div>
    </body>

</html>
PC迷宫1

image


<html lang="en">
<head>
<meta charset="utf-8">
<title>休闲迷宫</title>
<style type="text/css">
span{
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: #8bc24c;
    background: #fae3d9;
}
</style>
<script>
    top != self && top.host != self.host && (top.location = self.location);
    (function(d) {
        d.className = d.className.replace(/\bno-js/, '');
    })(document.documentElement);
    var $CONFIG = {
        'data' : {}
    };
</script>
</head>
<body>
    <div class="maze-game-container" style="text-align: center;">
        <h3 class="maze-game-info">迷宫。</h3>
        <canvas class="maze-content" width="1500" height="800"></canvas>
        <h4 class="maze-game-info" style="margin-top: 0;">
            使用<span>w</span>、<span>a</span>、<span>s</span>、<span>d</span>，或者方向键进行游戏。
        </h4>
    </div>
</body>
<script src="https://awps-assets.meituan.net/mit/blog/v20190629/asset/vendor/zepto.min.js"></script>
<script src="https://awps-assets.meituan.net/mit/blog/v20190629/common.js"></script>
<script src="https://awps-assets.meituan.net/mit/blog/v20190629/errorPage.js"></script>
</html>
PC迷宫2

image


<html lang="zh-CN" class="translated-ltr">
<head>
<meta charset="UTF-8">
<title>迷宫</title>
<style type="text/css">
canvas {
    display: block;
    margin: 50px auto;
    box-shadow: -2px -2px 2px #F3F2F2, 5px 5px 5px #6F6767;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei", "微软雅黑", "consolas";
    background: #fbecc3;
    background-attachment: fixed;
}

a {
    text-decoration: none;
    color: #000;
}

.navbar {
    background-color: #000;
    width: 100%;
    height: 50px;
}

.container {
    width: 1000px;
    margin: 0 auto;
}

.navbar .navbar-content-1 a {
    float: left;
    color: #FFF;
    line-height: 50px;
    display: inline-block;
    width: 90px;
    white-space: nowrap;
    text-align: left;
}

.navbar .navbar-content-2 a {
    float: right;
    color: #FFF;
    line-height: 50px;
    display: inline-block;
    width: auto;
    white-space: nowrap;
    text-align: right;
}

.navbar .navbar-content a {
    float: left;
    color: #FFF;
    line-height: 50px;
    display: inline-block;
    width: 90px;
    white-space: nowrap;
    text-align: center;
}

.navbar .navbar-content a:hover {
    color: #CCC;
}

.news-list {
    margin: 50px 0;
    background-color: #FFF;
    border-radius: 15px;
    border: 1px solid #DDD;
    padding: 30px 20px;
    min-height: 300px;
}

.news-list:hover {
    box-shadow: 0 0 5px 3px #CCC;
}

.about .about-des {
    border-left: 5px solid #abc;
    margin-top: 15px;
}

.about .about-des p {
    padding-left: 10px;
    line-height: 28px;
    text-indent: 2em;
}

.news-list-left {
    float: left;
    width: 729px;
    margin-bottom: 50px;
}

.news-list-right {
    float: right;
    width: 229px;
}

.news-title i {
    display: inline-block;
    width: 47px;
    height: 43px;
    margin-right: 10px;
    background: url('image/54a1137bbeaa9.jpg') left center no-repeat;
    vertical-align: middle;
}

.news-title a {
    color: green;
}

.news-title a:hover {
    text-decoration: underline;
}

.copyright {
    clear: both;
    text-align: center;
    color: gray;
    border-top: 2px solid #CCC;
    margin-top: 50px;
    padding: 20px 0;
}

button {
    cursor: pointer;
    width: 150px;
    height: 44px;
    margin-top: 25px;
    padding: 0;
    background: #ef4300;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #ff730e;
    -moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px 7px
        0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px
        7px 0 rgba(0, 0, 0, .2);
    box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px 7px 0
        rgba(0, 0, 0, .2);
    font-family: 'PT Sans', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
    -o-transition: all .2s;
    -moz-transition: all .2s;
    -webkit-transition: all .2s;
    -ms-transition: all .2s;
}

button:hover {
    -moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset, 0 2px 7px
        0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset, 0 2px
        7px 0 rgba(0, 0, 0, .2);
    box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset, 0 2px 7px 0
        rgba(0, 0, 0, .2);
}

button:active {
    -moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset, 0 2px 7px
        0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .15) inset, 0 2px
        7px 0 rgba(0, 0, 0, .2);
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, .1) inset, 0 1px 4px 0
        rgba(0, 0, 0, .1);
    border: 0px solid #ef4300;
}
</style>
<link type="text/css" rel="stylesheet" charset="UTF-8" href="https://translate.googleapis.com/translate_static/css/translateelement.css">
</head>
<body>
    <nav class="navbar">
        <div class="navbar-content-1">
            <a href="https://blog.csdn.net/qq_40693171">   </a>
        </div>
        <div class=" container navbar-content"></div>
        <div class="navbar-content-2">
            <a><font style="vertical-align: inherit;"><font
                    style="vertical-align: inherit;"></font></font></a>
        </div>
    </nav>

    <div class="container">
        <h1 style="vertical-align: inherit;text-align: center;">
            迷宫小游戏
        </h1>
        <h4></h4>

        <div class="news-list">
            <div class="news-list-left">
                <canvas id="mycanvas" width="600px" height="600px"></canvas>

            </div>

            <div class="news-list-right">
                <div class="about">
                    <h4></h4>
                    <div class="about-des">
                        <span id="mytime">00时00分00秒000毫秒</span>
                        <button onclick="start()">
                            <font style="vertical-align: inherit;"><font
                                style="vertical-align: inherit;">开始游戏</font></font>
                        </button>
                        <button onclick="stop()">
                            <font style="vertical-align: inherit;"><font
                                style="vertical-align: inherit;">暂停</font></font>
                        </button>
                        <button onclick="range()">
                            <font style="vertical-align: inherit;"><font
                                style="vertical-align: inherit;">排行榜</font></font>
                        </button>
                        <button onclick="renovates()">
                            <font style="vertical-align: inherit;"><font
                                style="vertical-align: inherit;">重新开始</font></font>
                        </button>

                    </div>
                    <img
                        src="https://c-ssl.duitang.com/uploads/item/201210/26/20121026223826_CzrmW.thumb.700_0.jpeg"
                        width="100%" height="35%">
                </div>
            </div>
            <footer class="copyright"> </footer>
        </div>
    </div>

    <div id="goog-gt-tt" class="skiptranslate" dir="ltr">
        <div style="padding: 8px;">
            <div>
                <div class="logo">
                    <img
                        src="https://www.gstatic.com/images/branding/product/1x/translate_24dp.png"
                        width="20" height="20" alt="Google 翻译">
                </div>
            </div>
        </div>
        <div class="top" style="padding: 8px; float: left; width: 100%;">
            <h1 class="title gray">原文</h1>
        </div>
        <div class="middle" style="padding: 8px;">
            <div class="original-text"></div>
        </div>
        <div class="bottom" style="padding: 8px;">
            <div class="activity-links">
                <span class="activity-link"></span><span
                    class="activity-link"></span>
            </div>
            <div class="started-activity-container">
                <hr
                    style="color: #CCC; background-color: #CCC; height: 1px; border: none;">
                <div class="activity-root"></div>
            </div>
        </div>
        <div class="status-message" style="display: none;"></div>
    </div>



    <div class="goog-te-spinner-pos goog-te-spinner-pos-show">
        <div class="goog-te-spinner-animation goog-te-spinner-animation-show">
            <svg xmlns="http://www.w3.org/2000/svg" class="goog-te-spinner" width="96px" height="96px" viewBox="0 0 66 66">
                <circle class="goog-te-spinner-path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
            </svg>
        </div>
    </div>
</body>
<script type="text/javascript">
var aa=14;
var chess = document.getElementById("mycanvas");
var context = chess.getContext('2d');
// var context2 = chess.getContext('2d');
// context.strokeStyle = 'yellow';
var tree = [];//存放是否联通
var isling=[];//判断是否相连
for(var i=0;i<aa;i++){
    tree[i]=[];
    for(var j=0;j<aa;j++){
        tree[i][j]=-1;//初始值为0
    }
}
for(var i=0;i<aa*aa;i++){
    isling[i]=[];
    for(var j=0;j<aa*aa;j++){
        isling[i][j]=-1;//初始值为0
    }
}

function drawChessBoard(){//绘画
    for(var i=0;i<aa+1;i++){
        context.strokeStyle='gray';//可选区域
        context.moveTo(15+i*30,15);//垂直方向画15根线，相距30px;
        context.lineTo(15+i*30,15+30*aa);
        context.stroke();
        context.moveTo(15,15+i*30);//水平方向画15根线，相距30px;棋盘为14*14；
        context.lineTo(15+30*aa,15+i*30);
        context.stroke();
    }
}
drawChessBoard();//绘制棋盘

// var mymap=new Array(36);
// for(var i=0;i<36;i++)
// {mymap[i]=-1;}


function getnei(a)//获得邻居号  random
{
    var x=parseInt(a/aa);//要精确成整数
    var y=a%aa;
    var mynei=new Array();//储存邻居
    if(x-1>=0){mynei.push((x-1)*aa+y);}//上节点
    if(x+1<14){mynei.push((x+1)*aa+y);}//下节点
    if(y+1<14){mynei.push(x*aa+y+1);}//有节点
    if(y-1>=0){mynei.push(x*aa+y-1);}//下节点
    var ran=parseInt(Math.random() * mynei.length );
    return mynei[ran];

}
function search(a)//找到根节点
{
    if(tree[parseInt(a/aa)][a%aa]>0)//说明是子节点
    {
        return search(tree[parseInt(a/aa)][a%aa]);//不能压缩路径路径压缩
    }
    else
        return a;
}
function value(a)//找到树的大小
{
    if(tree[parseInt(a/aa)][a%aa]>0)//说明是子节点
    {
        return tree[parseInt(a/aa)][a%aa]=value(tree[parseInt(a/aa)][a%aa]);//不能路径压缩
    }
    else
        return -tree[parseInt(a/aa)][a%aa];
}
function union(a,b)//合并
{
    var a1=search(a);//a根
    var b1=search(b);//b根
    if(a1==b1){}
    else
    {
        if(tree[parseInt(a1/aa)][a1%aa]<tree[parseInt(b1/aa)][b1%aa])//这个是负数()，为了简单减少计算，不在调用value函数
        {
            tree[parseInt(a1/aa)][a1%aa]+=tree[parseInt(b1/aa)][b1%aa];//个数相加  注意是负数相加
            tree[parseInt(b1/aa)][b1%aa]=a1;       //b树成为a树的子树，b的根b1直接指向a；
        }
        else
        {
            tree[parseInt(b1/aa)][b1%aa]+=tree[parseInt(a1/aa)][a1%aa];
            tree[parseInt(a1/aa)][a1%aa]=b1;//a所在树成为b所在树的子树
        }
    }
}

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

    var x1=parseInt(a/aa);
    var y1=a%aa;
    var x2=parseInt(b/aa);
    var y2=b%aa;
    var x3=(x1+x2)/2;
    var y3=(y1+y2)/2;
    if(x1-x2==1||x1-x2==-1)//左右方向的点  需要上下划线
    {
        //alert(x1);
        //  context.beginPath();
        context.strokeStyle = 'white';
        //    context.moveTo(30+x3*30,y3*30+15);//
        //   context.lineTo(30+x3*30,y3*30+45);
        context.clearRect(29+x3*30, y3*30+16,2,28);
        //    context.stroke();
    }
    else
    {
        //   context.beginPath();
        context.strokeStyle = 'white';
        //  context.moveTo(x3*30+15,30+y3*30);//
        //    context.lineTo(45+x3*30,30+y3*30);
        context.clearRect(x3*30+16, 29+y3*30,28,2);
        //      context.stroke();
    }
}

while(search(0)!=search(aa*aa-1))//主要思路
{
    var num = parseInt(Math.random() * aa*aa );//产生一个小于196的随机数
    var neihbour=getnei(num);
    if(search(num)==search(neihbour)){continue;}
    else//不在一个上
    {
       isling[num][neihbour]=1;isling[neihbour][num]=1;
        drawline(num,neihbour);//划线
        union(num,neihbour);
    }
}
var a=aa*30-10,b=aa*30-10;
var x = 20, y =20;
 function load() {
        var canvas = document.getElementById("mycanvas");
        Context = canvas.getContext("2d");
        Context.fillStyle = "blue";
        Context.fillRect(x, y, 20, 20);
        context.fillStyle = "red";
        context.fillRect(a, b, 20, 20);
        Context.fillStyle = "blue";
        canvas.addEventListener('keydown', doKeyDown, true);
        canvas.focus();
        window.addEventListener('keydown', doKeyDown, true);
}
load();
function doKeyDown(e) {
//alert(x+" "+y);
// console.log(x+" "+y);测试
    var keyID = e.keyCode ? e.keyCode : e.which;//获取按键的Unicode代码值
    if(i==1){
        if (keyID === 38 || keyID === 87) { // W键以及上键的移动方向
        if(y-30<0){

        } else if(isling[(x-20)/30*aa+(y-20)/30][((x-20)/30)*aa+(y-20)/30-1]!=1) {

        } else {
            clearCanvas();
            y = y - 30;
            Context.fillRect(x, y, 20, 20);
            e.preventDefault();
            gameover();
            show();
            }
        }
        if (keyID === 39 || keyID === 68) { // D键以及you键的移动方向
         if(x+30>15+30*aa){}
        else if(isling[(x-20)/30*aa+(y-20)/30][((x-20)/30)*aa+(y-20)/30+aa]!=1) {}
        else{
            clearCanvas();
            x=x+30;
            Context.fillRect(x, y, 20, 20);
            e.preventDefault();
             gameover();
            show();
           }
        }
        if (keyID === 40 || keyID === 83) { // S键以及下键的移动方向
        if(y+30>15+30*aa){}   
        else if(isling[(x-20)/30*aa+(y-20)/30][((x-20)/30)*aa+(y-20)/30+1]!=1) {}  
        else{
            clearCanvas();
            y = y + 30;
            Context.fillRect(x, y, 20, 20);
            e.preventDefault();
             gameover();
            show();
            }
        }
        if (keyID === 37 || keyID === 65) { // A键以及zuo向
        if(x-30<0){}
        else if(isling[(x-20)/30*aa+(y-20)/30][((x-20)/30)*aa+(y-20)/30-aa]!=1) {}  
        else{
            clearCanvas();
            x = x - 30;
            Context.fillRect(x, y, 20, 20);
            e.preventDefault();
             gameover();
            show();
        }}
    }
}
function clearCanvas() {//清除之间的痕迹
    Context.clearRect(x-2, y-2, 25, 25)
}
var end=false;
function gameover()
{
    if(x>=a&&y>=b)
    {
        end=true;
    }
}
function show() {
    if(end==true) {
        // stop();
        aa=aa+2;
        if(aa==20){
            rangeinsert(); stop();
        } else{
            end=false;
            Context.clearRect(0, 0, 600, 600);
            for(var i=0;i<aa;i++){
                  tree[i]=[];
                for(var j=0;j<aa;j++){
                    tree[i][j]=-1;//初始值为0
                }
            }
            for(var i=0;i<aa*aa;i++){
                isling[i]=[];
                for(var j=0;j<aa*aa;j++){
                    isling[i][j]=-1;//初始值为0
                }
             }
             drawChessBoard();//绘制棋盘
             while(search(0)!=search(aa*aa-1))//主要思路
            {
                var num = parseInt(Math.random() * aa*aa );//产生一个小于196的随机数
                    var neihbour=getnei(num);
                if(search(num)==search(neihbour)){continue;}
                else//不在一个上
                {
                   isling[num][neihbour]=1;isling[neihbour][num]=1;
                    drawline(num,neihbour);//划线
                    union(num,neihbour);
                }
               }
            a=aa*30-10,b=aa*30-10;
             x = 20, y =20;
            load();
        // start();
        }
    // alert("游戏成功！共用时："+str);
    }
}
var h=m=s=ms= 0;  //定义时，分，秒，毫秒并初始化为0；
var time=0;
var i=0;
function timer(){   //定义计时函数
    ms=ms+50;         //毫秒
    if(ms>=1000){
        ms=0;
        s=s+1;         //秒
    }
    if(s>=60){
        s=0;
        m=m+1;        //分钟
    }
    if(m>=60){
        m=0;
        h=h+1;        //小时
    }
    str =toDub(h)+"时"+toDub(m)+"分"+toDub(s)+"秒"+toDubms(ms)+"毫秒";
    mytime = document.getElementById('mytime');
    mytime.innerHTML = str;
    // document.getElementById('mytime').innerHTML=h+"时"+m+"分"+s+"秒"+ms+"毫秒";
}

function reset(){  //重置
    i=1;
    time=setInterval(timer,50);
}

function start(){  //开始
    if(1==i){
        return;
    }
    i=1;
    time=setInterval(timer,50);
}

function stop(){  //暂停
    i=0;
    clearInterval(time);
}

function toDub(n){  //补0操作
    if(n<10){
        return "0"+n;
    }
    else {
        return ""+n;
    }
}

function toDubms(n){  //给毫秒补0操作
    if(n<10){
        return "00"+n;
    }
    else {
        return "0"+n;
    }

}
function renovates(){
    document.location.reload();
}

var req;//创建对象

function range()
{

   var url = "";//ajax
   //创建一个XMLHttpRequest对象req
    if(window.XMLHttpRequest) {
       //IE7, Firefox, Opera支持
       req = new XMLHttpRequest();
     }else if(window.ActiveXObject) {
       //IE5,IE6支持
       req = new ActiveXObject("Microsoft.XMLHTTP");
     }
    req.open("GET", url, true);
   //onreadystatechange属性存有处理服务器响应的函数,有5个取值分别代表不同状态
   req.onreadystatechange = callback;
   //send函数发送请求
   req.send(null);
}
function rangeinsert()
{
   var url = "insertrange?id=" +(m*60+ s);
   //创建一个XMLHttpRequest对象req
    if(window.XMLHttpRequest) {
       //IE7, Firefox, Opera支持
       req = new XMLHttpRequest();
     }else if(window.ActiveXObject) {
       //IE5,IE6支持
       req = new ActiveXObject("Microsoft.XMLHTTP");
     }
    req.open("GET", url, true);
   //onreadystatechange属性存有处理服务器响应的函数,有5个取值分别代表不同状态
   req.onreadystatechange = callback;
   //send函数发送请求
   req.send(null);
}
function callback() {
    if(req.readyState == 4 && req.status == 200) {
        var check = req.responseText;
       alert(check);
    }
}
</script>
</html>
posted @ 2019-11-20 16:55  踏步  阅读(930)  评论(0)  编辑  收藏  举报