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 }
结合以上，就可以实现一个最基本的贪吃蛇游戏
3107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
