snake_14_html4: 上传14年用原生HTML4+JavaScript开发的贪吃蛇小游戏

czy-29 · Jan 30, 2021 · fb16a90 · fb16a90
1 parent cad82dd
commit fb16a90
Show file tree

Hide file tree

Showing 4 changed files with 351 additions and 0 deletions.
diff --git a/sanke_14_html4/README.md b/sanke_14_html4/README.md
@@ -0,0 +1,6 @@
+# snake_14_html4
+该目录下为29大约在2014年（似乎是）高考结束的暑假使用原生HTML4+JavaScript（没有使用任何前端库以及HTML5标签）开发的贪吃蛇小游戏，直接双击用浏览器打开index.html即可玩耍。
+
+目前仅可在桌面端浏览器中游戏，暂不支持移动端。
+
+有在线版本，不需要把仓库下到本地就可以玩耍：http://29studio.cn/snake/
diff --git a/sanke_14_html4/help.html b/sanke_14_html4/help.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title> 帮助 </title>
+</head>
+
+<body>
+
+<p><font color = "red"> 操作说明：点击“New Game”开始游戏，按“↑”“↓”“←”“→”键让蛇移动，<br/>
+点击“Pause/Resume”或按空格键可以暂停或继续游戏，点击“Stop”可以结束当前游戏局。</font></p>
+<p><font color = "red"> 小贴士：按住某方向键不动可以让蛇加速~~蛇移动到墙边上可以从对面的墙穿出来。</font></p>
+<br/>
+
+</body>
+</html>
diff --git a/sanke_14_html4/index.html b/sanke_14_html4/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<script language = "JavaScript" type = "text/javascript" src = "snake.js"></script>
+<title> Jerry Chan 29 </title>
+</head>
+
+<body OnLoad = "PrintBlank()" OnKeyDown = "ChnDir()" OnKeyUp = "SlowDown()" OnKeyPress = "SpacePress()">
+
+<h2> 29的首页正在开发中，先玩一下29开发的JS版贪吃蛇放松一下吧~ </h2>
+<h2> 29's homepage is under develop, you can play the JavaScript </h2>
+<h2> version of the "snake" game that 29 developed and have a rest! :) </h2>
+
+<div id = "Main" style = "border-style:solid;padding:0;width:640px;height:480px;">
+<h1 align = "center"> Initializing, please wait... </h1>
+</div>
+
+<input type = "button" name = "New"   value = "New Game"    OnClick = "NewGame()">
+<input type = "button" name = "Pause" value = "Pause/Resume" OnClick = "GamePause()">
+<input type = "button" name = "Stop"  value = "Stop"  OnClick = "StopGame()">
+<br/>
+<a href = "help.html" target = "_blank"> 帮助 (help) </a>
+<br/>
+
+</body>
+</html>
diff --git a/sanke_14_html4/snake.js b/sanke_14_html4/snake.js
@@ -0,0 +1,302 @@
+//snake.js
+
+function CreatePoint (x,y)
+{
+var pt = new Object;
+pt.x = x;
+pt.y = y;
+return pt;
+}
+
+var snake = new Array();
+var input = new Array(0);
+var map   = new Array (20);
+var food  = CreatePoint (0,0);
+var cur_dir;
+var bFast = false,bPause = false,bStart = false;
+var iTimer,nTimerCount = 0;
+var score;
+var i,j;
+
+for (i = 0;i < 20;i ++) map[i] = new Array (15);
+
+function CreateTimer (delay)
+{
+iTimer = window.setInterval ("GameLoop()",delay);
+nTimerCount ++;
+}
+
+function KillTimer ()
+{
+window.clearInterval (iTimer);
+nTimerCount --;
+}
+
+function NewGame ()
+{
+if (bStart && !bPause) KillTimer();
+
+snake.length = 3;
+snake[0] = CreatePoint (10,10);
+snake[1] = CreatePoint (11,10);
+snake[2] = CreatePoint (12,10);
+
+input = new Array (0);
+
+for (i = 0;i < 20;i ++)
+for (j = 0;j < 15;j ++)
+map[i][j] = 0;
+
+cur_dir = 37;
+score = 0;
+bFast = false;
+bPause = false;
+RandFood();
+bStart = true;
+
+CreateTimer(500);
+PrintGame();
+}
+
+function RandFood ()
+{
+var pt = CreatePoint(0,0);
+
+do
+{
+pt.x = Math.floor (Math.random() * 20);
+pt.y = Math.floor (Math.random() * 15);
+}
+while (CheckCover (pt,0))
+
+food = pt;
+}
+
+function CheckCover (pt,num)
+{
+for (i = num;i < snake.length;i ++)
+{
+if (pt.x == snake[i].x && pt.y == snake[i].y)
+return true;
+}
+
+return false;
+}
+
+function GamePause ()
+{
+if (bStart)
+{
+if (bPause)
+{
+CreateTimer (500);
+bPause = false;
+}
+else
+{
+KillTimer();
+bPause = true;
+}
+}
+}
+
+function StopGame ()
+{
+if (!bPause && bStart) KillTimer ();
+PrintBlank();
+bStart = false;
+}
+
+
+function SpacePress ()
+{
+if (window.event.keyCode == 32) GamePause ();
+}
+
+function PushKey (num1,num2)
+{
+if (input.length == 0 && (cur_dir == num1 || cur_dir == num2))
+input.push (window.event.keyCode);
+else if (input.length > 0)
+{
+if (input[input.length - 1] == num1 || input[input.length - 1] == num2)
+input.push (window.event.keyCode);
+}
+}
+
+function ChnDir ()
+{
+if (bStart && !bPause)
+{
+if (window.event.keyCode == cur_dir && input.length == 0 && !bFast)
+{
+KillTimer();
+CreateTimer (50);
+bFast  = true;
+}
+else
+{
+if (bFast && (window.event.keyCode != cur_dir || input.length > 0))
+{
+KillTimer();
+CreateTimer (500);
+bFast = false;
+}
+
+switch (window.event.keyCode)
+{
+case 37:
+PushKey (38,40);
+break;
+
+case 38:
+PushKey (37,39);
+break;
+
+case 39:
+PushKey (38,40);
+break;
+
+case 40:
+PushKey (37,39);
+break;
+}
+}
+}
+}
+
+function SlowDown ()
+{
+if (bStart && bFast && window.event.keyCode >= 37 && window.event.keyCode <= 40)
+{
+KillTimer ();
+CreateTimer (500);
+bFast = false;
+}
+}
+
+function SnakeMove (x,y)
+{
+var pt = CreatePoint (0,0);
+
+pt.x = snake[0].x + x;
+pt.y = snake[0].y + y;
+
+if (pt.x < 0) pt.x = 19;
+else if (pt.y <  0)  pt.y = 14;
+else if (pt.x >= 20) pt.x = 0;
+else if (pt.y >= 15) pt.y = 0;
+
+snake.unshift (pt);
+}
+
+function GameLoop ()
+{
+if (input.length > 0) cur_dir = input.shift();
+
+switch (cur_dir)
+{
+case 37:
+SnakeMove (-1,0);
+break;
+
+case 38:
+SnakeMove (0,-1);
+break;
+
+case 39:
+SnakeMove (1,0);
+break;
+
+case 40:
+SnakeMove (0,1);
+break;
+}
+
+if (snake[0].x == food.x && snake[0].y == food.y)
+{
+RandFood();
+score++;
+}
+else snake.pop();
+
+if (CheckCover (snake[0],3))
+{
+KillTimer();
+window.alert ("Game End! \nYour score: " + score);
+PrintBlank();
+bStart = false;
+}
+else PrintGame();
+}
+
+function PrintBlank ()
+{
+var id = document.getElementById ("Main");
+var str = "";
+
+str += "\n<table border = \"0\" cellspacing = \"0\" cellpadding = \"0\">\n";
+
+for (j = 0;j < 15;j ++)
+{
+str += "<tr>\n";
+for (i = 0;i < 20;i ++) str += "<td width = \"32\" height = \"32\"> &nbsp </td>\n";
+str += "</tr>\n";
+}
+
+str += "</table>\n";
+
+id.innerHTML = str;
+}
+
+function PrintGame ()
+{
+var id = document.getElementById ("Main");
+var str = "";
+
+for (i = 0;i < 20;i ++)
+for (j = 0;j < 15;j ++)
+map[i][j] = 0;
+
+map[snake[0].x][snake[0].y] = 1;
+
+for (i = 1;i < snake.length;i ++)
+map[snake[i].x][snake[i].y] = 2;
+
+map[food.x][food.y] = 3;
+
+str += "\n<table border = \"0\" cellspacing = \"0\" cellpadding = \"0\">\n";
+
+for (j = 0;j < 15;j ++)
+{
+str += "<tr>\n";
+
+for (i = 0;i < 20;i ++)
+{
+str += "<td width = \"32\" height = \"32\" ";
+
+switch (map[i][j])
+{
+case 1:
+str += "bgcolor = \"red\"";
+break;
+
+case 2:
+str += "bgcolor = \"green\"";
+break;
+
+case 3:
+str += "bgcolor = \"blue\"";
+break;
+}
+
+str += "> &nbsp </td>\n";
+}
+
+str += "</tr>\n";
+}
+
+str += "</table>\n";
+
+id.innerHTML = str;
+}