基于JavaScript 面向对象开发的贪吃蛇游戏经验代码分享

最新推荐文章于 2022-11-29 16:22:20 发布
最新推荐文章于 2022-11-29 16:22:20 发布
阅读量106 收藏
点赞数
分类专栏： 网页版贪吃蛇 文章标签： js 游戏 webstorm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tom_boy_/article/details/118481025
版权

贪吃蛇个人作品视频链接地址

作品在这里插入图片描述

贪吃蛇个人作品视频链接地址

https://6e70-npm-0gvywwbd24af7edc-1305489073.tcb.qcloud.la/e0412e1ee2bf170e32f7f68e4a7a4abd.mp4?sign=aa29230f08bf6a79c800cc8997ea8296&t=1625446149

<!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>

<style> 
body{ margin:0px;
padding:0px;
background-image: url(images/beijing.jpg);}
#main{ margin:100px;}
.btn{ width:100px;
height:40px;}
.gtitle{
	font-size:25px;
	font-weight:bold;}
#gnum{ color:#F00;}
</style>
<body> <div id="main">
<input  class="btn" type="button" value="开始游戏"  id="begin"/>
<input  class="btn" type="button" value="暂停游戏"  id="pause"/>
<span class="gtitle">第<span id="gnum">1</span>关</span>

<script> 
var main=document.getElementById('main');
var showcanvas=false;
function Map(atom,xnum,ynum){
	this.atom=atom;
	this.xnum=xnum;
	this.ynum=ynum;
	 this.canvas=null;
	 
	 this.create=function(){
	
		 this.canvas=document.createElement('div');
		
		 this.canvas.style.cssText="position: relative ; top:40px; border:1px  solid darkred; background-color:#FAFAFA";
		 this.canvas.style.width=this.atom*this.xnum+'px';
		  this.canvas.style.height=this.atom*this.ynum+'px';
	 main.appendChild(this.canvas);
	 if(showcanvas){ 
	 for(var y=0;y<xnum;y++){
		 for(var x=0;x<xnum;x++){
		var a=document.createElement('div');
		a.style.cssText="border:1px solid yellow";
		a.style.width=this.atom+'px';
			a.style.height=this.atom+'px';
			a.style.backgroundColor="white";
			this.canvas.appendChild(a);
			a.style.position='absolute';
			a.style.left=x*this.atom+'px';
			a.style.top=y*this.atom+'px';
			}
		 }
	 
	 }
	 
	 }
	 }
	 
	 
	function Food(map){
		this.width=map.atom;
		this.height=map.atom;
		this.bgcolor="rgb("+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+")";
		 this.x=Math.floor(Math.random()*map.xnum);
			 this.y=Math.floor(Math.random()*map.ynum);
			 this.flag=document.createElement('div');
		this.flag.style.width=this.width+'px';
			this.flag.style.height=this.height+'px';
		 this.flag.style.backgroundColor=this.bgcolor;
		  this.flag.style.borderRadius='50%';
		    this.flag.style.position='absolute';
			  this.flag.style.left=this.x*this.width+'px';
			   this.flag.style.top=this.y*this.height+'px';
			   map.canvas.appendChild(this.flag);
		  
		  
		  
		  
		} 
	 
	 function Snake(map){
		this.width=map.atom;
		this.height=map.atom;
		this.direction='right';
		this.body=[{x:2,y:0},{x:1,y:0},{x:0,y:0}
		//,{x:null,y:null,flag:null}
		];
		
		this.display=function(){
			 for(var i=0;i<this.body.length;i++){
				 if(this.body[i].x!=null){
				 var s= document.createElement('div');
				 this.body[i].flag=s;
				 s.style.width=this.width+'px';
				  s.style.height=this.height+'px';
				 s.style.backgroundColor="rgb("+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+")";
				 
				s.style.position='absolute';
				s.style.left=this.body[i].x*this.width+'px';
				 s.style.top=this.body[i].y*this.height+'px';
				 map.canvas.appendChild(s);
				 }
				 }
			}
			this.run=function(){
				
				 for(var i=this.body.length-1; i>0;i--){
					 this.body[i].x= this.body[i-1].x;
					  this.body[i].y= this.body[i-1].y;
					 }
					 switch(this.direction){
						 case "left": this.body[0].x-=1; break;
						  case "right": this.body[0].x+=1; break;
						  case "up": this.body[0].y-=1; break;
						  case "down": this.body[0].y+=1; break;
						 
						 
						 }
						 if(this.body[0].x==food.x&&this.body[0].y==food.y){
							 this.body.push({x:null,y:null,flag:null});
						
						if(this.body.length>l.slength){
							l.set();
							
							}
						
							 map.canvas.removeChild(food.flag);
							 food=new Food(map);
							 
							 }
					
					  if(this.body[0].x<0||this.body[0].x>map.xnum-1||this.body[0].y<0||this.body[0].y>map.ynum-1){clearInterval(timer);
					  alert(" 你个弟弟，撞墙getover啦");
						
						restart(map.this);
						return false;  }
						
						
						
						
						
						
						
						
					  	for(var i=4;i<this.body.length;i++){
							if(this.body[0].x==this.body[i].x&&this.body[0].y==this.body[i].y){clearInterval(timer);
					  alert(" 小弟弟，getover啦");
						
						restart(map.this);
						return false; }	}
					  
					  
			
					for(var i=0;i<this.body.length;i++){
					if(this.body[i].flag!= null){ 
						 map.canvas.removeChild(this.body[i].flag)
					}
					}
				
				this.display();
				
				
				}
			
			
		
		 }
	 
	 
	 function restart(map,snake){
		 for(var i=0; i<snake.body.length;i++){
			 map.canvas.removeChild(snake.body[i].flag);}
		 
		 
		 	snake.body=[{x:2,y:0},{x:1,y:0},{x:0,y:0}
		//,{x:null,y:null,flag:null}
		];
		snake.direction='right';
		 snake.display();
		 map.canvas.removeChild(food.flag);
		 food=new Food(map);
		 }
	  
	  function level(){
		  this.num=1;this.speed=300;
		  this.slength=8;
		  this.set=function(){
			  this.num++;
			  if(this.speed<=50){
				   this.speed=50;
				  }else{
			  this.speed-=50;}
			  this.slength+=3;  this.display();start();}
			  
		  this.display=function(){
			document.getElementById('gnum').innerHTML=this.num;
			  }
		  }
		  var l=new level();
	l.display();
	var map=new Map(20,80,40);
map.create();





var food=new Food(map);
var snake=new Snake(map);
snake.display();
 window.onkeydown=function(e){
	 var event=e||window.event;
	 switch(event.keyCode){
		 case 38: if( snake.direction !="down"){ snake.direction="up";}s
		break;
		 
		  case 40:  if( snake.direction !="up"){snake.direction="down";} break;
		  case 37: if( snake.direction !="right") {snake.direction="left"; } break;
		  case 39:   if( snake.direction !="left"){snake.direction="right";} break;
		 }
	 
	 
	 }









var timer;
function start(){
	clearInterval(timer);

timer=setInterval(function(){ 
snake.run();},l.speed);}
document.getElementById('begin').onclick=function(){ 
start();
}
document.getElementById('pause').onclick=function(){ 
clearInterval(timer);


}



</script>
</div>
</body>

</html>

思路
创建页面布局，将每一个小格放到数组里面，通过行列构造一个二维数组，方便接下来的判断和一系列的操作。

创建蛇的身体，并通过计时器让蛇身体移动

控制蛇的移动，并加判断防止重复按键

创建食物，通过随机数函数来创建生成食物的位置，并进行判断防止和蛇身重合

对蛇运动情况进行判断：

Tom_boy_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用JavaScript写的贪吃蛇游戏（很简单，很详细）
编程界明世隐的博客
02-05 2万+
效果 编写外部框架 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ width:620px; height:450px; position:absolute; margin:0 auto
javascript贪吃蛇 （附带百度网盘链接）
weixin_45851686的博客
09-11 3691
这里贪吃蛇游戏是通过javascript面向对象编程的方法编写，代码结构分为游戏类（Game.js）， 蛇行为类（Snake.js），食物类(Food.js)，话不多说，直接源码了。(粘贴源码，引入正确路径即可运行) 贪吃蛇：链接：https://pan.baidu.com/s/1_gfxQOWZ5ktZXLARzcn6fA 提取码：672a 游戏页面： 1.html&css页面搭建： index.html: <!DOCTYPE html> <ht...
如何使用javascript制作一个网页端3D贪吃蛇游戏（附源码及链接）
最新发布
weixin_42078354的博客
11-29 2444
如何使用javascript制作一个网页端3D贪吃蛇游戏
JS学习——贪吃蛇代码（简易版）
awwwwmman的博客
05-17 3848
贪吃蛇目录页面游戏页面开始页面暂停页面代码html代码css代码js代码素材目录结构图片素材说明方块的构造函数方块原型上的方法蛇的构造函数蛇的初始化方法蛇的下一个位置方法（重点）这个方法用于获取蛇头的下一个位置对应的元素，并根据元素做不同的事情。处理碰撞后要做的事的方法move（重点）eatdie创建蛇的实例对象创建食物创建游戏逻辑游戏实例的初始化方法游戏的开始，暂停，结束方法游戏的开始start游戏的暂停pause游戏的结束over开始游戏和按钮暂停游戏和暂停游戏按钮 页面 游戏页面 开始页面 暂停页
贪吃蛇源码，免费，直接复制即可
m0_46291458的博客
07-18 7099
贪吃蛇源码（免费，直接复制粘贴，不墨迹） 思路之后有时间再总结，想学的可以看注释，带入面向对象思想即可 好用给个赞 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div#map{ width: 200px; height: 200px; border: 1px black s
javascript俄罗斯方块 面向对象编程（jQuery）（附带百度网盘链接）
weixin_45851686的博客
09-11 1260
这个俄罗斯方块游戏是通过javascript面向对象编程的方法编写，代码结构分为游戏类（Game.js），方块类（block.js）,地图类（Map.js）,方块形状对象类（blockjson.js） ，话不多说，直接源码了。(粘贴源码，引入正确路径即可运行) 目录 1.html&css页面搭建： 2.游戏类 Game.js: 3.方块类 block.js： 4.地图类：map.js 5.方块形状对象类blockjson.js: 6.百度网盘链接： 游戏页面 ind...
JavaScript实现贪吃蛇小游戏
leihao-lester
11-05 1万+
JavaScript实现贪吃蛇小游戏 功能概述 本程序实现了如下功能： 贪吃蛇的基本功能 统计得分 开始与暂停 选择难度等级 设置快捷键 5.1 通过ijkl，wsad也能实现方向的切换 5.2 通过“P” 表示暂停，“C”表示开始或继续，"R"表示重新开始 实现过程 最开始的实现原理其实是参考的csdn的一位大神，他用JavaScript20行就实现了贪吃蛇的基本功能，难等可贵的是还没有bug，链接在此 要实现贪吃蛇大概有以下几个步骤： 画一个蛇的移动区域 画一条蛇 画食物 让蛇
javascript小游戏贪吃蛇实现思路讲解(完整代码实现)
weixin_57259948的博客
09-25 1482
效果流程 首先我们要操作的canvas <!doctype html> <html> <head> <meta charset="utf-8"> <title>贪吃蛇</title> </head> <body> <canvas id="canvas"></canvas> <!-- 我们要操作的canvas --> <input type="button"
js:面向对象：贪吃蛇小游戏（生成地图，边界碰撞，刷新食物，障碍物产生）
冲鸭
09-16 891
目录 index.html Game.js Snake.js Block.js Food.js Map.js 1. 贪吃蛇项目 我们决定使用面向对象的方式来书写该游戏 因为面向对象是最适合书写游戏的 我们将这个游戏看成是一个类(Game类) 既然把游戏看成是一个类，它可以拥有属性和方法 有一个地图属性 有一个蛇属性 有一个食物属性 有一个障碍物属性 2. 我们可以把地图看成一个类 有一个行属性 有一个列属性 有...
JavaScript+ Canvas开发趣味小游戏《贪吃蛇》
zep
05-23 3746
一、效果展示 二、《贪吃蛇》基本实现思路 蛇头部分+蛇身体部分：采用对象形式来存储坐标，并将每个坐标对象放到一个snake数组中，方便使用。设置每个方格宽度30px,高度30px，画布高度600px，宽度600px。 a.新蛇头newHead等于旧蛇头oldHead的x坐标或者y坐标+1 b.蛇的头部+身体部分，每次更新（动起来）的规律：每次将蛇的身体部分的最后1个方块（尾部）删除，然后在蛇的头部的前面增加1个方块：该新增的方块（newHead）的坐标与原来头部方块(oldHead)的坐标关系为
javascript——贪吃蛇项目制作
DS153的博客
12-22 3535
虽然在写这个项目很多东西都没有学习，但是根据这个视频的内容我还是跟着把贪吃蛇项目写了出来：web前端实战项目系列，JavaScript面相对象开发贪吃蛇（全套教程），并且一步步搞懂内部的东西。同时感谢我们的大佬的文章：JavaScript贪吃蛇给我带来了很多的帮助。贪吃蛇项目的制作我觉得更多是需要懂得制作的思路，接下来让我们寻找其中的重点，解析这个过程。 一、效果展示 首先让我们看看实际上的效果是什么样子的：贪吃蛇小游戏 这里有一个参考网站给大家看。我这里上一份我执着的样子： ...
JS 面向对象版 贪吃蛇
sc4599的博客
06-23 1217
之前的账号丢了,现在重新写好这个博客. 众所周知,自从HTML5串红后,JS的的地位又一次提高了,对于这个门脚本语言来说,他的巅峰时刻快到了. JS的官方文档上说,JS是一门面向对象的语言,然而很多人在使用JS之后都觉得她是面向过程的.其实不然,
js实现贪吃蛇
snow_small的博客
01-19 2万+
思想：1、设计蛇：属性有宽、高、方向、状态（有多少节），方法：显示，跑2、设计食物：属性宽、高3、显示蛇：根据状态向地图里加元素4、蛇跑起来：下一节到前一节的位置，蛇头根据方向变，删除原来的蛇，新建蛇；当出界时，死亡，初始化；当蛇头吃到自己的时候，死亡，初始化5、食物被吃掉，蛇加一节，去掉原来的食物，生成新的食物6、添加定时器，绑定按键 <meta name="viewpor
Java贪吃蛇（附完整代码下载链接）-跟随狂神一天完成
K_sir_7的博客
07-18 1268
视频教程与源码地址（原版） 狂神说视频：https://www.bilibili.com/video/BV1HE41127CV 狂神说源码：https://gitee.com/kuangstudy 成果展示与源码地址（改版） 我的视频：https://www.bilibili.com/video/BV19w411d73b 改版源码：https://cloud.189.cn/web/share?code=N7FjMjnmEJFv Java环境配置 JDK8下载地址：https://www.oracle.
【JavaScript高级】贪吃蛇
ljs_coding
03-26 169
面向对象的贪吃蛇实现 1 工具对象(Tools.js) 因为要随机生成食物，所以先将生成min-max范围内随机整数的方法提取出来。randomNum属性就是生成的随机数。 function Tools(min,max){ min = Math.ceil(min); max = Math.floor(max); this.randomNum=Math.floor(Math....
原生JavaScript实现贪吃蛇
zyxczyf123的博客
04-12 124
使用原生JavaScript实现贪吃蛇，代码如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
教你如何用JavaScript写个贪吃蛇出来(超详细)
qq_40060770的博客
03-15 1万+
贪吃蛇大家都玩过，但你会制作嘛？听起来好像很难的样子，其实非常的简单，话不多说直接上代码 我们先把dom结构写出来 <div id="content"> <div id="snake"> <div class="box head"></div> &...
js开发实现简单贪吃蛇游戏（20行代码）
热门推荐
程序猿开发日志【学习永无止境】
03-30 8万+
曾经诺基亚的贪吃蛇风靡一时，在游戏匮乏的年代，用java实现太难，现在网页制作20行代码就做成一个简单的demo了，时代在进步啊 代码： 01 <!doctype html> 02 html> 03 body> 04 ca
JavaScript实现贪吃蛇游戏
明哥
03-21 1505
1、贪吃蛇初级bate1效果图： 1、贪吃蛇初级bate1源码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇初级</title> <style> * { margin: 0; padding: 0; }

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值