使用js+jq实现贪吃蛇网页游戏

矫情吗；* 2021-12-09 03:59 208阅读 0赞

html上的基本框架

1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title>贪吃蛇游戏</title>
     6         <link rel="stylesheet" href="css/tanchishe.css" />
     7         <script src="js/jquery-3.4.1.js"></script>
     8         <script type="text/javascript" src="js/tanchishe.js"></script>
     9     </head>
    10     <body>
    11         <span id="gameover">Game Over</span>
    12          <div id="point">
    13              得分：<span id="span">0</span>
    14          </div>
    15         <div id="start" onclick="startgame()">
    16             <h1>开始游戏</h1>
    17         </div>
    18     </body>
    19 </html>

以及部分css的美化效果

1 *{
     2 margin: 0px;
     3 padding: 0px;
     4             }
     5 html{
     6 width: 100%;
     7 height: 100%;
     8             }
     9 body{
    10 width: 100%;
    11 height: 100%;
    12             }
    13 .snake{
    14 width: 18px;
    15 height: 18px;
    16 background: whitesmoke;
    17 border: 1px solid black;
    18 position: absolute;
    19             }
    20 .fruit{
    21 width: 20px;
    22 height: 20px;
    23 background: salmon;
    24 position: absolute;
    25 border-radius: 50%;
    26             }
    27 #start{
    28 position: absolute;
    29 margin: auto;
    30 width: 200px;
    31 height: 50px;
    32 top: 0px;
    33 bottom: 0px;
    34 right: 0px;
    35 left: 0px;
    36 background: greenyellow;
    37 color: black;
    38 text-align: center;
    39             }
    40 #point{
    41 position: absolute;
    42 margin: auto;
    43 width: 150px;
    44 height: 50px;
    45 top: 0px;
    46 left: 0px;
    47 right: 0px;
    48 background: skyblue;
    49 text-align: center;
    50 line-height: 50px;
    51 font-size: 20px;
    52 font-weight: 600;
    53 color: black;
    54 border-radius: 50%;
    55             }
    56 #span{
    57 color: black;
    58             }
    59 #gameover{
    60 width: 80%;
    61 height: 30%;
    62 position: absolute;
    63 margin: auto;
    64 top: 0px;
    65 left: 0px;
    66 right: 0px;
    67 bottom: 0px;
    68 text-align: center;
    69 font-size: 100px;
    70 color: darkred;
    71 font-weight: 600;
    72 opacity: 0;
    73             }

最后就是最重要的js以及jq的代码部分

1 $(document).ready(function(){ 2                 $("#start").mouseover(function(){ 3                     $(this).css({"cursor":"pointer","color":"red"}) 4 }) 5                 $("#start").mouseout(function(){ 6                     $(this).css("color","black") 7 }) 8 }) 9             
     10             var h; 11             var w; 12             window.οnlοad=function getbrowser(){ 13                 h = document.body.clientHeight; 14                 w = document.body.clientWidth; 15 }; 16             
     17             var snake=new Array(); 18             var snakebody=5; 19             function creatsnake(){ 20                 for(var i=snakebody;i>=0;i--){ 21                     snake[i]=document.createElement("div"); 22                     snake[i].className="snake"; 23                     snake[i].style.left=20*i+"px"; 24                     snake[i].style.top="0px"; 25 document.body.appendChild(snake[i]); 26 } 27                 snake[snakebody].style.background="black"; 28 } 29             
     30             var fruit; 31             function creatfruit(){ 32                 fruit=document.createElement("div"); 33                 fruit.className="fruit"; 34                 var    randX=(Math.ceil((Math.random()*(w-20))/20)-1)*20;
     35                 var    randY=(Math.ceil((Math.random()*(h-20))/20)-1)*20;
     36                 fruit.style.left=randX+"px"; 37                 fruit.style.top=randY+"px"; 38 document.body.appendChild(fruit); 39 } 40             
     41             $(document).ready(function(){ 42 creatsnake(); 43 creatfruit(); 44 }) 45             
     46             var snakeX=[],snakeY=[],time=300,speed=6,move="right",lastbody,start,point=0,p,addop=0.1; 47             
     48             function startgame(){ 49                 $("#start").css("display","none"); 50                 start=setInterval(fn,time); 51 } 52             
     53             function fn(){ 54                         speed=snakebody; 55                         time=800/speed;
     56                         document.οnkeydοwn=function(event){ 57                                 var e = event || window.event || arguments.callee.caller.arguments[0]; 58                                 if(e && e.keyCode==87){ // 按 W
     59                                     if(move!="bottom"){ 60                                       move="top"; 61 } 62                                 }else if(e && e.keyCode==65){ // 按 A
     63                                     if(move!="right"){ 64                                       move="left"; 65 } 66                                 }else if(e && e.keyCode==83){ // 按 S 
     67                                     if(move!="top"){ 68                                        move="bottom"; 69 } 70                                 }else if(e && e.keyCode==68){ // 按 D
     71                                     if(move!="left"){ 72                                         move="right"; 73 } 74 } 75 }; 76                         
     77                            for (var i=snakebody-1;i>=0;i--) { 78                                
     79                             if(i==snakebody-1){ 80                                 //获得蛇头方块的坐标
     81                                    snakeX[snakebody]=snake[snakebody].style.left; 82                                 snakeY[snakebody]=snake[snakebody].style.top; 83                                 //判断方向
     84                                 if(move=="left") { 85                                     snake[snakebody].style.left=snake[snakebody].offsetLeft-(speed-snakebody+1)*20+"px"; 86                                 }else if(move=="right"){ 87                                     snake[snakebody].style.left=snake[snakebody].offsetLeft+(speed-snakebody+1)*20+"px"; 88                                 }else if(move=="top"){ 89                                     snake[snakebody].style.top=snake[snakebody].offsetTop-(speed-snakebody+1)*20+"px"; 90                                 }else if(move=="bottom"){ 91                                     snake[snakebody].style.top=snake[snakebody].offsetTop+(speed-snakebody+1)*20+"px"; 92 } 93 } 94                             
     95                                //移动到前一块方块的坐标
     96                             if (snake[i].style.left<snakeX[i+1]){ 97                                 snakeX[i]=snake[i].style.left; 98                                 snakeY[i]=snake[i].style.top; 99                                 snake[i].style.left=snakeX[i+1]; 100                                 snake[i].style.top=snakeY[i+1]; 101                             }else if (snake[i].style.left>snakeX[i+1]) { 102                                 snakeX[i]=snake[i].style.left; 103                                 snakeY[i]=snake[i].style.top; 104                                 snake[i].style.left=snakeX[i+1]; 105                                 snake[i].style.top=snakeY[i+1]; 106                             }else if(snake[i].style.top<snakeY[i+1]){ 107                                 snakeX[i]=snake[i].style.left; 108                                 snakeY[i]=snake[i].style.top; 109                                 snake[i].style.left=snakeX[i+1]; 110                                 snake[i].style.top=snakeY[i+1]; 111                             }else if(snake[i].style.top>snakeY[i+1]){ 112                                 snakeX[i]=snake[i].style.left; 113                                 snakeY[i]=snake[i].style.top; 114                                 snake[i].style.left=snakeX[i+1]; 115                                 snake[i].style.top=snakeY[i+1]; 116 } 117 } 118                             //失败逻辑判断
    119                                if((snakeX[snakebody].replace("px","")>w)||(snakeX[snakebody].replace("px","")<0)||(snakeY[snakebody].replace("px","")>h)||(snakeY[snakebody].replace("px","")<0)) 120 { 121 gameover(); 122 clearInterval(start); 123 }; 124                                if(snakeX[snakebody]==fruit.style.left&&snakeY[snakebody]==fruit.style.top) 125 { 126 document.body.removeChild(fruit); 127 creatfruit(); 128 getpoint(); 129 addsnakebody(); 130 }; 131                                for (var i=snakebody-1;i>=0;i--) { 132                                    if(snake[snakebody].style.left==snake[i].style.left&&snake[snakebody].style.top==snake[i].style.top){ 133 gameover(); 134 clearInterval(start); 135 } 136 } 137 } 138             
    139             function getpoint(){ 140                 if(snakebody<10){ 141                     point+=1; 142                 }else if(snakebody<20){ 143                     point+=3; 144                 }else if(snakebody<35){ 145                     point+=5; 146                 }else if(snakebody<50){ 147                     point+=10; 148                 }else{ 149                     point+=20; 150 } 151                 var span=document.getElementById("span"); 152                 span.innerHTML=point; 153 } 154             
    155             function addsnakebody(){ 156                 lastbody=document.createElement("div"); 157                 snakebody++; 158                 lastbody.className="snake"; 159                 lastbody.style.left=snakeX[0]; 160                 lastbody.style.top=snakeY[0]; 161 document.body.appendChild(lastbody); 162 snake.unshift(lastbody); 163 clearInterval(start); 164                 start=setInterval(fn,time); 165 } 166             
    167             function gameover(){ 168                 var opac=setInterval(function(){ 169                     addop+=0.05; 170                     document.getElementById("gameover").style.opacity=addop; 171                     if(document.getElementById("gameover").style.opacity==1){ 172 clearInterval(opac); 173 } 174                 },120); 175             }

结合以上，就可以实现一个最基本的贪吃蛇游戏

转载于:https://www.cnblogs.com/YLTzxzy/p/11094123.html