javascript_贪吃蛇_面向过程的写法

最新推荐文章于 2022-08-16 21:45:54 发布
最新推荐文章于 2022-08-16 21:45:54 发布
阅读量427 收藏 3
点赞数
分类专栏： JavaScript从入门到精通 文章标签： javascript web前端开发 web应用 web开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiang7701037/article/details/78963570
版权


效果图：



素材：




代码：

<!doctype html>
<html>
	<head>
		<title></title>
		<meta charset = "utf-8"/>
	</head>

<style type="text/css">
#map{
	position:relative;
	left:50px;
	top:50px;
	width:500px;
	height:400px;
	background-image:url(images/bg.jpg);
}

</style>	

<script type="text/javascript">

//
//需求：
//1、首先要有地图（蛇的场所），
//2、有蛇（）
//3、食物


//地图的数据
//地图的初始值;
var mapWidth;// mapWidth要是unitSize的整数倍
var mapHeight;// mapWidth要是unitSize的整数倍


//蛇的数据
//定义一个数组，数组里保存这蛇身体每一节的坐标；
var bodyArr = [];//第一个元素是蛇头；
			
//身体每一节的尺寸
var unitSize=30;
//蛇的初始长度;
var initLength=6;
//蛇的当前方向
var direction="右";
//蛇的速度；
var speed = 100;
//改变方向后，是否走过一节;
var isGoStep=false;
var snakeTimer=null;


//食物的数据
var food = {
			left:-100,
			top:-100
		};

//初始化函数(初始化的意思就是程序一开始运行时，相关的变量以及外观的初始状态)
function init(){
	//1、初始地图
	mapWidth = 600;// mapWidth要是unitSize的整数倍
	mapHeight = 300;// mapWidth要是unitSize的整数倍;
	with(document.getElementById("map")){
		style.width = mapWidth+"px";
		style.height = mapHeight+"px";
		style.backgroundImage="url(images/bg.jpg)";
	}
	
	//2、初始蛇
	unitSize=30;
	initLength=4;
	direction="右";
	speed = 500;
	
	//希望蛇初始是横向的；
	//头是数组的第一个元素；[{90,0},{60,0},{30,0},{0,0}]
	//初始化的是数组的内容
	for(var i=0;i<initLength;i++){
		var unit = {left:(initLength-i-1)*unitSize,top:0}; //把数组第一个元素作为头；
		bodyArr.push(unit);
	}
	//初始化外观
	var map = document.getElementById("map");
	//1)、头
	var bodyDiv = document.createElement("div");//产生身体的一个单元
	bodyDiv.id="bodyUnit1"; //蛇头的id为bodyUnit1
	bodyDiv.style.cssText="position:absolute;left:"+bodyArr[0].left+"px;top:"+bodyArr[0].top+"px;width:"+unitSize+"px;height:"+unitSize+"px;";
	bodyDiv.style.backgroundImage="url(images/head.png)";
	map.appendChild(bodyDiv);
	
	//身体除头以外的其它节
	for(var i=1;i<bodyArr.length;i++){
		var bodyDiv = document.createElement("div");//产生身体的一个单元
		bodyDiv.id="bodyUnit"+(i+1); //蛇头的id为bodyUnit1//[{60,0},{40,0},{20,0},{0,0}]
		bodyDiv.style.cssText="position:absolute;left:"+bodyArr[i].left+"px;top:"+bodyArr[i].top+"px;width:"+unitSize+"px;height:"+unitSize+"px";
		bodyDiv.style.backgroundImage="url(images/body.png)";
		map.appendChild(bodyDiv);
	}
	direction="右";
}
		
//走一步(改变蛇身体上每一节的坐标)
function goStep(){
	//1、先改变数组的数据
	//1)、把数组中除了蛇头以外的其它节进行修改；
	for(var i=bodyArr.length-1;i>0;i--){   //
		bodyArr[i].left = bodyArr[i-1].left;
		bodyArr[i].top = bodyArr[i-1].top;
	}
	//2)、改变蛇头；(考虑方向)
	with(bodyArr[0]){
		switch(direction){
			case "左":left=left-unitSize; break;
			case "上":top =top-unitSize; break;
			case "右":left=left+unitSize; break;
			case "下":top =top+unitSize; break;
			default:;
		}
	}
	
	isGoStep=true;
	var head = bodyArr[0];
	
	//3、判断蛇头是否和食物的坐标重合；
	if(head.left==food.left && head.top==food.top){
		//吃；
		eat();
	}
	
	//4、判断蛇头和边界以及自身是否有重合，如果有，则gameover
	//出边界
	if(head.left<0 || head.left>mapWidth-unitSize || head.top<0 || head.top>mapHeight-unitSize){
			gameover();
			return;
	}
	
	//和身体的其它节比较
	for(var i=1;i<bodyArr.length;i++){
		if(head.left==bodyArr[i].left && head.top==bodyArr[i].top){
			gameover();
			return;
		}
	}
	
	//2、改变外观
	for(var i=0;i<bodyArr.length;i++){
		document.getElementById("bodyUnit"+(i+1)).style.left = bodyArr[i].left+"px";
		document.getElementById("bodyUnit"+(i+1)).style.top = bodyArr[i].top+"px";
	}
	
}

//游戏结束
function gameover(){
	//1、停定时器；
	if(snakeTimer!=null){
		clearInterval(snakeTimer);
	}
	//2、询问是否继续游戏
	if(confirm("亲，你怎么想不开呢？还要再来一局吗？")){
		//1、清扫战场；
		clearGame();
		//2、重新开始游戏
		startGame();
	}else{
		window.close();
	}
}

//清除地图上的一切的一切
function clearGame(){
	//清空数组
	bodyArr.length=0;
	var map = document.getElementById("map");
	map.innerHTML="";
}

//吃食物；
function eat(){
	//1、产生食物的新的坐标
	generateFoodLocation();//产生食物的坐标；
	var foodDiv = document.getElementById("foodId");
	foodDiv.style.cssText="position:absolute;left:"+food.left+"px;top:"+food.top+"px;width:"+unitSize+"px;height:"+unitSize+"px;background-image:url(images/food.png)";
	
	//2、蛇长长
	//1)、给数组里添加一个元素
	var newUnit={left:-100,top:-100};//
	bodyArr.push(newUnit);
	
	//2）、外观增加一个div(这是蛇身体新的一节)
	var bodyDiv = document.createElement("div");//产生身体的一个单元
	bodyDiv.id="bodyUnit"+bodyArr.length; //蛇头的id为bodyUnit1
	bodyDiv.style.cssText="position:absolute;left:"+newUnit.left+"px;top:"+newUnit.top+"px;width:"+unitSize+"px;height:"+unitSize+"px";
	bodyDiv.style.backgroundImage="url(images/body.png)";
	map.appendChild(bodyDiv);
	
}

//一直走
function go(){
	snakeTimer=setInterval("goStep()",speed);
}

//改变方向；
function changeDirection(code){
	switch(code){
		case 37:if(direction!="右" && isGoStep){direction="左";isGoStep=false;}break;
		case 38:if(direction!="下" && isGoStep){direction="上";isGoStep=false;}break;
		case 39:if(direction!="左" && isGoStep){direction="右";isGoStep=false;}break;
		case 40:if(direction!="上" && isGoStep){direction="下";isGoStep=false;}break;
		default:;
	}
}

//产生食物的坐标
function generateFoodLocation(){
	do{
		//1、随机产生一个坐标（产生的坐标要是 unitSize=20 倍数，即0，20,40,60…… 
							// left最大是地图宽度mapWidth(800)-unitSize）
							// top最大是地图高度mapHeight(400)-unitSize）
		food.left = parseInt(Math.random()*(mapWidth/unitSize))*unitSize;
		food.top = parseInt(Math.random()*(mapHeight/unitSize))*unitSize;
		var isRepeat=false;
		for(var i=0;i<bodyArr.length;i++){
			if(bodyArr[i].left==food.left && bodyArr[i].top==food.top){
				isRepeat=true;
				break;
			}
		}
		if(food.left<0 || food.top<0 ||food.left>=mapWidth ||food.top>=mapHeight){
			isRepeat = true;
		}
		console.log(food.left+","+food.top);
	}while(isRepeat==true);
	
	if(food.left<0 || food.top<0 ||food.left>=mapWidth ||food.top>=mapHeight){
		//console.log(food.left+","+food.top);
		clearInterval(snakeTimer);
		console.log("isRepeat="+isRepeat);
	}
	
}

//产生食物
function generateFood(){
	generateFoodLocation();
	
	//2、显示一个div
	var foodDiv = document.createElement("div");
	foodDiv.id="foodId";
	foodDiv.style.cssText="position:absolute;left:"+food.left+"px;top:"+food.top+"px;width:"+unitSize+"px;height:"+unitSize+"px;background-image:url(images/food.png)";
	document.getElementById("map").appendChild(foodDiv);
}

function startGame(){
	//1、初始化
	init();//初始化；
	//2、让蛇开始走动
	go();
	//3、产生食物
	generateFood();
}

window.οnlοad=function(){
	if(document.all){
		document.body.onkeydown = function(){
			changeDirection(event.keyCode);
		}
	}else{
		document.body.onkeydown = function(evt){
			changeDirection(evt.keyCode);
		}
	}
	//startGame();
}

function pauseGame(){
	clearInterval(snakeTimer);
	
}


function continueGame(){
	//go();
	startGame();
}


</script>

<body >
	<input type="button" value="暂停" οnclick="pauseGame()" />
	<input type="button" value="继续" οnclick="continueGame()" />
	<div id="map">
	</div>
</body>
</html>



田江
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 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
【用C++面向对象的思想以及STL完成贪吃蛇游戏】
q_2474932226的博客
03-09 534
用C++面向对象的编程思想以及STL完成的贪吃蛇游戏
贪吃蛇JS实现(超详细,万字解析版)
Prototype__God的博客
01-11 4572
本文是对B站尚硅谷TypeScript贪吃蛇项目的超详细解析。 原视频TypeScript讲的很好,很建议有时间去观看。对于时间不充裕的小伙伴。此文的目的就是让大家以少的时间得到大的收获。
利用JS实现贪吃蛇
weixin_63489869的博客
06-23 3711
利用js实现贪吃蛇的相关功能
面向对象和面向过程
L.的博客
01-28 171
面向过程：顾名思义，其中心意义在于“过程”二字，比如你要吃饭，那么首先是要选地，播种，施肥，成熟，收获，煮饭，然后才能吃饭，那么面向过程就是从开始到结束，分析出解决问题的需要的每一个步骤，然后用函数将这些步骤一个一个实现，使用的时候一个一个一次调用就行了。面向对象：同样的，你去饭店吃饭的时候，只需要对服务员说一句你要吃饭就行了，你不需要关心饭是怎么来的，这就是面向对象。那么面向对象就是把组成问题事务
小蛇_javascript_贪吃蛇_
10-01
在本项目中，我们探索的是一个基于JavaScript实现的贪吃蛇小游戏。这个小游戏是一个经典的编程示例，它展示了如何利用JavaScript、HTML和CSS这三种基本的Web开发技术来创建一个互动的游戏体验。以下是对这个项目的...
贪吃蛇游戏_javascript_贪吃蛇；_
09-29
通过学习和实践这个JavaScript贪吃蛇游戏，开发者不仅可以深入理解JavaScript的基础语法和面向对象编程，还能掌握事件处理、DOM操作、动画渲染等关键技能。此外，这个游戏还涉及到基本的算法设计，如队列数据结构...
tanchishe.rar_贪吃蛇_贪吃蛇 c语言
09-23
【贪吃蛇游戏详解】 贪吃蛇是一款深受全球玩家喜爱的经典游戏，它的基本玩法是控制一条不断移动的蛇，通过吃食物来增长身体长度。在这个“tanchishe.rar”压缩包中，我们找到了一个使用C语言编写的贪吃蛇游戏实现。...
tcs.rar_汇编贪吃蛇_贪吃蛇_贪吃蛇 汇编
09-19
标题中的“tcs.rar_汇编贪吃蛇_贪吃蛇_贪吃蛇 汇编”表明这是一个关于使用汇编语言编写的贪吃蛇游戏的项目。这个项目可能包含了源代码、说明文档和其他相关资源。汇编语言是计算机编程的基础语言之一，它直接对应...
tanchishe.zip_粗糙_贪吃蛇_贪吃蛇游戏
07-15
食物的生成是一个随机过程，我们可以设定一个固定的区域作为游戏区域，然后在此区域内随机选择一个未被蛇占据的位置作为食物。当蛇吃到食物后，需要更新食物的位置以保持游戏的进行。 此外，MATLAB提供了键盘事件...
威纶宏指令贪吃蛇游戏
04-14
威纶宏指令贪吃蛇游戏,完全是用威纶应用宏指令写的，很值得学习、研究！
javascript的贪吃蛇游戏(面向过程)
09-28
用javascript的贪吃蛇游戏,面向过程做的,没有非常完美,做了吃自己和穿墙的,网上看了资料和自己也想了一些,做下来感觉还不错,
js贪吃蛇游戏
08-22
有建议提出。希望大家交流交流 谢谢
纯JS写的贪吃蛇小游戏（前端初学者看，面向过程代码）
qq_36205941的博客
12-02 1175
贪吃蛇代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
原生JS 实现小游戏 贪吃蛇
m0_64191440的博客
08-16 3107
JS 超详细 贪吃蛇 案例 速速围观
19、面向过程编程
weixin_56691590的博客
07-30 744
编程范式 面向过程 函数式 匿名函数与lambda map、reduce、filter 一、编程范式 很多初学者在了解了一门编程语言的基本语法和使用之后，面对一个’开发需求‘时仍然会觉得无从下手、没有思路/套路，本节主题“编程范式”正是为了解决该问题，那到底什么是编程范式呢？ 编程范式指的就是编程的套路，打个比方，如果把编程的过程比喻为练习武功，那编程范式指的就是武林中的各种流派，而在编程的世界里常见的流派有：面向过程、函数式、面向对象等，本节我们主要介绍面向过程与函数式。 在正式介绍前，我们需要强调：
面向过程的程序设计
Time_xiaoxia的博客
10-13 1321
概念： 核心是“过程”二字，“过程”指的是解决问题的步骤，即先干什么再干什么，基于面向过程设计程序就好比在设计一条流水线，是一种机械式的思维方式。若程序一开始是要着手解决一个打的问题，面向过程的基本设计思路就是把这个大的问题分解成很多个小问题或子过程，这些子过程再执行的过程中继续分解，知道小问题足够简单到可以在一个小步骤范围内解决。 优点： 复杂的问题流程化，进而简单化（一个复杂的问题，分成一个个小的步骤去实现，是仙女小的） ...
JS贪吃蛇(超 -----详细过程学习)
weixin_45540188的博客
08-18 199
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #map { width: 800px; ...
面向过程的程序
weixin_44774647的博客
03-18 294
一个面向过程的程序应该包括： 1.对数据的描述 数据结构：指定数据的类型和数据的组织形式 2.对操作的描述 算法：操作步骤
面向过程方法实现贪吃蛇
最新发布
06-09
好的，下面是一个简单的面向过程方法实现贪吃蛇的示例代码： ```python import pygame import random # 初始化pygame pygame.init() # 定义游戏窗口尺寸 WIDTH = 600 HEIGHT = 600 # 定义贪吃蛇方块大小 BLOCK_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值