HTML --盜版網頁遊戲

時間  2019-11-19
標籤 html 盜版 網頁 遊戲 欄目 HTML 简体版
原文   原文鏈接 

<html lang="en">
<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-image: url("image/54a1137bbeaa9.jpg");
             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>
</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">
       <a href="https://blog.csdn.net/qq_40693171">CSDN</a>
        <a href="https://juejin.im/user/5c944a8bf265da6102098c31">掘金</a>
        <a href="https://github.com/javasmall">github</a>
         <a href="https://github.com/javasmall">公衆號</a>
         
</div>
<div class="navbar-content-2">
   <a >李萌
</a>
</div>
</nav>

<div class="container">
    <h1>迷宮小遊戲</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"></span>
                    <button  onclick="start()" >開始遊戲</button>
                    <button onclick="stop()">暫停</button>
                    <button onclick="range()">排行榜</button>
                    <button onclick="renovates()">從新開始</button>
                   
                </div>
                	<img src="http://a1.qpic.cn/psb?/V12cyo1G4WgYdn/qZkzTCiVPSwATOPqcE7PkvMnWk5KHlo*rS6n7qAXmCo!/b/dBABAAAAAAAA&ek=1&kp=1&pt=0&bo=OAQ4BDgEOAQRECc!&tl=1&vuin=2039338619&tm=1570809600&sce=50-1-1&rf=4-0" width="100%" height="35%">
            </div>
        </div>
<footer class="copyright">
                Copyright 2019  All rights reserved.
            <div class="col-xs-12">本站總訪問量：520</div>                											
			<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1315426911&site=qq&menu=yes">聯繫咱們   </a>
			<div><a href=http://www.miitbeian.gov.cn></a>文強LOVE李萌</div>
            </footer>
    </div>
</div>

<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(){  //開始
        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>


</body>
</html>

　　

file:///C:/Users/wqq/Desktop/%E5%B0%8F%E6%B8%B8%E6%88%8F.htmljavascript

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程