使用js+jq實現貪吃蛇網頁遊戲
html上的基本框架javascript
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的美化效果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的代碼部分html
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.onload=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.onkeydown=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 }
結合以上，就能夠實現一個最基本的貪吃蛇遊戲java
相關文章
- 1. 貪吃蛇遊戲
- 2. 《Java小遊戲實現》：貪吃蛇
- 3. javafx實現貪吃蛇遊戲
- 4. WebGL實現HTML5貪吃蛇3D遊戲
- 5. JS實現貪吃蛇小遊戲
- 6. C++ 實現貪吃蛇遊戲
- 7. c#實現貪吃蛇遊戲案例
- 8. 實現貪吃蛇小遊戲
- 9. Java實現貪吃蛇遊戲【代碼】
- 10. python實現小遊戲-貪吃蛇
- 更多相關文章...
- • Web 網頁 驗證 - 網站建設指南
- • 使用Redis和Lua的原子性實現搶紅包功能 - 紅包項目實戰
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 「插件」Runner更新Pro版，幫助設計師遠離996
- 2. 錯誤 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 報告速覽，Kubernetes使用率躍升235%！
- 4. TVI-Android技術篇之註解Annotation
- 5. android studio啓動項目
- 6. Android的ADIL
- 7. Android卡頓的檢測及優化方法彙總（線下+線上）
- 8. 登錄註冊的業務邏輯流程梳理
- 9. NDK(1)創建自己的C/C++文件
- 10. 小菜的系統框架界面設計-你的評估是我的決策
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 貪吃蛇遊戲
- 2. 《Java小遊戲實現》：貪吃蛇
- 3. javafx實現貪吃蛇遊戲
- 4. WebGL實現HTML5貪吃蛇3D遊戲
- 5. JS實現貪吃蛇小遊戲
- 6. C++ 實現貪吃蛇遊戲
- 7. c#實現貪吃蛇遊戲案例
- 8. 實現貪吃蛇小遊戲
- 9. Java實現貪吃蛇遊戲【代碼】
- 10. python實現小遊戲-貪吃蛇