一个基于H5的canvas的js面向对象贪吃蛇

Kara ·

更新时间:2024-11-13

· 595 次阅读

一个基于H5的canvas的js面向对象贪吃蛇

直接上代码


	
		canvas{
			box-shadow: 0 0 10px #000;
			display: block;
			margin: 20px auto;
		}
	$(function(){
		//创建画布
		//绘制矩形
		function Rect(x,y,width,height,color){
			//矩形x轴坐标
			this.x=x;
			//矩形y轴坐标
			this.y=y;
			//矩形的宽度
			this.width=width;
			//矩形的高度
			this.height=height;
			//矩形的颜色
			this.color=color;	
		}
		//绘制矩形的构造函数
		Rect.prototype.draw = function(){
			//开始位置
			Draw.prototype.xt.beginPath();
			//绘画的颜色
			Draw.prototype.xt.fillStyle = this.color;
			//绘制已填充的矩形（实线）
			Draw.prototype.xt.fillRect(this.x,this.y,this.width,this.height);
			//绘制已填充的矩形（虚线）
			Draw.prototype.xt.strokeRect(this.x,this.y,this.width,this.height);
		}
		//创建蛇的对象
		function Snake(obj){
			//画蛇头
			this.head = new Rect(obj.canvas.width/2,obj.canvas.height/2,40,40,'red');
			this.body = [];//蛇身数量
			var x = this.head.x-40;//蛇头的x坐标
			var y = this.head.y;//蛇头的y坐标
			//循环创建身体
			for(var i=0;i<3;i++){
				var rect = new Rect(x,y,40,40,'gray');
				this.body.push(rect);
				x -= 40;
			}	
		}
		//tianjia
			Snake.prototype.direction = 1;
		//定义一个是否
		Snake.prototype.isEatFood=false;
		//画蛇
		Snake.prototype.draw = function(){
			//画蛇头
			this.head.draw();
			//画蛇身
			for(var i=0;i<this.body.length;i++){
				this.body[i].draw();
			}
		}
		//让蛇动
		Snake.prototype.move = function(){
			//检测碰撞到墙壁
			if(this.head.x< 40 ||this.head.y$('#canvas')[0].width-40-40 || 
			this.head.y>$('#canvas')[0].height-40-40){
				return false;
			}
			// //检测蛇头与蛇身
			// for(item in this.body){
			// 	if(isRectHit(this.head,this.body[item])){
			// 		return false;
			// 	}
			// }
			for(var i=0;i<this.body.length;i++){
				console.log(this.body[i])
				if(isRectHit(this.head,this.body[i])){
						return false;
	         	}
			}
			//给身体加一个蛇头
			var rect = new Rect(this.head.x,this.head.y,40,40,'gray');
			//添加到身体开始的地方
			this.body.splice(0,0,rect);
			//去掉一个尾巴
			if(	Snake.prototype.isEatFood){
				//方便下一次吃食物
				Snake.prototype.isEatFood = false;
				//产生食物
			}else{
				//删除最后一个尾巴
				this.body.pop();
			}
			//蛇头的位置
			switch(this.direction){
				case 0:
					this.head.y -=40;
					break;
				case 1:
					this.head.x +=40;
					break;
				case 2:
					this.head.y +=40;
					break;
				case 3:
					this.head.x -=40;
					break;
			}
			return true;
		}
		$(window).keydown(function(e){
			switch(e.keyCode){
				//如果你的方向向左的，不能向右
				case 37:
					if(Snake.prototype.direction == 1){
						return;
					}
					Snake.prototype.direction = 3;
					break;
				//如果你的方向向上的，不能向下
				case 38:
					if(Snake.prototype.direction == 2){
						return;
					}
					Snake.prototype.direction = 0;
					break;
				//如果你的方向向右的，不能向左
				case 39:
					if(Snake.prototype.direction == 3){
						return;
					}
					Snake.prototype.direction = 1;
					break;
				//如果你的方向向下的，不能向上
				case 40:
					if(Snake.prototype.direction == 0){
						return;
					}
					Snake.prototype.direction = 2;
					break;
			}
		})
		function Draw(canvas){
			this.canvas=canvas;
			//检查画布
			this.check = function(){
				if (!this.canvas.getContext) {
					return false;	
				}else{
					return true;
				}
			}
			this.main = function(){
			//检测兼容
				if (!this.check()) {
					console.log('浏览器不支持canvas');
				return false;	
				}
				Draw.prototype.xt = this.canvas.getContext('2d');
				//创建蛇
				var snake = new Snake(this);
				//画蛇
				snake.draw();
				//随机产生一个食物
				var food = randFood(snake);
				food.draw();
				//做一个动画的定时器
				Draw.prototype.timer = setInterval(function(){
					//清除旧图像
					Draw.prototype.xt.clearRect(0,0,this.canvas.width,this.canvas.height);
					//改变蛇的位置
					if(!snake.move()){
						clearInterval(Draw.prototype.timer);
						alert("游戏结束")
					};
					//创建新图像
					snake.draw();
					food.draw();
					//是否吃到了食物
					if (isRectHit(food,snake.head)) {
						Snake.prototype.isEatFood = true;
						//重新随机产生食物
						food = randFood(snake);
					 }
				},150);
			}
		}
		//this.prototype.isEatFood=true;
		//随机产生食物
		function randFood(snake){
			//是否在蛇身上
			isInSnake = true;
			while(isInSnake){
				//产生两个位置 x,y
				var x = getRandPosition(0,($('#canvas')[0].width-40)/40)*40;
				var y = getRandPosition(0,($('#canvas')[0].height-40)/40)*40;
				//创建食物矩形
				var food = new Rect(x,y,40,40,'green');
				isInSnake = false;
				//判断这个位置是否在蛇上
				//是否是蛇头
				if(isRectHit(food,snake.head)){
					isInSnake = true;
					continue;
				}
				//是否蛇身
				for(var i=0;i<snake.body.length;i++){
					if(isRectHit(food,snake.body[i])){
						isInSnake = true;
						break;
					}
				}
			}
			return food;
		}
		//产生随机数的函数
		function getRandPosition(min,max){
			return Math.round(Math.random()*(max-min)+min);
		}
		//判断矩形是否重合
		function isRectHit(rect1,rect2){
			var R1_min_x = rect1.x;
			var R2_min_x = rect2.x;
			var R1_min_y = rect1.y;
			var R2_min_y = rect2.y;
			var R1_max_x = rect1.x+40;
			var R2_max_x = rect2.x+40;
			var R1_max_y = rect1.y+40;
			var R2_max_y = rect2.y+40;
			var min_x = Math.max(R1_min_x,R2_min_x);
			var max_x = Math.min(R1_max_x,R2_max_x);
			var min_y = Math.max(R1_min_y,R2_min_y);
			var max_y = Math.min(R1_max_y,R2_max_y);
			if(min_x<max_x && min_y<max_y){
				//如果是返回true
				return true;
			}else{
				//如果不是返回false
				return false;
			}
		}
		var draw=new Draw($('#canvas')[0]);//创建一个画布
		draw.main();//画入口函数
	});

运行效果
在这里插入图片描述