JS版本＿貪喫蛇

原創 MR_wji 2020-06-16 06:13 
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>貪喫蛇</title>
<style type="text/css">
.Table table {
	border-collapse: collapse;
}

.Table table td {
	border: 1px solid #808080;
	width: 10px;
	height: 10px;
	font-size: 0;
	line-height: 0;
	overflow: hidden;
}

.snake {
	background-color: green;
}

.food {
	background-color: blue;
}
</style>
<script type="text/javascript" language="javascript">
<!--初始化參數-->
	var interval0 = null;
	var interval1 = null;
	var interval2 = null;
	var interval3 = null;
	var interval4 = null;
	var flag = 39;
	var one = true;
	var array = new Array();
	var i = 0, j = 0, t = 0, s = 0;
	var xx = new Array(10000);
	var yy = new Array(10000);
	var speedd = 100;
	<!--繪製表格-->
	function PannelTable() {
		document.getElementById("table").innerHTML = "";
		this.pt = function(x, y) {
			this.x = x;
			this.y = y;
			/*var t = document.createElement("table");
			var b = document.createElement("tbody");
			for (var i = 0; i < x; i++) {
				var r = document.createElement("tr");
				for (var j = 0; j < y; j++) {
					var c = document.createElement("td");
					var m = document.createTextNode("2");
					c.appendChild(m);
					r.appendChild(c);
				}
				b.appendChild(r);
			}
			t.appendChild(b);
			document.getElementById("table").appendChild(t);*/
			var html = [];
			html.push("<table>");
			for (var i = 0; i < x; i++) {
				html.push("<tr>");
				for (var j = 0; j < y; j++) {
					html.push('<td id="box_' + i + "_" + j + '"> </td>');
				}
				html.push("</tr>");
			}
			html.push("</table>");
			this.pannel = document.getElementById("table");
			this.pannel.innerHTML = html.join("");
			for (var i = 0; i < x; i++) {
				array[i] = new Array();
				for (var j = 0; j < y; j++) {
					array[i][j] = 0;
				}
			}
			for (var g = 0; g <10000; g++) {
				xx[g] = 0;
				yy[g] = 0;
			}
			var food_x = Math.floor(Math.random() * (x-3) + 1);
			var food_y = Math.floor(Math.random() * (y-3) + 1);
			array[food_x][food_y] = 2;
		}
	}
	<!--選擇表格的樣式-->
	function Main(x, y) {
		new PannelTable().pt(x, y);
	}
	<!--選擇速度-->
	function Speed(speed){
		speedd = speed;
	}
	<!--畫蛇-->
	function PaintSnake(array) {
		for (var i = 0; i < array.length; i++) {
			for (var j = 0; j < array[i].length; j++) {
				if (array[i][j] == 1) {
					document.getElementById("box_" + i + "_" + (j))
							.setAttribute("class", "snake");
				} else if (array[i][j] == 0) {
					document.getElementById("box_" + (i) + "_" + (j))
							.setAttribute("class", "");
				} else {
					document.getElementById("box_" + (i) + "_" + (j))
							.setAttribute("class", "food");
				}
			}
		}
	}
	<!--清空-->
	function ClearSnake(array) {
		for (var i = 0; i < array.length; i++) {
			for (var j = 0; j < array[i].length; j++) {
				array[i][j] = 0;
			}
		}
	}
	<!--點擊開始創建蛇-->
	function Start() {
		if (one == true) {
			document.getElementById("box_0_0").setAttribute("class", "snake");
			array[0][0] = 1;
			xx[t] = 0;
			yy[t++] = 0;
			interval0 = setInterval("Init0()",speedd);
			one = false;
		}
	}
	function Init0() {
		if (j > array[i].length - 1) {
			ClearSnake(array);
			PaintSnake(array);
			window.alert("遊戲結束");
			clearInterval(interval0);
			return;
		} else {
			if (array[i][j + 1] == 2) {
				if (j+2>=array[i].length-1){
					ClearSnake(array);
					PaintSnake(array);
					window.alert("遊戲結束");
					clearInterval(interval0);
					return;
				}
				do {
					var food_x = Math.floor(Math.random() * (array.length-3) + 1);
					var food_y = Math
							.floor(Math.random() * (array[i].length-3) + 1);
				} while (array[food_x][food_y] == 1||(food_x==0&&food_y==0)||(food_x==0&&food_y==array[i].length-1)||(food_x==array.length-1&&food_y==0)||(food_x==array.length-1&&food_y==array[i].length-1));
				array[food_x][food_y] = 2;
				array[i][++j] = 1;
				xx[t] = i;
				yy[t++] = j;
				PaintSnake(array);
			} else if(array[i][j + 1] == 0){
				array[xx[s]][yy[s++]] = 0;
				array[i][++j] = 1;
				xx[t] = i;
				yy[t++] = j;
				PaintSnake(array);
			}else{
				ClearSnake(array);
				PaintSnake(array);
				window.alert("遊戲結束");
				clearInterval(interval0);
				return;
			}
		}
	}
	<!--控制方向-->
	function Init(Flag) {
		if (Flag == 37 && flag != 39) {
			if (j <= 0) {
				ClearSnake(array);
				PaintSnake(array);
				window.alert("遊戲結束");
				clearInterval(interval1);
				return;
			} else {
				if (array[i][j - 1] == 2) {
					if(j-2<0){
						ClearSnake(array);
						PaintSnake(array);
						window.alert("遊戲結束");
						clearInterval(interval1);
						return;
					}
					do {
						var food_x = Math.floor(Math.random() * (array.length-3)
								+ 1);
						var food_y = Math.floor(Math.random() * (array[i].length-3)
								+ 1);
					} while (array[food_x][food_y] == 1||(food_x==0&&food_y==0)||(food_x==0&&food_y==array[i].length-1)||(food_x==array.length-1&&food_y==0)||(food_x==array.length-1&&food_y==array[i].length-1));
					array[food_x][food_y] = 2;
					array[i][--j] = 1;
					xx[t] = i;
					yy[t++] = j;
					PaintSnake(array);
				} else if(array[i][j - 1] == 0){
					array[xx[s]][yy[s++]] = 0;
					array[i][--j] = 1;
					xx[t] = i;
					yy[t++] = j;
					PaintSnake(array);
				}else{
					ClearSnake(array);
					PaintSnake(array);
					window.alert("遊戲結束");
					clearInterval(interval1);
					return;
				}
			}
			flag = 37;
		} else if (Flag == 38 && flag != 40) {
			if (i <= 0) {
				ClearSnake(array);
				PaintSnake(array);
				window.alert("遊戲結束");
				clearInterval(interval2);
				return;
			} else {
				
				if (array[i - 1][j] == 2) {
					if(i-2<0){
						ClearSnake(array);
						PaintSnake(array);
						window.alert("遊戲結束");
						clearInterval(interval2);
						return;
					}
					do {
						var food_x = Math.floor(Math.random() * (array.length-3)
								+ 1);
						var food_y = Math.floor(Math.random() * (array[i].length-3)
								+ 1);
					} while (array[food_x][food_y] == 1||(food_x==0&&food_y==0)||(food_x==0&&food_y==array[i].length-1)||(food_x==array.length-1&&food_y==0)||(food_x==array.length-1&&food_y==array[i].length-1));
					array[food_x][food_y] = 2;

					array[--i][j] = 1;
					xx[t] = i;
					yy[t++] = j;
					PaintSnake(array);
				} else if(array[i - 1][j] == 0) {
					array[xx[s]][yy[s++]] = 0;
					array[--i][j] = 1;
					xx[t] = i;
					yy[t++] = j;
					PaintSnake(array);
				}else{
					ClearSnake(array);
					PaintSnake(array);
					window.alert("遊戲結束");
					clearInterval(interval2);
					return;
				}
			}
			flag = 38;
		} else if (Flag == 39 && flag != 37) {
			if (j > array[i].length - 1) {
				ClearSnake(array);
				PaintSnake(array);
				window.alert("遊戲結束");
				clearInterval(interval3);
				return;
			} else {
				
				if (array[i][j + 1] == 2) {
					if(j+2>array[i].length-1){
						ClearSnake(array);
						PaintSnake(array);
						window.alert("遊戲結束");
						clearInterval(interval3);
						return;
					}
					do {
						var food_x = Math.floor(Math.random() * (array.length-3)
								+ 1);
						var food_y = Math.floor(Math.random() * (array[i].length-3)
								+ 1);
					} while (array[food_x][food_y] == 1||(food_x==0&&food_y==0)||(food_x==0&&food_y==array[i].length-1)||(food_x==array.length-1&&food_y==0)||(food_x==array.length-1&&food_y==array[i].length-1));
					array[food_x][food_y] = 2;
			
					array[i][++j] = 1;
					xx[t] = i;
					yy[t++] = j;
					PaintSnake(array);
				} else if(array[i][j + 1] == 0) {
					array[xx[s]][yy[s++]] = 0;
					array[i][++j] = 1;
					xx[t] = i;
					yy[t++] = j;
					PaintSnake(array);
				}else{
					ClearSnake(array);
					PaintSnake(array);
					window.alert("遊戲結束");
					clearInterval(interval3);
					return;
				}

			}
			flag = 39;
		} else if (Flag == 40 && flag != 38) {
			if (i > array[i].length - 2) {
				ClearSnake(array);
				PaintSnake(array);
				window.alert("遊戲結束");
				clearInterval(interval4);
				return;
			} else {
				
				if (array[i + 1][j] == 2) {
					if(i+2>array.length-1){
						ClearSnake(array);
						PaintSnake(array);
						window.alert("遊戲結束");
						clearInterval(interval4);
						return;
					}
					do {
						var food_x = Math.floor(Math.random() * (array.length-3)
								+ 1);
						var food_y = Math.floor(Math.random() * (array[i].length-3)
								+ 1);
					} while (array[food_x][food_y] == 1||(food_x==0&&food_y==0)||(food_x==0&&food_y==array[i].length-1)||(food_x==array.length-1&&food_y==0)||(food_x==array.length-1&&food_y==array[i].length-1));
					array[food_x][food_y] = 2;
					
					array[++i][j] = 1;
					xx[t] = i;
					yy[t++] = j;
					PaintSnake(array);
				} else if(array[i + 1][j] == 0){
					array[xx[s]][yy[s++]] = 0;
					array[++i][j] = 1;
					xx[t] = i;
					yy[t++] = j;
					PaintSnake(array);
				}else{
					ClearSnake(array);
					PaintSnake(array);
					window.alert("遊戲結束");
					clearInterval(interval4);
					return;
				}
			}
			flag = 40;
		}
	}
	function Move(Event) {
		if (Event.keyCode == 37) {
			if (flag != 37) {
				clearInterval(interval2);
				clearInterval(interval4);
				clearInterval(interval1);
				interval1 = setInterval("Init(37)", speedd);
			}
		} else if (Event.keyCode == 38) {
			if (flag != 38) {
				clearInterval(interval0);
				clearInterval(interval1);
				clearInterval(interval3);
				clearInterval(interval2);
				interval2 = setInterval("Init(38)", speedd);
			}
		} else if (Event.keyCode == 39) {
			if (flag != 39) {
				clearInterval(interval2);
				clearInterval(interval4);
				clearInterval(interval0);
				clearInterval(interval3);
				interval3 = setInterval("Init(39)", speedd);
			}
		} else if (Event.keyCode == 40) {
			if (flag != 40) {
				clearInterval(interval0);
				clearInterval(interval1);
				clearInterval(interval3);
				clearInterval(interval4);
				interval4 = setInterval("Init(40)", speedd);
			}
		} else {

			
			
			
			
			
			
		}
	}
	function Reflsh(){
		window.location.href=window.location.href;
	}
</script>
</head>
<body style="background-color: rgb(208, 223, 239);"
	οnkeydοwn="Move(event)">
	<select id="select1"
		style="font-family: 微軟雅黑; height: 25px; margin-right: 10px;">
		<option selected="selected">＜－－請選擇地圖大小－－＞</option>
		<option οnclick="Main(20,20)">20*20</option>
		<option οnclick="Main(30,30)">30*30</option>
		<option οnclick="Main(35,50)">35*50</option>
		<option οnclick="Main(35,60)">35*60</option>
	</select>
	<select style="font-family: 微軟雅黑; height: 25px; margin-right: 10px;">
		<option selected="selected">＜－－請選擇難度－－＞</option>
		<option οnclick="Speed(1000)">初級難度</option>
		<option οnclick="Speed(500)">中級難度</option>
		<option οnclick="Speed(100)">高級難度</option>
	</select>
	<div id="table" class="Table" style="margin-top: 20px;"></div>
	<br>
	<input type="button" value="開始遊戲"
		style="font-family: 微軟雅黑; height: 25px; margin-right: 10px;"
		οnclick="Start()"></input>
	<input type="button" value="重新開始"
		style="font-family: 微軟雅黑; height: 25px; margin-right: 10px;" οnclick="Reflsh()"></input>
</body>
</html>

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

「Java開發指南」如何用MyEclipse搭建GWT 2.1和Spring？（二）

本教程將指導您如何生成一個可運行的Google Web Toolkit (GWT) 2.1和Spring應用程序，該應用程序爲域模型實現了CRUD應用程序模式。在本教程中，您將學習如何： 安裝Google Eclipse插件 爲GWT配置

原創 2024-05-17 12:21:26

前端面試題 - Node JS與V8是什麼關係？

前端面試題 - Node JS與V8是什麼關係？ V8 引擎是 Node.js 的核心組成部分，負責執行 JavaScript 代碼， 而 Node.js 爲 V8 提供了一個運行環境和API，使其能夠在服務器端運行。 通俗易懂的前端面試題

原創 2024-05-16 12:41:41

前端面試題 - V8是什麼？

前端面試題 - V8是什麼？ V8 是一個JavaScript引擎，能將JavaScript代碼直接編譯成本地平臺的機器碼並執行。 通俗易懂的前端面試題網站： https://www.front-interview.com

原創 2024-05-16 12:41:40

Visual C++界面開發組件Xtreme Toolkit Pro v24測試版發佈——完全支持SVG

Codejock軟件公司的Xtreme Toolkit Pro是屢獲殊榮的VC界面庫，是MFC開發中最全面界面控件套包，它提供了Windows開發所需要的11種主流的Visual C++ MFC控件，包括Command Bars、Contr

原創 2024-05-16 12:19:55

SharePoint Online 客製化開發：如何使用CSS更改網站主題背景顏色？

一般情況下公司爲了某個團隊或者公司內部共享數據等用途來更改網站的樣式，打造獨特的品牌樣式，很多研發工程師給定的解決方案是爲他們的站點構建自定義主頁，雖然SharePoint Designer是一個強大的工具，但這裏我不推薦使用ShareP

osc_w6noy934 2024-05-14 02:00:35

Python爬蟲進階必備 | MD5 hash 案例解析彙總（一）

上次鹹魚對關於 MD5 hash 的JS加密方法做了總結，這次把鹹魚遇到的 MD5 hash 的案例做了彙總，這個彙總系列會持續更新，攢到一定數量的網站就發一次。 關於 MD5 HASH 的處理可以參考下面這篇文章： Python爬蟲進

osc_hzf6peqc 2024-05-14 01:40:15

Html 的生命週期

零、序言 　　vue 用多了，自然離不開生命週期。最近突發奇想，加上之前看過的文章中關於 script 標籤中的 async 和 defer 的搗糨糊，決定整理一下，攻克這個模糊點。 　　當然，最多的還是與 script 標籤相關的前兩個

osc_27sxxx5r 2024-05-13 23:34:32

[js] 寫一個格式化時間的方法

[js] 寫一個格式化時間的方法 function dateToString(date, format = 'yyyy-MM-dd') { const d = new Date(date); let result = format

osc_6mbnx553 2024-05-13 22:07:18

cheerp 編譯器之通用計算模塊ccm1

cheerp 通用計算模塊(ccm1) 是基於cheerp 編譯器發射出平臺格式無關的wasm中間代碼，在不同宿主之內運行的一種模塊化方式。 0x1. 不同宿主的相同代碼實現 ccm1 的一般宿主是c++實現，不同平臺編譯引用就可以，目

原創 2024-05-12 21:53:46

通義靈碼企業版正式發佈，滿足企業私域知識檢索、數據合規、統一管理等需求

5 月 9 日阿里雲 AI 峯會，阿里雲智能集團首席技術官周靖人宣佈，通義靈碼企業版正式發佈，滿足企業用戶的定製化需求，幫助企業提升研發效率。 通義靈碼是國內用戶規模第一的智能編碼助手，基於 SOTA 水準的通義千問代碼模型 Code-Qw

原創 2024-05-11 21:15:01

Python 爬蟲：Spring Boot 反爬蟲的成功案例

前言 在當今數字化時代，網絡數據成爲了信息獲取和分析的重要來源之一。然而，隨着網絡數據的廣泛應用，爬蟲技術也逐漸成爲了互聯網行業的熱門話題。爬蟲技術的應用不僅可以幫助企業獲取有價值的信息，還可以用於數據分析、市場研究等領域。然而，隨着爬

原創 2024-05-07 23:26:04

我們團隊來了一位新同事，主動要求幫忙敲代碼！歡迎 AI 001號

通義靈碼｜7X24的AI智能編程助手 工號：AI001 他叫通義靈碼，一個硅基生命。出生在0101星球，沒有性別，但有人格類型。 他是INTJ，建築師型人格，艾薩克·牛頓和甘道夫同款。 他會寫一點代碼，但不如我們會得多。我看了下他的簡歷，

原創 2024-05-07 21:12:06

界面控件DevExtreme v23.1、v23.2盤點 - 增強的TypeScript(Angular、React、Vue)

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Ang

原創 2024-05-07 11:34:56

界面組件DevExpress中文教程 - 如何在Node.js應用中創建報表？

DevExpress Reporting是.NET Framework下功能完善的報表平臺，它附帶了易於使用的Visual Studio報表設計器和豐富的報表控件集，包括數據透視表、圖表，因此您可以構建無與倫比、信息清晰的報表。 獲取Dev

原創 2024-04-30 11:36:22

ArkTS開發原生鴻蒙HarmonyOS短視頻應用

HarmonyOS實戰課程“2024鴻蒙零基礎快速實戰-仿抖音App開發（ArkTS版）”已經於今日上線至慕課網（https://coding.imooc.com/class/843.html），有致力於鴻蒙生態開發的同學們可以關注一下。

原創 2024-04-29 23:07:45