贪吃蛇案例

最新推荐文章于 2024-05-10 20:27:25 发布
最新推荐文章于 2024-05-10 20:27:25 发布
阅读量564 收藏 2
点赞数 2
分类专栏： 贪吃蛇 文章标签： 贪吃蛇
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43551373/article/details/85238445
版权

思想：

1、设计蛇：属性有宽、高、方向、状态（有多少节），方法：显示，跑

2、设计食物：属性宽、高

3、显示蛇：根据状态向地图里加元素

4、蛇跑起来：下一节到前一节的位置，蛇头根据方向变，删除原来的蛇，新建蛇；当出界时，死亡，初始化；当蛇头吃到自己的时候，死亡，初始化

5、食物被吃掉，蛇加一节，去掉原来的食物，生成新的食物

6、添加定时器，绑定按键
代码：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#wrap{
				width: 500px;
				height: 150px;
				margin: auto;
			}
		</style>
		<script src="js/demo.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="wrap">
			<audio id="music" autoplay="autoplay">
				<source src="img/yinxiao197.mp3" type="audio/mp3"></source>
			</audio>
			<h1 >贪吃蛇游戏</h1>
			<!-- 暂停按钮 -->
		    <input id="stop" type="button" name="name" value="暂停">
		    <!-- 开始按钮 -->
		    <input id="Start" type="button" name="name" value="开始">
		    <!-- 刷新(重新开始游戏) -->
		    <input id="Refresh" type="button" name="name" value="刷新">
			
			<p style="font-size:20px;color:red"> 得分：<span id="score" style="color:black">0</span> </p>
		</div>
	</body>
</html>

js代码

//创建地图
var map_01;
//食物
var food_01;
//蛇
var snake_01;
//分数
var sum=0;
//音乐
var music;
//定时器
var movetimer;
function  _map(){
	this.width=600;
	this.height=400;
	this.color='plum';
	this.div_map=null;
	this.display=function(){
		this.div_map=document.createElement('div');
		this.div_map.style.width=this.width+'px';
		this.div_map.style.height=this.height+'px';
		this.div_map.style.background=this.color;
		this.div_map.style.margin='auto';
		this.div_map.style.position = 'relative';
		
		document.getElementsByTagName('body')[0].appendChild(this.div_map);
	}
}
//创建食物
function _food(){
	this.width=20;
	this.height=20;
	this.color='blue';
	this.div_food=null;
	this.x;
	this.y;
	this.display=function(){
		if (this.div_food==null) {
			this.div_food=document.createElement('div');
			this.div_food.style.width=this.width+'px';
			this.div_food.style.height=this.height+'px';
			this.div_food.style.background=this.color;
			this.div_food.style.borderRadius='50%';
			this.div_food.style.position = 'absolute';
			map_01.div_map.appendChild(this.div_food);
			
		}
		this.x=Math.round(Math.random()*29);
		this.y=Math.round(Math.random()*19);
		this.div_food.style.left=this.x*this.width+'px';
		this.div_food.style.top=this.y*this.height+'px';
		
	}
}
//创建蛇
function _snake(){
	this.width=20;
	this.height=20;
	this.color='tomato';
	this.direct='right';
	var lefteye;
	var righteye;
	this.body=[[5,4,null,'red','eyes'],[4,4,null,'orange'],[3,4,null,'orange']]
	this.display=function(){
		for(var i=0;i<this.body.length;i++){
			if(this.body[i][2]==null){
				this.body[i][2]=document.createElement('div');
				this.body[i][2].style.width=this.width+'px';
				this.body[i][2].style.height=this.height+'px';
				this.body[i][2].style.background=this.body[i][3];
				this.body[i][2].style.position='absolute';
				this.body[i][2].style.borderRadius='50%';
					
				map_01.div_map.appendChild(this.body[i][2]);
			}
			this.body[i][2].style.left=this.body[i][0]*this.width+'px';
			this.body[i][2].style.top=this.body[i][1]*this.height+'px';
			
		}
		if (lefteye==null ||righteye==null) {
			lefteye=document.createElement('div');
			righteye=document.createElement('div');
			
			lefteye.style.width=5+'px';
			lefteye.style.height=5+'px';
			lefteye.style.backgroundColor='black';
			lefteye.style.borderRadius='50%';
			lefteye.style.position='absolute';
			righteye.style.width=5+'px';
			righteye.style.height=5+'px';
			righteye.style.backgroundColor='black';
			righteye.style.borderRadius='50%';
			righteye.style.position='absolute';
			
			this.body[0][2].appendChild(lefteye);
			this.body[0][2].appendChild(righteye);
		}
		if (this.body[0][2]) {//判断蛇头
			switch (this.direct){
				case 'right':
				   lefteye.style.top=3+'px';
				   lefteye.style.left=8+'px';
				   righteye.style.top=13+'px';
				   righteye.style.left=8+'px';
					break;
				case 'left':
				   lefteye.style.top=3+'px';
				   lefteye.style.left=8+'px';
				   righteye.style.top=13+'px';
				   righteye.style.left=8+'px';
					break;
				case 'up':
				   lefteye.style.top=8+'px';
				   lefteye.style.left=3+'px';
				   righteye.style.top=8+'px';
				   righteye.style.left=13+'px';
					break;
				case 'down':
				   lefteye.style.top=8+'px';
				   lefteye.style.left=3+'px';
				   righteye.style.top=8+'px';
				   righteye.style.left=13+'px';
					break;
				default:
					break;
			}
		}
	}
	//创建一个方法记录蛇的的方向
	this.Direct=function(direct){
		switch (direct){
			case 37:
			     this.direct='left';
				break;
			case 38:
			     this.direct='up';
				break;
			case 39:
			     this.direct='right';
				break;
			case 40:
			     this.direct='down';
				break;
			default:
				break;
		}
	}
	//创建一个蛇移动的方法
	this.move=function () {
		for (var i=this.body.length-1;i>0;i--) {
			//alert(this.body.length);
			this.body[i][0]=this.body[i-1][0];
			this.body[i][1]=this.body[i-1][1];
		}
		switch (this.direct){
			case 'left':
			    this.body[i][0]--;
				break;
			case 'right':
			    this.body[i][0]++;
				break;
			case 'up':
			    this.body[i][1]--;
				break;
			case 'down':
			    this.body[i][1]++ ;
				break;
			default:
				break;
		}
		//吃到东西
		if(this.body[0][0]==food_01.x &&this.body[0][1]==food_01.y){
			//吃完加一节蛇身
			var length=this.body.length-1;
			var x=this.body[length][0];
			var y=this.body[length][1];
			this.body.push([x,y,null,'blue']);
			food_01.display();
			sum++;
			document.getElementById('score').innerHTML=sum;
		}
		//碰墙死
		if (this.body[0][0]>29 ||this.body[0][0]<0 ||this.body[0][1]>19 ||this.body[0][1]<0) {
			music.pause();
			alert('你死了');
			return;
		}
		//吃到自己死
		for (var i=1;i<this.body.length;i++) {
			if (this.body[0][0]==this.body[i][0] && this.body[0][1]==this.body[i][1]) {
				music.pause();
				alert('吃到自己死');
				return;
			}
		}
		snake_01.display();
		movetimer= setTimeout('snake_01.move();',200);
	}
}
window.onload=function(){
	//音乐
    music=document.getElementById('music');
    //music.play();
	map_01=new _map();
	map_01.display();
	food_01=new _food();
	food_01.display();
	snake_01=new _snake();
	snake_01.display();
	snake_01.move();
	document.getElementsByTagName('body')[0].onkeydown=function(event){
		snake_01.Direct(event.keyCode);
	}
         //暂停
        var stop = document.getElementById('stop');
        stop.onclick=function(){
        	clearTimeout(movetimer);
        }
        //开始
		var start = document.getElementById('Start');
		start.onclick=function(){
			clearTimeout(movetimer);
			movetimer= setTimeout('snake_01.move();',200);
		}
		//刷新
		var refresh = document.getElementById('Refresh');
		refresh.onclick=function(){
			window.location.reload();
		}

}

 

 

森屿海岛
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
C++课程设计：贪吃蛇
茜茜西西的博客
07-26 1159
文末附下载链接
贪吃蛇（小案例）
qq_47735503的博客
12-05 193
贪吃蛇 待优化 资源类 获取图片 package snake01; import javax.swing.*; import java.net.URL; public class Data { //获取图片 public static URL headerURL=Data.class.getResource("statics/header.png"); public static ImageIcon header =new ImageIcon(headerURL);
JavaScript贪吃蛇案例
11-26
JavaScript贪吃蛇案例是一个经典的编程练习，用于学习和掌握JavaScript基础以及对象导向编程的概念。在这个案例中，我们可以通过分析和实现这个小游戏来深入理解JavaScript的关键技术。 首先，`案例贪吃蛇.html` 是...
Typescript的贪吃蛇案例
03-31
在“Typescript的贪吃蛇案例”中，我们可以学习到如何使用TypeScript来实现一个经典的贪吃蛇游戏。贪吃蛇游戏是许多初学者入门编程时会选择的项目，它涉及到基本的控制逻辑、碰撞检测和游戏循环等概念。 1. **静态...
C++实现贪吃蛇案例，实时
09-10
总的来说，这个贪吃蛇案例展示了C++在游戏开发中的应用，以及如何有效地使用STL来简化代码和提高效率。通过这个项目，开发者可以提升对C++语言、数据结构和算法的理解，以及实践面向对象编程和游戏逻辑设计的能力。
案例1：贪吃蛇
最新发布
Unity学习
05-10 647
(1)Hierarchy界面，右键-Create-2D Object-Sprites-Square 重命名为Wall，重置位置（Position），Y坐标改为10。(3)选中Wall（1），Ctrl+D，Position中Y改为0，Rotation中，Z改为90，Scale中，X改为20，Position中X改为-22；(4)Unity中出现Food Area变量框（承载刚体的物体），将Hierarchy面板中的Foodarea拉进右侧变量框（或按右侧图标选择）Scale中X=44，Y=20，选适当颜色。
JS-part15.2-贪吃蛇案例
晓葉斑比
09-14 127
Javascript贪吃蛇 贪吃蛇 1. 分析需求 + 我们把一个贪吃蛇拆成四个模块 1-1. 食物模块 - 生成一个食物, 随机一个位置 1-2. 蛇模块 - 生成一个蛇, 给蛇加一节, 移动, 判断吃到食物, 死亡 1-3. 游戏规则 - 跑的多快, 游戏计分, 游戏怎么开始, 怎么结束, 吃到食物做什么, 撞墙做什么 1-4. 整合, 点击什么开始, 点击什么结束, ... 2. 书写食物模块 + 创建一个标签, 类名是 food + 计算一个位置
JavaScript之贪吃蛇小案例
qq_41320857的博客
07-30 424
模拟贪吃蛇小游戏 在写代码之前，先分析项目 1 地图 属性：宽，高，背景颜色 ！！因为小蛇和食物都是相对于地图显示的,这里小蛇和食物都是地图的子元素,随机位置显示,脱离文档流的,地图也需要脱离文档流--css需要设置:宽,高,背景颜色,脱标 2 食物-----div元素 elements----存储div的数组（便于以后删除，删除食物的div的时候，先从map中删除div，再从数组中删...
C#应用案例之贪吃蛇
你的小甜甜的博客
05-26 806
本次的应用案例用到为WPF 应用 需要解决的问题(过程) 1.创建蛇 这里我们可以封装一个方法(私有的)用来装蛇的头部和身体 为蛇设置初始出现的位置已及初始的移动方向 2.创建食物 也封装一个方法(私有的)用来装食物 食物应该随机的出现在游戏界面的任何地方 3.创建键盘事件用键盘的方向键来控制蛇的(上下左右)移动,并用计时器来控制蛇的移动 4.创建游戏开始和暂停的按钮 用来控制蛇移动的计时器的开和关 5.当蛇的头部碰撞到食物时,将食物随机到其他位置并为蛇创建一节新的身体(相当于蛇吃掉食物增加
javascript之贪吃蛇案例
代码解释生活
10-26 398
绘制背景：一个20*20 的背景平铺 绘制食物： 绘制小蛇： 小蛇移动：注意让尾巴先移动 防止重复创建小蛇 小蛇移动：
java贪吃蛇案例背景音乐实现
05-16
要在Java贪吃蛇游戏中添加背景音乐，可以使用Java Sound API。以下是实现步骤： 1. 将音频文件添加到项目中。可以使用.wav、.au、.aiff或.mid等格式的文件。 2. 在Java代码中导入javax.sound.sampled包。 3. 创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值