Canvas 贪吃蛇

最新推荐文章于 2023-05-12 15:03:55 发布

Young_Gao

最新推荐文章于 2023-05-12 15:03:55 发布

阅读量568

点赞数

分类专栏： js+html 文章标签： html canvas

本文链接：https://blog.csdn.net/Young_Gao/article/details/77945672

版权

js+html 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

最近自己再闲暇时间看了一下 Canvas 的有关知识

不得不说 Canvas 还是很能吸引我的

于是自己结合网上的一些 Canvas 的教程，自己写了一个贪吃蛇，有兴趣的同学可以保存一下代码，自己玩一玩

当然，这只是自己粗略做的东西，可能有些细节还需要继续调试

话不多说，直接来代码了

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>RetroSnaker</title>
</head>
<body>
	<canvas id="mycanvas11" width="300px" height="300px" style="border-width: 1px;border-color: black;border-style: 		solid;">浏览器不支持canvas</canvas>
	<div style="width: 300px;height: 300px;float: left;">
		<div >
			<h4>选择级别</h4>
			<select id="levelselect" >
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
				<option>6</option>
				<option>7</option>
				<option>8</option>
				<option>9</option>
			</select>
			<input type="button" value="开始" οnclick="begingame()"/>
		</div>
		<h1>得分</h1>
		<h1 id="count">0</h1>
	</div>

	<script type="text/javascript">
		
	//获取canvas
	var canvas11 = document.getElementById("mycanvas11");
	var context11 = canvas11.getContext('2d');
	
	//规定模块大小
	var largeitem = 15;
	var speed = largeitem;
	
	//蛇  初始化的位置以及大小
	var snake = new Array();
	var x;
	var y;
	var itemwidth = largeitem;
	var itemheight = largeitem;
	var lastx;//尾巴的x
	var lasty;//尾巴的y
	
	//食物
	var foodx;
	var foody;
	var foodwidth = largeitem;
	var foodheight = largeitem;
	var count = 0;//吃食物数量
	
	//设置初始方向
	var derect = 'left';
	//选择的速度等级
	var level;
	
	//初始化食物位置
	foodinit();
	function foodinit()
	{
		//随机数  math.floor：取整  math.random:0-1之间的属技术  canvas11.width/largeitem 获取一共有多少块
		foodx = Math.floor(Math.random()*(canvas11.width/largeitem))*largeitem;
		foody = Math.floor(Math.random()*(canvas11.width/largeitem))*largeitem;
		drawfood();
	}
	
	//画食物
	function drawfood(){
		context11.fillStyle = "green";
		context11.fillRect(foodx,foody,foodwidth,foodheight);
	}
	
	//初始化蛇位置
	initIt();
	function initIt(){
		x=150;
		y=150;
		snake = [];
		var snakeinititem = {
			"x":x,
			"y":y,
		};
		snake.push(snakeinititem)
		drawIt();
	}
	
	//画蛇
	function drawIt(){
		for(var i=0;i<snake.length;i++)
		{
			context11.fillStyle = "red";
			context11.fillRect(snake[i]["x"],snake[i]["y"],itemwidth,itemheight);
		}
	}
	
	//蛇行走
	function drawAnimate(){
		//通过设置timeout控制速度    *****mark ？  ******
		//60帧 一般来说浏览器是60帧  6000/60=100ms = 0.1s 即速度为0.1s的倍数   (level*6000) / 60 的值越大，越慢
		setTimeout(function() {
			//启动方法调用requestAnimationFrame(drawAnimate)来执行drawAnimate方法，
			//再在drawAnimate方法中调用requestAnimationFrame(drawAnimate);达到循环的效果
	　　　　window.requestAnimationFrame(drawAnimate);
	　　}, (level*6000) / 60);
//		window.requestAnimationFrame(drawAnimate);
		//清理屏幕，达到清理旧蛇的位置的效果
		context11.clearRect(0,0,canvas11.width,canvas11.height);

		//记录蛇最后一个item的位置
		lastx = snake[snake.length-1]["x"];
		lasty = snake[snake.length-1]["y"];
		
		//计算新蛇头的坐标
		switch(derect)
		{
			case'left':
				x-=speed;
				break;
			case'up':
				y-=speed;
				break;
			case'right':
				x+=speed;
				break;
			case'down':
				y+=speed;
				break;
			default :
				break;
		}
		//除蛇头外，整条蛇身的位置前移更新
		var length = snake.length;
		for(var i=1;i<length;i++){
			snake[length-i]["x"] = snake[length-i-1]["x"];
			snake[length-i]["y"] = snake[length-i-1]["y"];
		}
		//蛇头位置更新
		snake[0]["x"] = x;
		snake[0]["y"] = y;
		
		//判断是否咬了自己
		var eatself = false;
		for(var i=1;i<snake.length;i++)
		{
			if((snake[0]["x"]==snake[i]["x"])&&(snake[0]["y"]==snake[i]["y"]))
			{
				eatself = true;
			}
		}
		//判定是否碰到四个边  、咬了自己
		if(x<0||y<0||((x+itemwidth)>canvas11.width)||((y+itemheight)>canvas11.height)||eatself)
		{
			alert("game over,this game will restart");
			// 清理画布
			context11.clearRect(0,0,canvas11.width,canvas11.height);
			initIt();//初始化蛇
			foodinit();//初始化食物
		}
		else
		{
			checkiseat();
		}
		//由于清理旧蛇位置的时候我们采用了清理画布的方式，所以蛇和食物都清理掉了，这里我们要重新画，需要注意的是，这里蛇是新蛇的位置，食物还是老食物的位置
		drawIt();//画蛇
		drawfood();//画食物
	}
	//判断蛇是否吃了食物
	function checkiseat()
	{
		if(x==foodx&&y==foody)//蛇头坐标==食物坐标即为吃了食物
		{
			var snakeitem = {
				"x":lastx,
				"y":lasty,
			};
			//蛇增长一个item，把吃食物之前的蛇尾item加上去
			snake.push(snakeitem);
			//分数加1
			count = count + 1;
			document.getElementById("count").innerHTML = count;
			//清空画布
			context11.clearRect(0,0,canvas11.width,canvas11.height);
			//重新随机初始化食物的位置
			foodinit();
		}
	}
	//*********************获取按键***********************************
	document.οnkeydοwn=function(event){
		var e = event || window.event || arguments.callee.caller.arguments[0];
		if(e && e.keyCode==37){ // 按 ←
			derect = 'left';
		}
		if(e && e.keyCode==38){ // 按 ↑ 
			derect = 'up';
		}      
		if(e && e.keyCode==39){ // 按 →
			derect = 'right';
		}
		if(e && e.keyCode==40){ // 按 ↓
			derect = 'down';
		}
	}; 
	
	//启动
	function begingame(){
		level = 10 - document.getElementById("levelselect").value;
		window.requestAnimationFrame(drawAnimate);
	}
	</script>
</body>
</html>

Canvas 要学的东西还很多，自己目前也只能说是徘徊在门口了，估计入门都算不上

革命尚未成功，同志仍需努力！