一个简单的贪吃蛇小游戏

最新推荐文章于 2024-04-24 11:57:28 发布

Blanche_qiu

最新推荐文章于 2024-04-24 11:57:28 发布

阅读量291

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/qq_41306452/article/details/84873974

版权

JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

js小游戏一条简单的贪吃蛇

代码复制可用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>贪吃蛇</title>
		<style>
			body{
				display: flex;
				height: 100vh;
				margin: 0;
				padding: 0;
				justify-content: center;
				align-items: center;
			}
		</style>
	</head>
	<body>
		<canvas id="can" width="400" height="400" style="background: #000;">对不起，你的浏览器不支持！</canvas>
	<script>
		var snake=[41,40],
			direction=1,
			food=43,
			n,
			box=document.getElementById("can").getContext("2d");
			
		function draw(seat,color){
			box.fillStyle=color;
			box.fillRect(seat%20*20+1,~~(seat/20)*20+1,18,18);
		}
			document.onkeydown = function(evt){
				direction=snake[1]-snake[0]==(n=[-1,-20,1,20][(evt||event).keyCode-37]||direction)?direction:n;
			}
			!function(){
				snake.unshift(n=snake[0]+direction);
				if(snake.indexOf(n,1)>0||n<0||n>399||direction==1&&n%20==0||direction==-1&&n%20==19){
				alert("game over!");	
				}
				draw(n,"lime");
				if(n==food){
					while(snake.indexOf(food=~~(Math.random()*400))>0);
					draw(food,"yellow");
				}else{
					draw(snake.pop(),"black");
				}
				setTimeout(arguments.callee,150);
			}();
			
			
			
			
			
			
			
			
			
	</script>	
	</body>
</html>