js 贪吃蛇

最新推荐文章于 2021-03-08 12:10:50 发布
最新推荐文章于 2021-03-08 12:10:50 发布
阅读量294 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/JGD313/article/details/98740456
版权

js实现的贪吃蛇,以下仅供参考:
贪吃蛇的需求分析:
1,构造一个蛇移动的地图 对象===>PC端的游戏 浏览器上运行的程序(JS)
(1)使用div 创建地图元素;
(2)添加到body中;
(3)设置地图元素的样式; JS实现
(4)调用地图显示的方法,从而显示浏览器

2,构造一个食物对象 ===>PC端的元素 浏览器上显示(地图div中显示)
(1)使用div创建食物元素;
(2)添加到地图的元素中去;
(3)设置食物的样式;
(4)调用食物显示的方法,从而显示在地图div中

3,创建一个蛇 对象 ===>现在地图div元素中
(1)创建二维数组: 用来构造蛇身,位置,颜色;
arrSnake=[
[9,8,null,‘red’],
[8,8,null,‘green’],
[7,8,null,‘green’]
];
(2)创建显示蛇的方法;
–>初始化蛇 3节 for循环 创建div元素;
–>添加 到地图的div中;
–>设置蛇的样式 (二维数组的数据访问) arrSnake[][]

(3)蛇的调用  显示蛇的方法(通过实例化的对象.显示蛇的方法名);
	display()===>声明  创建蛇对象中


(4)创建蛇移动方向的方法
	-->考虑: 通过哪种方式控制蛇的移动  键盘控制
	-->传递 键码到蛇移动方向的方法中去;
	-->使用蛇对象中的属性记录 蛇移动方向;
	
(5)创建蛇移动的方法
	-->考虑: 计时器控制蛇自动 移动过程中  全局属性记录的方向传递进该方法
	-->判断: 蛇的方向, 从而设置  蛇头移动, 紧接着蛇身以及蛇尾移动(for)(bug:蛇身叠加);
	-->最后  重点:  是调用蛇显示的 方法 从而才能改变蛇的位置(bug:蛇头重复的创建)
	-->添加计时器  重复调用  注意: 该函数在计时器中是使用对象调用. 不能直接调

var div_map;   //创造地图的对象
var div_food;  //创造食物的对象
var div_snake; //创建蛇的对象
var sum=0;     //初始化的分数
var time;      //接收定时器的变量
var div_eye;   //创建眼睛的变量 
var div_an1;    //创建暂停继续
var sort;      //分数的div
var sor;       
var div;
var btn;
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)no-repeat',300);
	}
	id2.onclick=function(){
		 shili('url(lans.jpg)
		 ',600);
	}
	id3.onclick=function(){
		shili('url(xue.jpg)no-repeat',100);
	}
	
	     
	var bgm=document.getElementById('bgm1') ;
	//console.log(bgm);
	bgm.autoplay='autoplay';
	

	//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_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.innerHTML='得分:';
	document.getElementsByTagName('body')[0].appendChild(sort);
	sort.style.margin='-400px 310px';
	
	sor=document.createElement('div');
	sor.innerHTML=sum;
	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='red';
	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';
	}
}
//创建蛇的对象 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_food.x &&this.snakeArr[0][1]==div_food.y){
   	   	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'])
      }
   	   //撞到墙壁死亡
   	   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,'green'],
	             [1,0,null,'green']];
	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 = true;
	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){
				clearTimeout(time);
				num=false;
			}else{
				setTimeout('div_snake.move()',n);
				num = true;
			}
		}
	}
}
JS贪吃蛇
csdn_jwdlh的博客
03-04 2652
JS贪吃蛇效果展示CSS样式index.htmlindex.css构造方格蛇的创造蛇的初始化蛇的运动创建和生成食物创建游戏逻辑按下键盘方向键控制蛇移动方向定时器开始游戏暂停游戏结束游戏 效果展示 CSS样式 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=
JavaScript贪吃蛇
原地起飞
11-24 5795
这篇文章不简单！！ 一、创建html结构 二、创建表格 三、创建蛇头、蛇身 四、创建食物 五、让蛇动起来 六、 控制蛇的方向 七、完整代码 index.html Game.js Snake.js Food.js 八、图片 九、总结 今天博主呕心沥血写了一个贪吃蛇的小游戏，整个过程从无到有简直扣人心弦。 接下来本博主就来好好说到说到这个过程！！ 话不多说，我们还是先来看看最后的呈现效果吧。 看完了才知道什么叫做操作，简直传奇！！ 接下来不吹牛来讲讲实际操...
JS版贪食蛇
04-18
NULL 博文链接：https://kenkao.iteye.com/blog/1835949
JS 贪吃蛇
anchenyanyue的专栏
09-24 525
snake function Snake(canvas){ this.canvas = canvas; this.length = 0; this.direction = 'down'; this.body = [], this.head = funct
Js贪吃蛇
qq_41043296的博客
03-08 1782
JS贪吃蛇 Js原生贪吃蛇：canvas HTML <canvas id="can"></canvas> #can{ background: #000000; height: 400px; width: 850px; } JS //公共板块 var blockSize = 10; //地图的高宽 var mapW = 300; var mapH = 150; //历史食物var var historyfood = new Array(); //食物数组
javascript贪吃蛇
01-22
瞎写的，很多功能没实现，比如暂停开始，本来想整合到一起
JS贪吃蛇游戏代码
12-01
【JS贪吃蛇游戏代码】是一款基于JavaScript编写的网页小游戏，它将经典的贪吃蛇玩法移植到了浏览器环境中，为用户提供了丰富的游戏体验。这款游戏代码结构清晰，适合学习和研究JavaScript编程，尤其是对于游戏开发感...
JavaScript贪吃蛇小游戏.zip
04-19
JavaScript贪吃蛇小游戏是一款基于网页的互动娱乐项目，利用JavaScript编程语言实现。JavaScript是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发，它允许在浏览器端执行代码，为用户提供动态交互的体验...
Javascript贪吃蛇
05-27
JavaScript贪吃蛇是一款基于网页的经典游戏，通过JavaScript编程语言实现，展现了JavaScript在游戏开发中的应用。这款游戏的原理是利用HTML作为展示界面，JavaScript处理游戏逻辑和用户交互，为玩家提供了一个简单但...
JavaScript版贪吃蛇
03-13
使用JavaScript中对象、定时器以及html5新增的Canvas标签等知识制作的一款纯js贪吃蛇游戏，大家下载来学习下
js写贪吃蛇
11-14
js写贪吃蛇，纯js和html 写的绝对可以用 用起来很方便
用JS做的贪吃蛇小游戏
12-04
用JSP做的贪吃蛇小游戏，下载后稍加修改就可以运行
js贪吃蛇
含笑
12-23 655
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS贪吃蛇-练习</title> <style type="text/css"> #pannel ta
JavaScript贪吃蛇游戏源码解析
JavaScript（简称JS）是一种高级的、解释型的编程语言，主要用于网页制作的交互式效果和网络应用的前端开发。由于它的跨平台性和内置在所有主流浏览器中的特性，使得它成为实现贪吃蛇这类小游戏的理想选择。 贪吃蛇...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值