JQuery实现贪吃蛇游戏

r囧r小猫 2023-10-18 11:21 120阅读 0赞

很久之前学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.jpg][] back.jgp

程序截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70][]

注：

1.需要链接上JQuery文件

2.将back.jpg 图片保存到文件所在路径

希望对大家的学习有所帮助

[back.jpg]: https://img-blog.csdnimg.cn/20181117170416597.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181117170847667.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，120人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQuery实现贪吃蛇游戏

很久之前学jquery时写的一个小游戏，代码如下： <script type="text/javascript" src="jquery-3.2.1.js"></sc

r囧r小猫/ 2023年10月18日 11:21/ 0 赞/ 121 阅读

相关贪吃蛇游戏

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

谁借莪１个温暖的怀抱￠/ 2023年10月06日 09:11/ 0 赞/ 78 阅读

相关 javascript实现小游戏贪吃蛇

贪吃蛇 style <style> .face{ height: 400px;

朱雀/ 2023年05月30日 06:08/ 0 赞/ 257 阅读

相关贪吃蛇游戏

贪吃蛇游戏今天分享一个纯底层实现的贪吃蛇游戏，具体实现到不重要，主要还是思想，下面直接上代码 Data ： public class Data {

小咪咪/ 2023年02月19日 10:20/ 0 赞/ 5 阅读

相关贪吃蛇小游戏

贪吃蛇游戏是一款比较经典的休闲游戏，文章包括项目的部分源码以及运行界面的一些图片，项目也参考学习了许多大佬的文章，会在文章最后面贴出参考文章，有什么问题也请大家指正。一、

谁借莪１个温暖的怀抱￠/ 2023年01月02日 08:28/ 0 赞/ 340 阅读

相关 Javascript实现贪吃蛇小游戏

![这里写图片描述][SouthEast] 黑色背景是一个900px\600px的相对定位的一个div（obox）,我们在其内部动态生成一系列的小div，内部的开始游戏按钮，

秒速五厘米/ 2022年06月12日 06:23/ 0 赞/ 532 阅读

相关用C++语言实现贪吃蛇游戏

最近更了个新的关于用C/C++写贪吃蛇的blog，感觉那个帮助会更大些，这篇中用DirectX技术不适合刚开始试着写游戏的同学，传送：[https://blog.csdn.ne

妖狐艹你老母/ 2022年06月05日 04:10/ 0 赞/ 569 阅读

相关小游戏：贪吃蛇

功能描述： 1.蛇初始长度为5，随着吃食物变长，速度也变快 2.速度有上限，当速度达到上限，不再增速 3.可长按方向键加速 4.吃一个食物加一分三个文件：S

淡淡的烟草味﹌/ 2022年06月03日 03:44/ 0 赞/ 421 阅读

相关 js实现web贪吃蛇小游戏

js实现web贪吃蛇小游戏效果图见下，[效果展示地址][Link 1] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_te

本是古典何须时尚/ 2022年03月21日 08:10/ 0 赞/ 337 阅读

相关 react实现贪吃蛇小游戏

之前看别人写小游戏觉得很厉害，正好最近闲来无聊，就写了个入门级的小游戏，贪吃蛇。当你开始实现的时候，会发现其实并没有你想的那么难。下面进入正题。项目源码见：[https

雨点打透心脏的1/2处/ 2022年03月01日 17:28/ 0 赞/ 435 阅读