html5+js 贪吃蛇

最新推荐文章于 2024-05-03 11:47:20 发布

kandee

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量641

点赞数

分类专栏： JS-原生文章标签： js html5 javascript 贪吃蛇

本文链接：https://blog.csdn.net/kandeet/article/details/69261595

版权

JS-原生专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="Author" content="kzm">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<style type="text/css">
		body{background:#c7e2e7;}
		.box{
			width:450px;
			height:450px;
			margin:0px auto;
			pandding:1px auto;
			box-shadow:2px 2px 5px 1px #000;
			color:#252b34;
		}
	</style>
</head>
<body>
	<div class="box" width=455px height=455px>
		<!--画布-->
		<canvas id="mycanvas" width=450px height=450px style="background:#00ffff;border:1px solid #000000" ></canvas>
	</div>
<script type="text/javascript">
	var direction=0;//方向
	var speed=500;//初始速度500ms
	//拿到画板
	var canvas = document.getElementById("mycanvas");
	//拿到画图工具
	var ctx =  canvas.getContext("2d");   
	//假定格子 15*15   450/15=30个
	//for
	ctx.strokeStyle="white";//颜色

	for(var i=0;i<30;i++){
		//开始路径
		ctx.beginPath();
		ctx.moveTo(0,i*15);//移动到哪里
		ctx.lineTo(450,i*15)
		ctx.moveTo(i*15,0);//移动到哪里
		ctx.lineTo(i*15,450)
		ctx.closePath();
		ctx.stroke();//画线
	}

	//蛇  节点 x-x坐标,y-y坐标,f-方向
	//上1 下 -1  左 2 右-2
	function Cell(x,y,f){
		//this 当前对象
		this.x=x;
		this.y=y;
		this.f=f;
	}

    //食物
	function Food(x,y){
		this.x=x;
		this.y=y;
	}

	//蛇对象数组
	var snake = [];
	var width = 15;
	var head;//头
	var food =new Food(15,15)
	for(var i=0;i<5;i++){
		//初始化蛇的身体
		snake[i] =new Cell(i,0,-2);
	}

	//画蛇
	function drawSnake(){
		ctx.clearRect(0,0,450,450);
		//填充颜色
		for(var i=0;i<snake.length;i++){
			ctx.fillStyle="black";
			if(i==snake.length-1){
				ctx.fillStyle="red";
			}
			ctx.beginPath();
			ctx.rect(snake[i].x*15,snake[i].y*15,width,width);//矩形
			ctx.closePath();
			ctx.fill();
		}
		head = snake[snake.length-1];
		//是否吃到食物
		if(head.x==food.x&&head.y==food.y){
			var newCell=new Cell(head.x,head.y,head.f);
			switch(head.f){
				case 1:newCell.y--;break;
				case 2:newCell.x--;break;
				case -1:newCell.y++;break;
				case -2:newCell.x++;break;
			}
			snake[snake.length]=newCell;
			//重新生成食物
			initFood();
		}
		//取出蛇的头
		drawFood();
    }

	//食物
	function drawFood(){
		ctx.fillStyle="red";
		ctx.beginPath();
		ctx.rect(food.x*15,food.y*15,width,width);//矩形
		ctx.closePath();
		ctx.fill();
	}

    drawSnake();

     //生成随机食物
    function initFood(){
		var x= Math.ceil(Math.random()*28)+1;
		var y= Math.ceil(Math.random()*28)+1;
		food.x=x;
		food.y=y;
		for(var i=0;i<snake.length;i++){
			//食物与身体重合
			if(snake[i].x==x&& snake[i].y==y){
				initFood();
			}
		}
	}

	//监听键盘事件
	document.οnkeydοwn=function(e){
		//左 37   右  39
		var cade=e.keyCode;
		var dir=0;//方向
		 //上1 下 -1  左 2 右-2
		switch(cade){
			  case 38:dir=1;break;
		  case 39:dir=-2;break;
		  case 40:dir=-1;break;
		  case 37:dir=2;break;
		}
		//当方向确定了，做移动
		if(dir!=0){
			if(parseInt(head.f)+dir!=0){//不准上走时下走
				//移动蛇
				//moveSnake();
				direction=dir;
				//按键方向相同，每次加速100ms
				if(speed>100&&head.f==dir){
					speed-=100;
					window.clearInterval(timer);
					timer=window.setInterval(autoMove,speed);
				}
			}else{
				direction=0;
			}
		}
	}

	//移动蛇
	function moveSnake(){
		var newCell=new Cell(head.x,head.y,head.f);//新蛇
		newCell.f=direction;

		//循环蛇的身体 蛇的单元格往前动 把下标为0的丢弃
		var newSnake=[];
		for(var i=1;i<snake.length;i++){
			newSnake[i-1]=snake[i];
		}
		newSnake[snake.length-1]=newCell;

		switch(direction){
			case 1:newCell.y--;break;
			case 2:newCell.x--;break;
			case -1:newCell.y++;break;
			case -2:newCell.x++;break;
		}
		snake=newSnake;
		head=snake[snake.length-1];
		if(head.x>30||head.x<0||head.y>30||head.y<0){
			alert("游戏结束");
			//刷新页面
			window.location.reload();
		}
		drawSnake();
	}

	//自动移动蛇
	function autoMove(){
		if(direction!=0){
			moveSnake();
		}
	}

	//定时自动移动
	var timer=window.setInterval(autoMove,500);
</script>
</body>
</html>

kandee

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5+js 贪吃蛇

body{background:#c7e2e7;} .box{ width:450px;height:450px;margin:0px auto;pandding:1px auto;box-shadow:2px 2px 5px 1px #000;color:#252b34; }
复制链接

扫一扫