Canvas 贪吃蛇

2017-09-12 19:33:11来源:CSDN作者:Young_Gao人点击

分享

最近自己再闲暇时间看了一下 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="开始" onclick="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.onkeydown=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 要学的东西还很多,自己目前也只能说是徘徊在门口了,估计入门都算不上

革命尚未成功,同志仍需努力!

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台