html5+js+css开发贪吃蛇

最新推荐文章于 2024-08-08 10:33:11 发布

原创最新推荐文章于 2024-08-08 10:33:11 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

project 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个基于HTML5 Canvas的贪吃蛇游戏实现方案。通过JavaScript编程，详细讲解了游戏的初始化设置、蛇的绘制与移动逻辑、食物生成机制、碰撞检测及用户交互等内容。

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>̰贪吃蛇</title>
  <style type="text/css">
	*{
		margin:0;
		padding:0;
	}
	body{
		background:url(img/bg.jpg);
		background-size:cover;/*屏幕自适应*/
	}
	#box{
		width:600px;
		margin:20px auto;
	}
	#canvas{
		border:3px solid #4a4a4a;
	}
	#btn a{
		width:100px;
		height:26px;
		display:inline-block;
		text-decoration:none;
		background:#338328;
		text-align:center;
		padding:10px;
		border-radius:10px;
		line-height:26px;
		color:#000;
		font-weight:600;
	}
	#btn a:hover{
		color:#fff;
	}
	#score_one{
		color:#fff;
		text-align:center;
		font-weight:600;
		font-size:20px;
	}
  </style>
 </head>
 <body>
	<div id="box">
		<div id="score_one">
			得分：<span id="score"></span>
		</div>
		<canvas id="canvas" width="600" height="600"></canvas>
		<div id="btn">
			<a href="javascript:void(0);" onclick="btnStart();">开始游戏</a>
			<a href="javascript:void(0);" onclick="reStart();">重新游戏</a>
		</div>
		<audio src="mp3/bg.mp3" loop id="beginmusic"></audio>
		<audio src="mp3/eat.mp3" id="bomb"></audio>
		<audio src="mp3/over.mp3" id="over"></audio>
	</div>
	
	<script type="text/javascript">
		function $(id){
			return document.getElementById(id);
		}
		
		//获取画布对象
		var canvas = $("canvas");
		var beginmusic = $("beginmusic");
		var bomb = $("bomb");
		var over = $("over");
		var score = $("score");
		score.innerText="0";
		//获取上下文
		var ctx = canvas.getContext("2d");
		//蛇身长4格
		var snakeCount = 4;
		var snakes = [];
		var foodX = 0;
		var foodY = 0;
		var timer = null;
		var toGo = 3;// 1 左 2 上 3 右 4 下
		
		//绘画
		function draw(){
			var s=600;
			for(var i=0;i<s;i+=40){
				ctx.strokeStyle="#4a4a4a";
				ctx.moveTo(0,i+40);
				ctx.lineTo(600,i+40);
				ctx.moveTo(i+40,0);
				ctx.lineTo(i+40,600);
				ctx.stroke();
			}
			//画蛇
			for(var i=0;i<snakes.length;i++){
				//重启绘画
				ctx.beginPath();
				ctx.fillRect(snakes[i].x,snakes[i].y,40,40);
				ctx.strokeStyle="#4a4a4a";
				ctx.moveTo(snakes[i].x,snakes[i].y);// 0  0
				ctx.lineTo(snakes[i].x+40,snakes[i].y);// 40 0
				ctx.lineTo(snakes[i].x+40,snakes[i].y+40);// 40 40
				ctx.lineTo(snakes[i].x,snakes[i].y+40);// 0 40
				ctx.lineTo(snakes[i].x,snakes[i].y);// 0 0
				ctx.stroke();
			}
			ctx.fillRect(foodX,foodY,40,40);
		}
		
		//定义蛇的位置
		function start(){
			for(var i=0;i<snakeCount;i++){
				snakes[i]={x:i*40,y:0};
			}
			addFood();
			draw();
		}

		//添加食物
		function addFood(){
			foodX = Math.floor(Math.random()*15)*40;
			foodY = Math.floor(Math.random()*15)*40;
		}

		//蛇移动
		function move(){
			switch(toGo){
				case 1:
					//给数组添加新的元素
					snakes.push({x:snakes[snakeCount-1].x-40,y:snakes[snakeCount-1].y});//左
					break;
				case 2:
					//给数组添加新的元素
					snakes.push({x:snakes[snakeCount-1].x,y:snakes[snakeCount-1].y-40});//上
					break;
				case 3:
					//给数组添加新的元素
					snakes.push({x:snakes[snakeCount-1].x+40,y:snakes[snakeCount-1].y});//右
					break;
				case 4:
					//给数组添加新的元素
					snakes.push({x:snakes[snakeCount-1].x,y:snakes[snakeCount-1].y+40});//下
					break;
			}
			
			//删除数组的第一个元素
			snakes.shift();
			ctx.clearRect(0,0,600,600);
			isEat();
			isDead();
			draw();
		}
		
		//键盘方向键控制蛇的走向
		function keyDown(e){
			switch(e.keyCode){
				case 37://左
					toGo = 1;
					break;
				case 38:
					toGo = 2;
					break;
				case 39:
					toGo = 3;
					break;
				case 40:
					toGo = 4;
					break;
			}
		};

		//蛇吃东西
		function isEat(){
			if(snakes[snakeCount-1].x == foodX && snakes[snakeCount-1].y == foodY){
				snakeCount++;
				addFood();
				snakes.unshift({x:-40,y:-40});
				score.innerText = parseInt(score.innerText)+50;
				bomb.play();
			}
		};
		
		//规则限制
		function isDead(){
			//边界判断
			if(snakes[snakes.length-1].x>560 || snakes[snakes.length-1].y>560 || snakes[snakes.length-1].x<0 || snakes[snakes.length-1].y<0){
				beginmusic.pause();
				over.play();
				alert("你为啥这么想不开呢？");
				window.location.reload();
			}

			//判断自身，蛇不能碰到蛇身
			for(var i=0;i<snakes.length-1;i++){
				if(snakes[snakes.length-1].x == snakes[i].x && snakes[snakes.length-1].y == snakes[i].y){
					beginmusic.pause();
					over.play();
					alert("你何必为难自己呢？");
					window.location.reload();
				}
			}
		}

		//开始游戏
		function btnStart(){
			beginmusic.play();
			timer = setInterval(move,150);
			document.onkeydown = function(e){
				e = e || window.event;
				keyDown(e);
			}
		}
		
		//重新游戏
		function reStart(){
			window.location.reload();
		}
		

		window.onload = function(){
			start();
		}

	</script>
 </body>
</html>