很久之前學jquery時寫的一個小遊戲，程式碼如下：

<script type="text/javascript" src="jquery-3.2.1.js"></script>
	<script type="text/javascript">	
	$(document).ready(function(){
		$('body').css({
			"padding":"0px",
			"margin":"0px"
		});
		function Map(){
			$("<div/>").css({
				"width":"800px",
				"height":"400px",
				"background-image":"url(back.jpg)"
			}).appendTo($('body')[0]);
		}
		function Food(){
			this.foodX=Math.floor(Math.random()*40);
			this.foodY=Math.floor(Math.random()*20);
			this.showFood = function(){
				this.foodX=Math.floor(Math.random()*40);
				this.foodY=Math.floor(Math.random()*20);
				if($(".food").length==0){
					$('body:first').append("<div class='food'></div>");
					$(".food:first").css({
					"height":"20px",
					"width":"20px",
					"background":"orange",
					"position":"absolute"
					});
				}
				$(".food:first").css({
					"top":this.foodY*20+"px",
					"left":this.foodX*20+"px"
				})
			}
		}
		function Snake(){
			var len = 20;
			var n=0;
			var preKey = 39;
			this.section = [[0,10,'green',null],[1,10,'green',null],[2,10,'green',null],[3,10,'green',null],[4,10,'red',null]];
			this.showSnake = function(){
				for(var i=0;i<this.section.length;i++){
					if(this.section[i][3]==null){
						this.section[i][3]=$("<div/>");
						this.section[i][3].css({
							"width":len+"px",
							"height":len+"px",
							"position":"absolute",
							"background":this.section[i][2]
						}).appendTo($('body')[0]);
					}
					this.section[i][3].css({
						"top":this.section[i][1]*len+"px",
						"left":this.section[i][0]*len+"px"
					})
				}
			}
			this.bodyMove = function(keyCode){
					var sectionX = this.section[0][0];
					var sectionY = this.section[0][1];
					var foodX = food.foodX;
					var foodY = food.foodY;
					if((keyCode==37&&preKey==39)||(keyCode==39&&preKey==37)||(keyCode==38&&preKey==40)||(keyCode==40&&preKey==38)){
						return;
					}
					for(var i=0;i<this.section.length-1;i++){
						this.section[i][0]=this.section[i+1][0];
						this.section[i][1]=this.section[i+1][1];
					}
					switch(keyCode){
						case 37:this.section[this.section.length-1][0]--;break;
						case 38:this.section[this.section.length-1][1]--;break;
						case 39:this.section[this.section.length-1][0]++;break;
						case 40:this.section[this.section.length-1][1]++;break;
					}
					preKey=keyCode;
					if(foodX==this.section[this.section.length-1][0]&&foodY==this.section[this.section.length-1][1]){
						this.section.unshift([sectionX,sectionY,'green',null]);
						food.showFood();
					}
					for(var i=0;i<this.section.length-1;i++){//不能碰到自己的身體
						if(equalsBody(this.section[this.section.length-1],this.section[i])==true){
							alert("Game Over!");
							$(document).unbind("keydown");
							return;
							break;
						}
					}
					if(this.section[this.section.length-1][0]<0||this.section[this.section.length-1][0]>=40||this.section[this.section.length-1][1]<0||this.section[this.section.length-1][1]>=20){//不能超出地圖的邊界
						alert("Game Over!");
						$(document).unbind("keydown");
					}else{
						this.showSnake();
					}
					function equalsBody(body1,body2){
						if(body1[1]==body2[1]&&body1[0]==body2[0]){
							return true;
						}else{
							return false;
						}
					}
				}
		}
		var map = new Map();
		var food = new Food();
		food.showFood();
		var snake = new Snake();
		snake.showSnake();
		$(document).keydown(function(event){
			var key = event.keyCode;
			if(key==37||key==38||key==39||key==40){
				snake.bodyMove(event.keyCode)
			}
		});
	})
	</script>
 

   back.jgp

程式截圖：

注：

1.需要連結上JQuery檔案

2.將back.jpg 圖片儲存到檔案所在路徑

希望對大家的學習有所幫助