2. 程式人生 > >js程式設計--貪吃蛇遊戲04

js程式設計--貪吃蛇遊戲04

阿新 • • 發佈：2018-12-06

在Test工程的基礎上修改

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>我的貪吃蛇test</title>
		<script type="text/javascript" src="jquery-3.3.1.min.js" ></script>
		<script type="text/javascript" src="snake.js" ></script
 
>
		<link rel="stylesheet" href="index.css" />
	</head>
	<body>
		
	</body>
</html>

snake.js

$(document).ready(function(){

	
	var mapDiv=new Mapdiv();
	var snake=new Snake();
	var food=new Food();
	
	snake.show();
	
	
	$(document).keydown(function(e){
		var code=
 
e.keyCode;
		snake.run(code,food);
		
	});
	
	
	
	
});
//地圖
	var Mapdiv=function(){
		var div=$("<div></div>");
		div.appendTo("body");
		div.css(
			{
				"width": "800px",
				"height": "500px",
				"background-color":"darkgrey",
				"position": "absolute"
		});
		div.attr("id","map_div");

	}
 
;
	
	//蛇
	var Snake=function(){
		var div=$("<div></div>");
		div.appendTo("#map_div");
		
		this.x=0;
		this.y=0;
		
		var stup=50;
		
		
		
		this.show=function(){
			this.x=0;
			this.y=0;
			div.css(
			{
				"width": "50px",
				"height": "50px",
				"background-color":"red",
				"position": "absolute",
				"margin-left":0,
				"margin-top":0
			});
		};
		
		this.run=function(code,food){
			switch(code){
				case 37://左
					this.x--;
					if(this.x<0){
						alert("碰壁了！！！");
						this.show();
					}
					else{
						
						if(food.x==this.x&&food.y==this.y){
							alert("吃食物！！");
					}else{
						div.css({"margin-left":this.x*stup});
					}
						
					}
					
				break;
				case 39://右
					this.x++;
					if(this.x>15){
						alert("碰壁了！！！");
						this.show();
					}
					
					else{
						
						if(food.x==this.x&&food.y==this.y){
							alert("吃食物！！");
						}else{
							div.css({"margin-left":this.x*stup});
						}
					}
					
				break;
				case 38://上
				
					this.y--;
					if(this.y<0){
						
						alert("碰壁了！！！");
						this.show();
					}
					else{
						
						if(food.y==this.y&&food.x==this.x){
							alert("吃食物！！");
						}else{
							div.css({"margin-top":this.y*stup});
						}
					}
					
				break;
				case 40://下
					this.y++;
					if(this.y>9){
						alert("碰壁了！！！");
						this.show();
					}
					
					else{
						
						if(food.y==this.y&&food.x==this.x){
							alert("吃食物！！");
						}else{
							div.css({"margin-top":this.y*stup});
						}
					}
					
				break;
				
			}
			
		}
		
	};
	//食物
	var Food=function(){
		var div=$("<div></div>");
		div.appendTo("#map_div");
		
		this.x=parseInt(Math.random()*16);
		this.y=parseInt(Math.random()*10);
		
		div.css(
			{
				"width": "50px",
				"height": "50px",
				"background-color":"yellow",
				"position": "absolute",
				"margin-left":this.x*50,
				"margin-top":this.y*50
		});
	};

相關推薦

js程式設計--貪吃蛇遊戲04

在Test工程的基礎上修改 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>我的貪吃蛇test&l

js程式設計--貪吃蛇遊戲07

注意，都是建立在前面幾個步驟至上開發的。 index.html <!DOCTYPE html> <html>     <head>         

js程式設計--貪吃蛇遊戲05

增加功能： 1.修復Bug：只按上下左右鍵有效、蛇碰到自身彈窗警告。 2.蛇自己能動   index.html <!DOCTYPE html> <html> <head> <meta charset="u

js程式設計--貪吃蛇遊戲03

js程式設計–貪吃蛇遊戲03 在js程式設計–貪吃蛇遊戲02的基礎上修改功能如下： 1、運用了面向物件的程式設計思想，將蛇和食物分別用物件的方式實現。 2、蛇遇到食物，食物被吃之後，隨機生成新的食物 注意：引用jquery-3.3.1.min.js index.htm

javascript：用原生js模擬貪吃蛇遊戲練習

本次練習所有的程式碼：可以直接複製全部然後執行看效果~ 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <

利用Canvas+js編寫貪吃蛇遊戲

//拿到畫板 行內 var canvas = document.getElementById("canvas"); //獲取畫板許可權 var ctx = canvas.getContext("2d"); var width=15; //初始化的蛇的長度

js-->貪吃蛇小遊戲,能成功玩

function 小遊戲 absolute images 貪吃蛇 <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>貪吃蛇小遊戲</tit

使用前端原生 js，貪吃蛇小遊戲

oct 新的 生成 方便 描述 logs turn asc 轉動 好久好久，真的是好久好久沒來寫過了，因為最近有點小忙。不過即使是忙，也也還是寫了兩個小遊戲，其中一個就是這個，貪吃蛇啦。 算是一個小練手了，這個是在有點太簡單了，只是第一次寫這種小遊戲，還是零零星星花了三

簡單貪吃蛇遊戲js

貪吃蛇 col doc var math oat turn rip onkeyup 新手，仿照別人的寫的。只能實現簡單的功能，代碼如下： 1 <!DOCTYPE html> 2 <html> 3 <head> 4

用JS實現的貪吃蛇遊戲

JavaScript 小遊戲 需要用到html、css、javascript 和 DOM 這些知識點就可以了。主要是js，其他只是一些基本的知識。js貌似也不是很難。但是問題就在這裏，即使知識點都會了，但是還是無法綜合運用把東西做出來 遊戲界面 先把整個遊戲界面做出來： <!DOCTYPE ht

[原始碼和文件分享]基於WIN32 API介面程式設計實現的貪吃蛇遊戲

1 設計目的和任務 本次期末大作業採用課程設計的形式進行，作為《Windows程式設計》課程的期末考核。要求綜合運用Windows程式設計的相關知識，完成大作業的相關內容，並撰寫設計報告。其目的和任務是： 鞏固和加深學生對本課程基本知識的理解和掌握 熟悉使用Windows環

【程式設計6】貪吃蛇遊戲（python+pygame）

效果圖~新鮮出爐 開始介面 遊戲中 結束介面 一、pygame模組概覽 模組名稱 功能 pygame.cdrom 訪問光碟機

Android快樂貪吃蛇遊戲實戰專案開發教程-04虛擬方向鍵（三）三角形按鈕效果

一、知識點講解 當我們點選系統自帶的按鈕時，按鈕的外觀會發生變化。上篇博文中我們畫了一個三角形按鈕，但點選還不能變色，下面我們就來實現點選變色功能。從知識體系上我們需要了解以下兩個知識點 1.如何知道手指點選了我們的控制元件？ 辦法是重寫View中的onTouchEvent方

純JS寫的貪吃蛇遊戲（大二暑假實習）

此遊戲是大二暑假實習無聊，然後弄的，剛翻檔案看到了，所以想和你們分享一下。。。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&

HTML5 + js 貪吃蛇遊戲設計與實現

遊戲截圖： 遊戲架構： 此遊戲架構大概分為三層： Game.html： 說明：包含了介面的展示，以及一些事件的入口。 完整程式碼： <html> <head> <title>html5 snake game</title&

用Java開發貪吃蛇遊戲

for 焦點 == tint 素材 ide graph 點擊 perf 貪吃蛇遊戲的設計步驟： Part 1：　　 　　設計遊戲圖紙 　　畫出900*700的白色窗口 　　在窗口上添加畫布 　　在畫布上添加標題 　　在畫布上添加黑色遊戲區 Part 2：

結對-貪吃蛇遊戲-需求分析

時間 退出 計時器 簡單 貪吃蛇遊戲 按鍵 開始 暫停 貪吃蛇 遊戲簡介： 貪吃蛇一款可以提升玩家反應速度的遊戲，簡單易操作 需要實現功能： 1.遊戲計時器，右上方顯示 2.開始按鈕，暫停按鈕，退出按鈕 3.難度選擇按鈕。難度選擇分為速度1~5檔 4.控制按鍵 ↑ ↓ ←

結對-貪吃蛇遊戲設計文檔

eve face 鍵盤 是否 存儲 貪吃蛇遊戲 黑屏 安裝 屏幕 貪吃蛇項目設計 準備階段1 pygame簡介及安裝2surface對象3窗口顯示4繪制幾何圖形5event事件設計階段1首先繪制屏幕2繪制一個點作為蛇的蛇頭3實現鍵盤對於蛇頭的控制4隨機在屏幕上出現一個點(食

結對-開發貪吃蛇遊戲-開發環境搭建過程

ips 開始 結果 開發 java 開發環境 ron 變量 環境搭建 項目：貪吃蛇遊戲開發 環境搭建： 　　　　Mac下： 　　　　　　1）官網下載jkd1.8版本。 　　　　　　2）下載IDE——eclipse或Myeclipse 　　　　win下： 　　　　　　1)官網

《結對-貪吃蛇遊戲-開發環境搭建過程》

pytho img images cnblogs 配置環境變量 font 貪吃蛇 nbsp 技術 開發環境搭建過程：1.下載並安裝python（電腦上已經安裝過了就不截圖了） 2.配置環境變量 3.設置成功後，在cmd