Skip to content

Commit fb16a90

Browse files
czy-29czy-29
committed
snake_14_html4: 上传14年用原生HTML4+JavaScript开发的贪吃蛇小游戏
1 parent cad82dd commit fb16a90

File tree

4 files changed

+351
-0
lines changed

4 files changed

+351
-0
lines changed

‎sanke_14_html4/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# snake_14_html4
2+
该目录下为29大约在2014年（似乎是）高考结束的暑假使用原生HTML4+JavaScript（没有使用任何前端库以及HTML5标签）开发的贪吃蛇小游戏，直接双击用浏览器打开index.html即可玩耍。
3+
4+
目前仅可在桌面端浏览器中游戏，暂不支持移动端。
5+
6+
有在线版本，不需要把仓库下到本地就可以玩耍：http://29studio.cn/snake/

‎sanke_14_html4/help.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5+
<title> 帮助 </title>
6+
</head>
7+
8+
<body>
9+
10+
<p><font color = "red"> 操作说明：点击“New Game”开始游戏，按“↑”“↓”“←”“→”键让蛇移动，<br/>
11+
点击“Pause/Resume”或按空格键可以暂停或继续游戏，点击“Stop”可以结束当前游戏局。</font></p>
12+
<p><font color = "red"> 小贴士：按住某方向键不动可以让蛇加速~~蛇移动到墙边上可以从对面的墙穿出来。</font></p>
13+
<br/>
14+
15+
</body>
16+
</html>

‎sanke_14_html4/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5+
<script language = "JavaScript" type = "text/javascript" src = "snake.js"></script>
6+
<title> Jerry Chan 29 </title>
7+
</head>
8+
9+
<body OnLoad = "PrintBlank()" OnKeyDown = "ChnDir()" OnKeyUp = "SlowDown()" OnKeyPress = "SpacePress()">
10+
11+
<h2> 29的首页正在开发中，先玩一下29开发的JS版贪吃蛇放松一下吧~ </h2>
12+
<h2> 29's homepage is under develop, you can play the JavaScript </h2>
13+
<h2> version of the "snake" game that 29 developed and have a rest! :) </h2>
14+
15+
<div id = "Main" style = "border-style:solid;padding:0;width:640px;height:480px;">
16+
<h1 align = "center"> Initializing, please wait... </h1>
17+
</div>
18+
19+
<input type = "button" name = "New" value = "New Game" OnClick = "NewGame()">
20+
<input type = "button" name = "Pause" value = "Pause/Resume" OnClick = "GamePause()">
21+
<input type = "button" name = "Stop" value = "Stop" OnClick = "StopGame()">
22+
<br/>
23+
<a href = "help.html" target = "_blank"> 帮助 (help) </a>
24+
<br/>
25+
26+
</body>
27+
</html>

‎sanke_14_html4/snake.js‎

Lines changed: 302 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,302 @@
1+
//snake.js
2+
3+
function CreatePoint (x,y)
4+
{
5+
var pt = new Object;
6+
pt.x = x;
7+
pt.y = y;
8+
return pt;
9+
}
10+
11+
var snake = new Array();
12+
var input = new Array(0);
13+
var map = new Array (20);
14+
var food = CreatePoint (0,0);
15+
var cur_dir;
16+
var bFast = false,bPause = false,bStart = false;
17+
var iTimer,nTimerCount = 0;
18+
var score;
19+
var i,j;
20+
21+
for (i = 0;i < 20;i ++) map[i] = new Array (15);
22+
23+
function CreateTimer (delay)
24+
{
25+
iTimer = window.setInterval ("GameLoop()",delay);
26+
nTimerCount ++;
27+
}
28+
29+
function KillTimer ()
30+
{
31+
window.clearInterval (iTimer);
32+
nTimerCount --;
33+
}
34+
35+
function NewGame ()
36+
{
37+
if (bStart && !bPause) KillTimer();
38+
39+
snake.length = 3;
40+
snake[0] = CreatePoint (10,10);
41+
snake[1] = CreatePoint (11,10);
42+
snake[2] = CreatePoint (12,10);
43+
44+
input = new Array (0);
45+
46+
for (i = 0;i < 20;i ++)
47+
for (j = 0;j < 15;j ++)
48+
map[i][j] = 0;
49+
50+
cur_dir = 37;
51+
score = 0;
52+
bFast = false;
53+
bPause = false;
54+
RandFood();
55+
bStart = true;
56+
57+
CreateTimer(500);
58+
PrintGame();
59+
}
60+
61+
function RandFood ()
62+
{
63+
var pt = CreatePoint(0,0);
64+
65+
do
66+
{
67+
pt.x = Math.floor (Math.random() * 20);
68+
pt.y = Math.floor (Math.random() * 15);
69+
}
70+
while (CheckCover (pt,0))
71+
72+
food = pt;
73+
}
74+
75+
function CheckCover (pt,num)
76+
{
77+
for (i = num;i < snake.length;i ++)
78+
{
79+
if (pt.x == snake[i].x && pt.y == snake[i].y)
80+
return true;
81+
}
82+
83+
return false;
84+
}
85+
86+
function GamePause ()
87+
{
88+
if (bStart)
89+
{
90+
if (bPause)
91+
{
92+
CreateTimer (500);
93+
bPause = false;
94+
}
95+
else
96+
{
97+
KillTimer();
98+
bPause = true;
99+
}
100+
}
101+
}
102+
103+
function StopGame ()
104+
{
105+
if (!bPause && bStart) KillTimer ();
106+
PrintBlank();
107+
bStart = false;
108+
}
109+
110+
111+
function SpacePress ()
112+
{
113+
if (window.event.keyCode == 32) GamePause ();
114+
}
115+
116+
function PushKey (num1,num2)
117+
{
118+
if (input.length == 0 && (cur_dir == num1 || cur_dir == num2))
119+
input.push (window.event.keyCode);
120+
else if (input.length > 0)
121+
{
122+
if (input[input.length - 1] == num1 || input[input.length - 1] == num2)
123+
input.push (window.event.keyCode);
124+
}
125+
}
126+
127+
function ChnDir ()
128+
{
129+
if (bStart && !bPause)
130+
{
131+
if (window.event.keyCode == cur_dir && input.length == 0 && !bFast)
132+
{
133+
KillTimer();
134+
CreateTimer (50);
135+
bFast = true;
136+
}
137+
else
138+
{
139+
if (bFast && (window.event.keyCode != cur_dir || input.length > 0))
140+
{
141+
KillTimer();
142+
CreateTimer (500);
143+
bFast = false;
144+
}
145+
146+
switch (window.event.keyCode)
147+
{
148+
case 37:
149+
PushKey (38,40);
150+
break;
151+
152+
case 38:
153+
PushKey (37,39);
154+
break;
155+
156+
case 39:
157+
PushKey (38,40);
158+
break;
159+
160+
case 40:
161+
PushKey (37,39);
162+
break;
163+
}
164+
}
165+
}
166+
}
167+
168+
function SlowDown ()
169+
{
170+
if (bStart && bFast && window.event.keyCode >= 37 && window.event.keyCode <= 40)
171+
{
172+
KillTimer ();
173+
CreateTimer (500);
174+
bFast = false;
175+
}
176+
}
177+
178+
function SnakeMove (x,y)
179+
{
180+
var pt = CreatePoint (0,0);
181+
182+
pt.x = snake[0].x + x;
183+
pt.y = snake[0].y + y;
184+
185+
if (pt.x < 0) pt.x = 19;
186+
else if (pt.y < 0) pt.y = 14;
187+
else if (pt.x >= 20) pt.x = 0;
188+
else if (pt.y >= 15) pt.y = 0;
189+
190+
snake.unshift (pt);
191+
}
192+
193+
function GameLoop ()
194+
{
195+
if (input.length > 0) cur_dir = input.shift();
196+
197+
switch (cur_dir)
198+
{
199+
case 37:
200+
SnakeMove (-1,0);
201+
break;
202+
203+
case 38:
204+
SnakeMove (0,-1);
205+
break;
206+
207+
case 39:
208+
SnakeMove (1,0);
209+
break;
210+
211+
case 40:
212+
SnakeMove (0,1);
213+
break;
214+
}
215+
216+
if (snake[0].x == food.x && snake[0].y == food.y)
217+
{
218+
RandFood();
219+
score++;
220+
}
221+
else snake.pop();
222+
223+
if (CheckCover (snake[0],3))
224+
{
225+
KillTimer();
226+
window.alert ("Game End! \nYour score: " + score);
227+
PrintBlank();
228+
bStart = false;
229+
}
230+
else PrintGame();
231+
}
232+
233+
function PrintBlank ()
234+
{
235+
var id = document.getElementById ("Main");
236+
var str = "";
237+
238+
str += "\n<table border = \"0\" cellspacing = \"0\" cellpadding = \"0\">\n";
239+
240+
for (j = 0;j < 15;j ++)
241+
{
242+
str += "<tr>\n";
243+
for (i = 0;i < 20;i ++) str += "<td width = \"32\" height = \"32\"> &nbsp </td>\n";
244+
str += "</tr>\n";
245+
}
246+
247+
str += "</table>\n";
248+
249+
id.innerHTML = str;
250+
}
251+
252+
function PrintGame ()
253+
{
254+
var id = document.getElementById ("Main");
255+
var str = "";
256+
257+
for (i = 0;i < 20;i ++)
258+
for (j = 0;j < 15;j ++)
259+
map[i][j] = 0;
260+
261+
map[snake[0].x][snake[0].y] = 1;
262+
263+
for (i = 1;i < snake.length;i ++)
264+
map[snake[i].x][snake[i].y] = 2;
265+
266+
map[food.x][food.y] = 3;
267+
268+
str += "\n<table border = \"0\" cellspacing = \"0\" cellpadding = \"0\">\n";
269+
270+
for (j = 0;j < 15;j ++)
271+
{
272+
str += "<tr>\n";
273+
274+
for (i = 0;i < 20;i ++)
275+
{
276+
str += "<td width = \"32\" height = \"32\" ";
277+
278+
switch (map[i][j])
279+
{
280+
case 1:
281+
str += "bgcolor = \"red\"";
282+
break;
283+
284+
case 2:
285+
str += "bgcolor = \"green\"";
286+
break;
287+
288+
case 3:
289+
str += "bgcolor = \"blue\"";
290+
break;
291+
}
292+
293+
str += "> &nbsp </td>\n";
294+
}
295+
296+
str += "</tr>\n";
297+
}
298+
299+
str += "</table>\n";
300+
301+
id.innerHTML = str;
302+
}

0 commit comments

Comments
 (0)