第一篇博客内容：贪吃蛇游戏_博客内容游戏-CSDN博客

本文链接：https://blog.csdn.net/weixin_44455771/article/details/103319520

<!DOCTYPE HTML> 
<html> 
	<meta charset="utf-8">
<body> 
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;"></canvas> 
<script type="text/javascript"> 
	var c=document.getElementById("myCanvas"); 
	var time = 160 ; //蛇的速度 
	var cxt=c.getContext("2d"); 
	var x = y = 8; 
	var a = 0; //食物坐标 
	var b = 0;//另一个食物坐标
	var t = 20; //蛇身长 
	var map = []; //记录蛇运行路径 
	var size = 8; //蛇身单元大小 
	var direction = 2; // 1 向上 2 向右 0 左 3下 
	setTimeout("set_game_speed()", time); // 移动蛇 
	function set_game_speed(){ // 移动蛇 
		switch(direction){ //规定方向
			case 1:y = y-size;break; 
			case 2:x = x+size;break; 
			case 0:x = x-size;break; 
			case 3:y = y+size;break; 
		} 
		if(x>400){ 
			x=0;
		} 
		if(y>400){
			y=0;
		}
		if(x<0){
			x=400;
		}
		if(y<0){
			y=400;
		}//碰到墙壁时从另一侧出来
		for(var i=0;i<map.length;i++){ 
			if( parseInt(map[i].x)==x && parseInt(map[i].y)==y){ 
				alert("你挂了，继续努力吧！失败原因：撞到自己了.....\n最终得分："+(t-20)+"分");
				window.location.reload();
				clearTimeout(interval);
			} 
		} 
		if (map.length>t) { //保持舍身长度 
			var cl = map.shift(); //删除数组第一项，并且返回原元素 
			cxt.clearRect(cl['x'], cl['y'], size, size); 
		}; 
		map.push({'x':x,'y':y}); //将数据添加到原数组尾部 
		cxt.fillStyle = "#006699";//内部填充颜色 
		cxt.strokeStyle = "#006699";//边框颜色 
		cxt.fillRect(x, y, size, size);//绘制矩形 
		if((a*8)==x && (b*8)==y){ //吃食物 
			rand_frog();//放置食物
			t++;
			if(time>=80){
				time=time-5;	
			}
		} 
		
		interval =setTimeout("set_game_speed()", time);;
	} 
	
	document.onkeydown = function(e) { //改变蛇方向 
		var code = e.keyCode - 37; 
		var gg= direction
		switch(code){ 
			case 1 : direction = 1;
			break;//上
			case 2 : direction = 2;
			break;//右
			case 3 : direction = 3;
			break;//下
			case 0 : direction = 0;
			break;//左
		} 
		if((gg==1&&direction==3)||(gg==3&&direction==1)||(gg==2&&direction==0)||(gg==0&&direction==2)){
			direction=gg;
		}
	} 
	
	// 随机放置食物 
	function rand_frog(){ 
		a = parseInt(Math.random()*49); 
		b = parseInt(Math.random()*49); 
		var wz=0;
		cxt.fillStyle = "#000000";//内部填充颜色 
		cxt.strokeStyle = "#000000";//边框颜色 
		for(var i=0;i<map.length;i++){ 
			if( parseInt(map[i].x)==a*8 && parseInt(map[i].y)==b*8){ 
				wz=1;
				rand_frog;
			} 
		} 
		if(wz==0){
			cxt.fillRect(a*8, b*8, 8, 8);//绘制矩形 
		}
	} 
	// 随机放置食物 
	rand_frog(); 
</script> 
</body> 
</html>