原生js 贪吃蛇(详细版加功能实现)

最新推荐文章于 2022-01-10 11:04:05 发布
最新推荐文章于 2022-01-10 11:04:05 发布
阅读量273 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JGD313/article/details/99057661
版权

//功能
1,碰撞到自己身体 游戏结束;
2,碰撞到墙壁 游戏结束
3,添加游戏的背景音乐,并且控制暂停和播放;
4,给蛇添加眼睛(两个眼睛);
5,设计项目的界面(开始游戏,暂停游戏,记录分数,选择关卡);/
/**HTML代码

<head>
	<meta charset="UTF-8">
	<style type="text/css">
		#bt {
			margin: 0;
			padding: 0;
			width: 800px;
			height: 600px;
			margin: 40px auto;
			position: relative;
			color: ;
		}
		
		img {
			width: 800px;
			height: 600px;
		}
		
		#hg {
			width: 200px;
			height: 100px;
			position: absolute;
			left: 300px;
			top: 250px;
		}
		
		input {
			font-size: 20px;
			width: 150px;
			height: 50px;
			margin: 10px auto;
			border-radius: 20%;
			font-family: "宋体";
			background: url(kaishi.jpg);
			background-size: 100%;
			overflow: hidden;
		}
	</style>
	<title></title>
</head>
<body bgcolor="wheat">
	<div id="bt"><img src="strat.jpg" />
		<div id="hg">
			<input type="button" id="id1" value="开始游戏" />
			<input type="button" id="id2" value="中级模式" />
			<input type="button" id="id3" value="困难模式" />
		</div>
	</div>
	<audio id="bgm1" autoplay="autoplay">
		<source src="1.mp3"></source>
	</audio>
	<script type="text/javascript" src="snake4.js">
	</script>
</body>

**js代码块
var div_map;   //创造地图的对象
var div_food;  //创造食物的对象
var div_foodf;
var div_foodo;
var div_snake; //创建蛇的对象
var sum=0;     //初始化的分数
var time;      //接收定时器的变量
var div_eye;   //创建眼睛的变量 
var div_an1;    //创建暂停继续
var sort;      //分数的div
var sor;       
var div;
var btn;
var bgm;
var bgm1;
window.onload=function(){
	
	div=document.getElementById('bt');
	btn=document.getElementById('hg');
	var id=document.getElementById('id1');
	var id2=document.getElementById('id2');
	var id3=document.getElementById('id3');
	
	id.onclick=function(){
		shili('url(tim.jpg)',300);
	}
	id2.onclick=function(){
		 shili('url(lans.jpg)' ,400);
	}
	id3.onclick=function(){
		shili('url(xue.jpg)',100);
	}
	 bgm=document.getElementById('bgm1') ;
	//console.log(bgm);
	bgm.autoplay='autoplay';
    function shili(m,n){
    //开始页面的隐藏	
	div.style.display='none';
	btn.style.display='none';
	//实例化地图
	div_map=new Map();
	div_map.backgroundImage=m;
	div_map.display()
	
	//实例化食物
	div_food=new Food();
	div_food.display()
	div_foodf=new Foodf();
	div_foodf.display();
	div_foodo=new Foodo();
	div_foodo.display();
	
	//实例化的蛇
	div_snake=new Snake(n);
	div_snake.display();
	div_snake.move();
	//实例化的眼睛
	div_eye=new Eye();
	div_eye.display();
	//实例化按钮
	div_an1=new Stop();
	div_an1.display();
	
	//计分板的创建
	sort=document.createElement('div');
	sort.style.position='absolute';
	sort.style.background='lightpink';
	sort.style.width=45+'px';
	sort.style.height=45+'px';
	
	sort.innerHTML='得分:';
	document.getElementsByTagName('body')[0].appendChild(sort);
	sort.style.margin='-420px 305px';
	
	sor=document.createElement('div');
	sor.innerHTML=sum;
	sor.style.position='absolute';
	sor.style.margin='2px auto';
	sort.appendChild(sor);
	//给body添加点击事件用来控制键盘的移动
	document.getElementsByTagName('body')[0].onkeydown=function(evevt){
		//console.log(event.keyCode);
		div_snake.setDirect(event.keyCode);
	}
  }

}
//创造地图对象
function Map(){
	//地图对象的属性
	this.width=800;
	this.height=600;
	this._map=null;
	this.backgroundImage=null;
	//地图对象的样式
	this.display=function(){
		this._map=document.createElement('div');
		this._map.style.background=this.backgroundImage;
		this._map.style.width=this.width+'px';
		this._map.style.height=this.height+'px';
		this._map.style.margin='40px auto';
		this._map.style.position='relative';
		document.getElementsByTagName('body')[0].appendChild(this._map);
	}
}
//创建食物对象
function Food(){
	//食物的属性
	this.width=20;
	this.height=20;
	this.color='darkmagenta';
	this.food=null;
	//x y用于后来蛇吃食物
	this.x=0;
	this.y=0;
	//食物的样式
	this.display=function(){
		//解决蛇碰到食物后,食物随机重复出现
		if(this.food==null){
		this.food=document.createElement('div');
		this.food.style.width=this.width+'px';
		this.food.style.height=this.height+'px';
		this.food.style.background=this.color;
	    this.food.style.position='absolute';
	   // this.food.style.borderRadius='50%';
		div_map._map.appendChild(this.food);
		}
		this.x=Math.round(Math.random()*39);
		this.y=Math.round(Math.random()*29);
		this.food.style.left=this.x*this.width+'px';
		this.food.style.top=this.y*this.height+'px';
	}
}
function Foodf(){
	//食物的属性
	this.width=20;
	this.height=20;
	this.color='red';
	this.x1=0;
	this.y1=0;
	this.food=null;
	this.display=function(){
		if(this.food==null){
		this.food=document.createElement('div');
		this.food.style.width=this.width+'px';
		this.food.style.height=this.height+'px';
		this.food.style.background=this.color;
	    this.food.style.position='absolute';
//	    this.food.style.borderRadius='50%';
		div_map._map.appendChild(this.food)
		}
		this.x1=Math.round(Math.random()*39);
		this.y1=Math.round(Math.random()*29);
		this.food.style.left=this.x1*this.width+'px';
		this.food.style.top=this.y1*this.height+'px';
	}
}
function Foodo(){
	//食物的属性
	this.width=40;
	this.height=40;
	this.color='red';
	this.x2=0;
	this.y2=0;
	this.food=null;
	
	this.display=function(){
		if(this.food==null){
		this.food=document.createElement('div');
		this.food.style.width=this.width+'px';
		this.food.style.height=this.height+'px';
		this.food.style.background=this.color;
	    this.food.style.position='absolute';
	    this.food.style.borderRadius='50%';
		div_map._map.appendChild(this.food)
		}
		this.x2=Math.round(Math.random()*19);
		this.y2=Math.round(Math.random()*14);
		this.food.style.left=this.x2*this.width+'px';
		this.food.style.top=this.y2*this.height+'px';
	}
}
//创建蛇的对象 n传递速度的参数
function Snake(n){
	this.width=20;
	this.height=20;
	this.direct=null;
//二维数组用来存储蛇的数据
    this.snakeArr=[
    [6,2,null,'pink'],
    [5,2,null,'pink'],
    [4,2,null,'pink']
    ];
//蛇的显示方法
   this.display=function(){
   	for(var i=0;i<this.snakeArr.length;i++){
   		//解决了蛇移动时一直增加
   		if(this.snakeArr[i][2]==null){
   		this.snakeArr[i][2]=document.createElement('div');
   		this.snakeArr[i][2].style.width=this.width+'px';
   		this.snakeArr[i][2].style.height=this.height+'px';
   		this.snakeArr[i][2].style.background=this.snakeArr[i][3];
   		this.snakeArr[i][2].style.position='absolute';
   		this.snakeArr[i][2].style.borderRadius='50%';
   		div_map._map.appendChild(this.snakeArr[i][2]);
   		}
   		this.snakeArr[i][2].style.left=this.snakeArr[i][0]*this.width+'px';
   		this.snakeArr[i][2].style.top=this.snakeArr[i][1]*this.height+'px';
   	}
   }
   //传递按钮的键码
   this.setDirect=function(code){
   	switch(code){
   		case 37:
   		//console.log('zuo');
// 		this.snakeArr[0][0]-=1;
    if(this.direct!='right'){
   		          
     		this.direct='left';
     		this.snakeArr[0][2].style.transform='rotateZ(180deg)'; }''
   		break;
   		case 38:
	if(this.direct!='down'){
   		//console.log('上')
     		this.direct='up'
     		this.snakeArr[0][2].style.transform='rotateZ(-90deg)';}
   		break;
   		case 39:
   		//console.log('右')
		if(this.direct!='left'){
     		this.direct='right';
     		this.snakeArr[0][2].style.transform='rotateZ(0deg)';}
   		break;
   		case 40:
   		//console.log('下')
	if(this.direct!='up'){
     		this.direct='down';
     		this.snakeArr[0][2].style.transform='rotateZ(90deg)';}
   		break;
   		default:
   		alert('请按住键盘')
   		break;
   	}
   }
   //通过按钮的键码控制蛇的移动
   this.move=function(){
   	//解决蛇叠加
   	if(this.direct!=null){
   		  //让后面的蛇节的坐标等于前面蛇节的坐标
   	for(var i=this.snakeArr.length-1;i>0;i--){
   		this.snakeArr[i][0]=this.snakeArr[i-1][0];
   		this.snakeArr[i][1]=this.snakeArr[i-1][1];
   		
   	}
   	  switch(this.direct){
   	  	case 'left':
   	  	this.snakeArr[0][0]-=1;
   	  	break;
   	  	case 'up':
   	  	this.snakeArr[0][1]-=1;
   	  	break;
   	  	case 'right':
   	  	this.snakeArr[0][0]+=1;
   	  	break;
   	  	case 'down':
   	  	this.snakeArr[0][1]+=1;
   	  	break;
   	  	default:
   	  	break;
   	  }
   	  if(this.snakeArr[0][0]==div_foodf.x1&&this.snakeArr[0][1]==div_foodf.y1){
   	   	div_foodf.display();
   	   	sum-=1;
   	   	sor.innerHTML=sum;
   	   	var x=this.snakeArr[this.snakeArr.length-1][0];
   	   	var y=this.snakeArr[this.snakeArr.length-1][1];
   	   	div_map._map.removeChild(this.snakeArr[this.snakeArr.length-1][2]);
   	   	this.snakeArr.pop([x,y,null,'blue']);
   	   	div_snake.display();
   	   	a=document.createElement('audio')
   	    a.src='../img/7.mp3';
   	    a.play();
   	    document.getElementsByTagName('body')[0].appendChild(a)
   	    console.log(a)
   	   }
   	  //蛇吃到食物增加身体;
   	   if(this.snakeArr[0][0]==div_food.x &&this.snakeArr[0][1]==div_food.y){
// 	   	bgm1.play();
   	   	div_food.display();
   	   	//记分
   	   	sum+=2;
   	   	sor.innerHTML=sum;
   	   	var x=this.snakeArr[this.snakeArr.length-1][0];
   	   	var y=this.snakeArr[this.snakeArr.length-1][1];
   	   	this.snakeArr.push([x,y,null,'pink'])
   	   	a=document.createElement('audio')
   	    a.src='../img/7.mp3';
   	    a.play();
   	    document.getElementsByTagName('body')[0].appendChild(a)
   	    console.log(a)
      }
   	   if(Math.pow(Math.abs(div_foodo.x2*div_foodo.width)-div_snake.snakeArr[0][0]*div_snake.width,2)+Math.pow(Math.abs(div_foodo.y2*div_foodo.height)-div_snake.snakeArr[0][1]*div_snake.height,2)<625){
   	    div_foodo.display();
   	   	//记分
   	   	sum+=4;
   	   	sor.innerHTML=sum;
   	   	var x=this.snakeArr[this.snakeArr.length-1][0];
   	   	var y=this.snakeArr[this.snakeArr.length-1][1];
   	   	this.snakeArr.push([x,y,null,'pink']);
   	   	this.snakeArr.push([x,y,null,'pink']);
   	   a=document.createElement('audio')
   	   a.src='../img/7.mp3';
   	   a.play();
   	   document.getElementsByTagName('body')[0].appendChild(a)
   	   console.log(a)
      }
   	   //撞到墙壁死亡
   	   if(this.snakeArr[0][0]==40||this.snakeArr[0][1]==30||this.snakeArr[0][0]==-1||this.snakeArr[0][1]==-1){
   	   alert('Game Over!');
   	   	
   	   	if(confirm('是否重新开始')){
   	   	window.location.reload();
   	   }else{
   	   	return false;//阻止程序继续运行
   	   }
     }
}
   	//撞到自己后死亡
   	for(var i=1;i<this.snakeArr.length;i++){
   	   		if(this.snakeArr[0][0]==this.snakeArr[i][0]&&this.snakeArr[0][1]==this.snakeArr[i][1])
   	   		{
   	   				
   	   	if(confirm('是否重新开始')){
   	   	window.location.reload();
   	   
   	   }else{
   	   	return false;//阻止程序继续运行
   	   }
   	   		}
   	   		}
   	   		
   	  div_snake.display();
   	  time=setTimeout('div_snake.move()',n);
   }
}
//创建蛇的眼睛
function Eye(){
	this.width=5;
	this.height=5;
	this.color='green';
	this.eyeArr=[[1,0,null,' aquamarine'],
	             [1,0,null,' aquamarine']];
	this.display=function(){
		for(var i=0;i<this.eyeArr.length;i++){
			this.eyeArr[i][2]=document.createElement('div');
			this.eyeArr[i][2].style.width=this.width+'px';
			this.eyeArr[i][2].style.height=this.height+'px';
			this.eyeArr[i][2].style.background=this.color;
			this.eyeArr[i][2].style.margin='2px  auto';
			this.eyeArr[i][2].style.borderRadius='60%'
			div_snake.snakeArr[0][2].appendChild(this.eyeArr[i][2]);
	}
  }	
}
//按钮的暂停和继续
function Stop(){
	var num = 0;
	this.display=function(){
		this.an=document.createElement('button');
		this.an.style.width=50+'px';
		this.an.style.height=50+'px';
		this.an.style.background='pink';
		this.an.innerHTML='暂停按钮';
		this.an.style.position='absolute';
	    this.an.style.margin='-550px 300px';
	    this.an.style.overflow=' hidden';
		document.getElementsByTagName('body')[0].appendChild(this.an);
		
		this.an.onclick=function(){
			if(num==0){
				clearTimeout(time);
				bgm.pause();
				num=1;
			}else{
				div_snake.move();
				bgm.play();
				num = 0;
			}
		}
	}
}
**
【C/C++】10分钟教你用C++写一个贪吃蛇附带AI功能（附源代码详解和下载）
infinitor的博客
07-29 2698
C++编写贪吃蛇小游戏快速入门 刚学完C++。一时兴起，就花几天时间手动做了个贪吃蛇，后来觉得不过瘾，于是又加入了AI功能。希望大家Enjoy It. 效果图示 AI模式演示 imageimage 整体规划+原理 image 大体上可以分为图上所示的几个类。不过……怎么看都有点强行面向对象的味道在里面。。[哭笑][哭笑][哭笑]。不管了……代码写得可能有点凌乱，下面我会为大家一一讲解...
js贪吃蛇完整版简单易懂
weixin_44255794的博客
09-25 557
直接开始 效果图: 项目结构:图片自己找的 1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } </style> </head> <bo
JS实现简单的贪吃蛇小游戏
qq_27905183的博客
04-10 4326
网页布局框架搭建:<!Doctype html> <html> <head> <title>贪吃蛇小游戏</title> <meta http-equiv="content-Type" content="text/html;charset=gbk" /> <meta http-equiv="Window-target" content="_to
JavaScript实现一个简单的贪吃蛇游戏
fushuangdage的博客
08-22 339
我就不简述了,基本都写在备注里了<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <script type="application/javascript"> window.onload = function () {
JavaScript实现贪吃蛇小游戏
热门推荐
leihao-lester
11-05 1万+
JavaScript实现贪吃蛇小游戏 功能概述 本程序实现了如下功能： 贪吃蛇的基本功能 统计得分 开始与暂停 选择难度等级 设置快捷键 5.1 通过ijkl，wsad也能实现方向的切换 5.2 通过“P” 表示暂停，“C”表示开始或继续，"R"表示重新开始 实现过程 最开始的实现原理其实是参考的csdn的一位大神，他用JavaScript20行就实现了贪吃蛇的基本功能，难等可贵的是还没有bug，链接在此 要实现贪吃蛇大概有以下几个步骤： 画一个蛇的移动区域 画一条蛇 画食物 让蛇
原生js贪吃蛇源码，采用canvas实现
最新发布
03-20
蛇的移动和食物的生成都是通过 JavaScript 代码实现的。玩家可以通过方向键控制蛇的移动方向。游戏循环通过 setInterval 函数实现，每隔一定时间更新一次游戏状态并重新绘制游戏画面。总共有五关，每关对应不同的...
纯原生js实现贪吃蛇游戏
12-02
本文实例为大家分享了js实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>贪吃蛇游戏</...
原生JS 实现贪吃蛇
11-11
通过以上这些技术的综合运用，我们能够创建一个完整的、功能完善的原生JavaScript贪吃蛇游戏。在实践过程中，不仅巩固了JavaScript的基本功，也提升了对游戏逻辑和用户交互的理解。对于想要提升JavaScript编程能力的...
原生JS贪吃蛇游戏实战开发
06-10
在本项目中，我们将深入探讨如何使用原生JavaScript来实现一个经典的H5游戏——贪吃蛇。这个项目适合对JavaScript有一定基础，想要提升Web全栈技能的开发者。通过实际操作，我们可以了解到游戏开发的基本原理，以及...
js编写贪吃蛇游戏（完整无错可运行源码）
10-05
源码分享，完整可运行，轻量级，兼容性好，浏览器直接点开则可运行。
30行js代码实现贪吃蛇
11-01
纯js代码完成，js代码总行数28行，欢迎大家用来参考学习。如果发现有什么不足之处，欢迎各路大佬指定。
贪吃蛇功能说明书（初稿）
aimw32773的博客
11-01 2394
贪吃蛇（单词版）软件功能说明书 1 开发背景 “贪吃蛇”这个游戏对于80,90后的人来说是童年的记忆，可以将其说为是一个时代的经典，实现了传统贪吃蛇的游戏功能；现在人们对英语的重视程度越来越深，现在的小孩子在幼儿园的时候就接受了简单的英语教学，熟记较多的英语单词对英语的学习起着巨大的积极作用，市面上的英语单词背记软件对于初高中学生来说易于接受，但是对于小学及以下的学生来说，这些软...
贪吃蛇小游戏得分html,JS实现贪吃蛇游戏
weixin_42131790的博客
06-04 865
本文实例为大家分享了JS实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下html部分：贪吃蛇小游戏css部分：.content{width: 640px;height: 640px;margin: 50px auto;position: relative;}.btn{width: 100%;height: 100%;position: absolute;left: 0;top: 0;backgr...
原生js贪吃蛇加暂停和倍速功能以下是1.0版本
zxy15946565183的博客
03-07 1455
先体验为敬：188.131.132.214/snake.html 2.0版本在我的github上https://github.com/zxy1131167456/snake github上有原图片，欢迎clone~fork   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt;   &lt;head&gt; &lt;meta charset="...
HTML+js实现贪吃蛇小游戏（内含完整代码）
木牛的博客
01-10 1442
案例分析 看图拆解游戏 首先我们根据图片上的内容把这个游戏拆解成几个部分去单独看： 最外面的大盒子包裹着内容加边框限制蛇的活动范围，整个范围可以看成由许多小方格排列构成的，例如这样子的：； 两个按钮，一个控制开始游戏，一个控制游戏中途的暂停继续功能； 盒子里面有可以移动的蛇，最开始状态的蛇分为蛇头、蛇身、蛇尾三个部分，蛇只能走直线，通过上⬆下⬇左⬅右⬅的功能键去控制蛇的走向； 还有一个随机产生在限制区域内的食物； 这个游戏是当点击开始游戏按钮才显示蛇和食物的，所以最开始我们不在结构里面书写，
java贪吃蛇计时器_Java实现贪吃蛇游戏（1小时学会）
weixin_39879522的博客
02-13 1675
今天就来拿贪吃蛇小游戏来练练手吧！贪吃蛇游戏规则：1.按下空格键(游戏未结束)则游戏暂停或开始；2.按下空格键(游戏结束后)则游戏重新开始；3.当贪吃蛇的头部撞到身体时则贪吃蛇死亡(游戏结束)；4.当贪吃蛇的头部撞到墙时贪吃蛇死亡(游戏结束)；游戏界面效果：我们可以看到自己的贪吃蛇吃了多少食物，以及游戏得分。下面是游戏效果图：源码(注释超详细，注意ImageDate类中的material是一个包名...
原生JS实现贪吃蛇——项目总结
chenyu-max
09-11 1545
项目准备 项目展示图 建立新文件夹，新建出images CSS JS 三个文件夹，并在根目录下创建出index.html 将下列素材图片转到images文件中 接下来可以开始着手操作了 HTML结构 游戏内容区域 （content） 游戏开始按钮 （btn startBtn） 游戏暂停按钮 （btn pauseBtn） 游戏进行区域 （snakeWrap） 可以构造出如下的结构 <div class="content"> <div class="b
原生JS实现网页版贪吃蛇游戏教程
资源摘要信息:"JS网页版贪吃蛇小游戏，原生JS" 知识点概述： 本资源描述了一个使用原生JavaScript开发的网页版贪吃蛇小游戏。贪吃蛇游戏作为一种经典的游戏模式，在许多平台上都有实现版本，其中基于Web技术的实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值