js 贪吃蛇

最新推荐文章于 2024-08-29 12:21:32 发布
最新推荐文章于 2024-08-29 12:21:32 发布
阅读量91 收藏
点赞数
分类专栏： 原生js小游戏 文章标签： 游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46104664/article/details/113663220
版权

之前呢，写了一些简单的小游戏，拿出来和大家分享一下。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>snake</title>
<style type="text/css">
	body{
	font-weight:1200;
	text-align: center;
	}
	#title{
	font-size: 80px;
	color: red;
	}
	#score{
	font-size: 45px;
	/*text-align: right;*/
	color: blue;} 
	button{
		background-color: aqua;
		width: 160px;
		height: 80px;
		margin-right: 10%;
		font-size: 0.7em;
		font-weight: 200；
	}
	canvas{
	margin-bottom: 3%;
	border:2px solid #000000;
	background-color: transparent;
	}
	</style>
</head>
<body>
<h1 id="title">贪吃蛇</h1>
<p id="score"><button id="start">开始游戏</button>分数:0</p>
<canvas id="pic" width="800" height="400"></canvas>
<script type="text/javascript">
	var score=0;		//分数
	
	var canvas=document.getElementById("pic");
	var cxt=canvas.getContext('2d');
	
	//定义食物
	var food=new Object();
		food.width=20;
		food.height=20;
		food.randx=0;
		food.randy=0;
	
	//定义蛇身
	var snake=new Object();
		snake.x=100;
		snake.y=100;
		snake.h=20;
		snake.w=20;
		snake.lastdir=39;		//初始方向
	//this.snake.arrary=[410,100,430,100,450,100];
		
	
	//数组，用来存放蛇身
	var snakebody=[];
	
	//随机产生食物
	function randfood(){
		food.randx=parseInt(Math.random()*40)*20;
		food.randy=parseInt(Math.random()*20)*20;
		cxt.fillStyle='rgb('+parseInt(Math.random()*206)+','+parseInt(Math.random()*206)+','+parseInt(Math.random()*206)+')';
		cxt.fillRect(food.randx+0.5,food.randy+0.5,food.width-1,food.height-1);
		
		//检测食物是否与蛇身重合
		snakebody.forEach((item)=>{
			if(item.x===food.randx && item.y===food.randy){
				randfood();
			}else{
				return;
			}
		})
		
		}	
	
	
	function firstsnake(){
		cxt.fillStyle='rgb('+parseInt(Math.random()*206)+','+parseInt(Math.random()*206)+','+parseInt(Math.random()*206)+')';
		for(var i=0;i<3;i++){
			snake.x=snake.x+snake.w;
			snakebody.unshift({...snake});
		}
		snakebody.forEach((item)=>{
			cxt.fillRect(item.x+0.5,item.y+0.5,item.w-1,item.h-1);
			})
		}
	var button=document.getElementById("start");
	button.addEventListener('click',start);
	function start(){
		button.removeEventListener('click',start);
		randfood();
		firstsnake();
		var time=setInterval(i_move,200);	//设置自动移动速度，单位为毫秒
		function i_move(){
			switch(snake.lastdir)
			{
			case 38:
				snake.y=snake.y-snake.h;
				break;
			case 40:
				snake.y=snake.y+snake.h;
				break;
			case 37:
				snake.x=snake.x-snake.w;
				break;
			case 39:
				snake.x=snake.x+snake.w;
				break;
		}
			snakebody.forEach((item)=>{
			cxt.clearRect(item.x,item.y,item.w,item.h);
		})
			snakebody.unshift({...snake});
			if(snake.x===food.randx&&snake.y===food.randy){		//吃食检测
				
				randfood();
				cxt.fillStyle='rgb('+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+')';
				score++;
				document.getElementById("score").innerHTML="分数:"+score;
		}
		else{
			snakebody.pop();
		}
			
		if(snake.x>=800||snake.x<0||snake.y<0||snake.y>=400){
			clearInterval(time);
			alert("游戏结束！！！");
			cxt.clearRect(0,0,800,400);
		}
			//蛇头与蛇身的碰撞检测
		for(var i=1;i<snakebody.length;i++){
			if(snakebody[0].x===snakebody[i].x && snakebody[0].y===snakebody[i].y){
				alert('游戏结束！');
				clearInterval(time);
				cxt.clearRect(0,0,800,400);
			}
		}
			snakebody.forEach((item)=>{
			cxt.fillRect(item.x+0.5,item.y+0.5,item.w-1,item.h-1);
		})
		}
	document.addEventListener("keydown",(event)=>{   //键盘监听事件
		if(Math.abs(event.keyCode-snake.lastdir)===2)
			return;
		else{
			snake.lastdir=event.keyCode;
		}
		switch(event.keyCode)
		{
			case 38:
				snake.y=snake.y-snake.h;
				break;
			case 40:
				snake.y=snake.y+snake.h;
				break;
			case 37:
				snake.x=snake.x-snake.w;
				break;
			case 39:
				snake.x=snake.x+snake.w;
				break;
		}
		snakebody.forEach((item)=>{
			cxt.clearRect(item.x,item.y,item.w,item.h);
		})
		
		//增加蛇身长度，如果没吃到果实，则删除数组中最后一个，实现移动
		//如果吃到果实，不删除
		snakebody.unshift({...snake});
		if(snake.x===food.randx&&snake.y===food.randy){		//吃食检测
			randfood();
			cxt.fillStyle='rgb('+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+')';
			score++;
			document.getElementById("score").innerHTML="分数:"+score;
		}
		else{
			snakebody.pop();
		}
		if(snake.x>=800||snake.x<0||snake.y<0||snake.y>=400){
			clearInterval(time);
			alert("游戏结束！！！");
			cxt.clearRect(0,0,800,400);
		}
		
		//蛇头与蛇身的碰撞检测
		for(var i=1;i<snakebody.length;i++){
			if(snakebody[0].x===snakebody[i].x && snakebody[0].y===snakebody[i].y){
				alert('游戏结束！');
				clearInterval(time);
				cxt.clearRect(0,0,800,400);
			}
		}
		snakebody.forEach((item)=>{
			cxt.fillRect(item.x+0.5,item.y+0.5,item.w-1,item.h-1);
		})
		//up 38
		//down  40
		//left  37
		//right  39
		})
	}
	</script>
</body>
</html>
是落落呢
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript贪吃蛇
原地起飞
11-24 5668
这篇文章不简单！！ 一、创建html结构 二、创建表格 三、创建蛇头、蛇身 四、创建食物 五、让蛇动起来 六、 控制蛇的方向 七、完整代码 index.html Game.js Snake.js Food.js 八、图片 九、总结 今天博主呕心沥血写了一个贪吃蛇的小游戏，整个过程从无到有简直扣人心弦。 接下来本博主就来好好说到说到这个过程！！ 话不多说，我们还是先来看看最后的呈现效果吧。 看完了才知道什么叫做操作，简直传奇！！ 接下来不吹牛来讲讲实际操...
javaScript贪吃蛇
平安喜乐
11-16 4151
javaScript写的贪吃蛇，有注解和图片。
JS贪吃蛇
热门推荐
weixin_45820444的博客
08-21 1万+
用JS代码实现网页版贪吃蛇小游戏 老规矩，代码自用自取，复制粘贴直接使用，喜欢的话可以查看博主其它文章，贡献一丢丢的浏览量，感激不尽。 <!DOCTYPE html> <html> <head> <title>贪吃蛇</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"&g
js贪吃蛇学习心得
qq_44710456的博客
08-25 1648
视频学做js贪吃蛇的收获 前言：暑假一个人呆在寝室里面无聊，就在网上找了一段js代码学做贪吃蛇的视频，跟着敲完之后想对这次制作过程进行一次总结。 大体布局：背景图（留有运动空间），开始按钮，蛇头图片，蛇身图片，食物图片，计分图片。 运行原理大致概括：背景图片布满整个网页；开始按钮则位于最顶层（点击之后则自动消失且执行游戏开始的代码）；利用函数绘制蛇（包括头和身体），初始为向右运动，利用定时器函数刷...
javascript 贪吃蛇 源码
lsswear的专栏
11-23 336
js贪吃蛇基本原型：https://www.jb51.net/article/154869.htm 修改内容 可变速、成绩、障碍、多食物 流程解释： 创建三个类 snake、foods、barrier。snake 创建蛇身，管理蛇的运行。foods包含一个食物的分数和食物的显示。barrier创建障碍物。蛇运行时超出边界、碰到障碍物、碰到蛇身时游戏结束重置页面。蛇碰到食物时蛇身加长，可变速度，根据一个食物的分数加成绩。页面先显示障碍物，显示时需判断每条线起始位置和方向不重复。再显示食物和蛇身，蛇身可以
js实现贪吃蛇
m0_58730471的博客
01-28 1179
贪吃蛇
Js贪吃蛇
qq_41043296的博客
03-08 1741
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(); //食物数组
Js 贪吃蛇
忘川
08-22 291
<!DOCTYPE html> <html> <head> <title>贪吃蛇</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .backDiv { text-align: center; ...
使用js实现贪吃蛇
NEWonclick的博客
01-10 516
js 手写贪吃蛇.
JavaScript实现贪吃蛇
Sunblogy的博客
09-26 1288
用js实现一个贪吃蛇游戏， 要求： 1. 不能撞墙 2. 不能撞自己 3. 每吃一个食物就会加一分 4. 相撞后就结束游戏
javascript贪吃蛇
01-22
瞎写的，很多功能没实现，比如暂停开始，本来想整合到一起
JS贪吃蛇游戏代码
12-01
【JS贪吃蛇游戏代码】是一款基于JavaScript编写的网页小游戏，它将经典的贪吃蛇玩法移植到了浏览器环境中，为用户提供了丰富的游戏体验。这款游戏代码结构清晰，适合学习和研究JavaScript编程，尤其是对于游戏开发感...
JavaScript贪吃蛇小游戏.zip
04-19
JavaScript贪吃蛇小游戏是一款基于网页的互动娱乐项目，利用JavaScript编程语言实现。JavaScript是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发，它允许在浏览器端执行代码，为用户提供动态交互的体验...
Javascript贪吃蛇
05-27
JavaScript贪吃蛇是一款基于网页的经典游戏，通过JavaScript编程语言实现，展现了JavaScript在游戏开发中的应用。这款游戏的原理是利用HTML作为展示界面，JavaScript处理游戏逻辑和用户交互，为玩家提供了一个简单但...
unity 自定义功能快捷键
chillxiaohan的博客
08-27 854
自用贴，自定义功能对应的快捷键，组合键只添加了项目中需要的。
Unity坐标系计算3D中两直线的最短距离及最近点的几何原理
最新发布
薛文旺
08-29 269
Unity坐标系计算3D中两直线的最短距离及最近点的几何原理
【精品】计算机毕业设计之：springboot游戏分享网站（源码+文档+辅导）
程序员阿龙的博客
08-27 2063
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
从《黑神话：悟空》看中国3A游戏之路：历史回顾与未来展望
weixin_41496173的博客
08-27 1371
近年来，随着中国游戏行业的不断发展，一款名为《黑神话：悟空》的游戏引发了全球的广泛关注。这款游戏不仅在视觉效果和动作设计上令人惊艳，还被誉为中国3A游戏的里程碑。然而，从《黑神话：悟空》的发布，我们也可以窥探出中国3A游戏的发展之路所面临的挑战与未来的方向。 本文将从中国3A游戏的历史回顾、现状剖析，以及《黑神话：悟空》对行业的影响与未来展望进行探讨，分析中国游戏产业的机遇与挑战。
虚幻引擎（Unreal Engine）技术使得《黑神话悟空传》大火，现在重视C++的开始吃香了，JAVA，Go，Unity都不能和C++相媲美！
zhang9880000的博客
08-27 3099
C++ 的虚拟引擎技术通常指的是使用 C++ 语言开发的游戏引擎，如虚幻引擎（Unreal Engine）等。以下是对 C++ 虚拟引擎技术一、强大的性能表现高效的内存管理C++ 允许开发者对内存进行精细的控制。在虚拟引擎中，可以根据具体需求进行内存分配和释放，避免不必要的内存开销。例如，在处理大规模场景和复杂模型时，可以通过自定义内存分配器来优化内存使用，提高性能。通过指针操作和直接内存访问，C++ 可以实现高效的数据存储和访问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值