plunkerでvue その50

概要

plunkerでvueやってみた。
落ち物ゲーム、作ってみた。

参考にしたページ

写真

最初に、ランダムに色を決める。

function getBalls() {
	var balls = [];
	let sn = 0;
  for (let i = 0; i < 5; i++)
  {
	  for (let j = 0; j < 5; j++)
	  {
		  let ballInfo = {
			  iro: ballClass[Math.floor(Math.random() * ballClass.length)],
			  x: j,
			  y: i,
			  sn: sn,
			  df: 0,
		  }
		  balls.push(ballInfo);
		  sn++;
	  }
	}
	return balls
};

クリックされたら、隣り合う石を上下左右１ずつ取得し同色か否かを判定　同色の場合、その同色を起点とし再度隣り合う石を１ずつ取得し同色か否かを判定し、消す。

		breakCheckRecursive(startingBall, selectedClassName) {
	  	const leftBall = this.balls.find(b => b.x === startingBall.x - 1 && b.y === startingBall.y);
		  this.targetDelBall(leftBall, selectedClassName);
		  const rightBall = this.balls.find(b => b.x === startingBall.x + 1 && b.y === startingBall.y);
		  this.targetDelBall(rightBall, selectedClassName);
		  const topBall = this.balls.find(b => b.x === startingBall.x && b.y === startingBall.y - 1);
		  this.targetDelBall(topBall, selectedClassName);
		  const bottomBall = this.balls.find(b => b.x === startingBall.x && b.y === startingBall.y + 1);
		  this.targetDelBall(bottomBall, selectedClassName);
	  },
	  targetDelBall(delBall, selectedClassName) {
		  if (delBall && delBall.iro === selectedClassName && delBall.df === 0)
		  {
			  let ball = this.balls.find(b => b.x === delBall.x && b.y === delBall.y)
			  ball.df = 1;
			  ball.iro = "item-0";
			  this.breakCheckRecursive(delBall, selectedClassName);
		  }
	  },

石が消えた後、空中に浮いている石を下方向へ詰める処理を行わないといけません。

   	downArea() {
  		var bballs;
			var j;
			var k;
			var b0;
			var b1;
			bballs = this.balls.filter(b => b.df === 1);
			while (bballs.length > 0)
			{
				if (bballs[0].y == 0)
				{
					k = 0;
					b1 = this.balls.find(b => b.x === bballs[0].x && b.y === k);
					//b1.sn = -1;
					b1.iro = "item-0";
					b1.df = 0;
				}
				if (bballs[0].y == 1)
				{
					j = 1;  
					k = 0;
					b0 = this.balls.find(b => b.x === bballs[0].x && b.y === j);
					b1 = this.balls.find(b => b.x === bballs[0].x && b.y === k);	
					b0.df = b1.df;
					b0.iro = b1.iro;
					k = 0;
					b1 = this.balls.find(b => b.x === bballs[0].x && b.y === k);
					//b1.sn = -1;
					b1.iro = "item-0";
					b1.df = 0;	
				}
				if (bballs[0].y == 2)
				{
					j = 2;  
					k = 1;
					b0 = this.balls.find(b => b.x === bballs[0].x && b.y === j);
					b1 = this.balls.find(b => b.x === bballs[0].x && b.y === k);	
					b0.df = b1.df;
					b0.iro = b1.iro;
					j = 1;  
					k = 0;
					b0 = this.balls.find(b => b.x === bballs[0].x && b.y === j);
					b1 = this.balls.find(b => b.x === bballs[0].x && b.y === k);	
					b0.df = b1.df;
					b0.iro = b1.iro;
					k = 0;
					b1 = this.balls.find(b => b.x === bballs[0].x && b.y === k);
					//b1.sn = -1;
					b1.iro = "item-0";
					b1.df = 0;	
				}
				if (bballs[0].y == 3)
				{
					j = 3;  
					k = 2;
					b0 = this.balls.find(b => b.x === bballs[0].x && b.y === j);
					b1 = this.balls.find(b => b.x === bballs[0].x && b.y === k);	
					b0.df = b1.df;
					b0.iro = b1.iro;
					j = 2;  
					k = 1;
					b0 = this.balls.find(b => b.x === bballs[0].x && b.y === j);
					b1 = this.balls.find(b => b.x === bballs[0].x && b.y === k);	
					b0.df = b1.df;
					b0.iro = b1.iro;
					j = 1;  
					k = 0;
					b0 = this.balls.find(b => b.x === bballs[0].x && b.y === j);
					b1 = this.balls.find(b => b.x === bballs[0].x && b.y === k);	
					b0.df = b1.df;
					b0.iro = b1.iro;
					k = 0;
					b1 = this.balls.find(b => b.x === bballs[0].x && b.y === k);
					//b1.sn = -1;
					b1.iro = "item-0";
					b1.df = 0;	
				}
				if (bballs[0].y == 4)
				{
					j = 4;  
					k = 3;
					b0 = this.balls.find(b => b.x === bballs[0].x && b.y === j);
					b1 = this.balls.find(b => b.x === bballs[0].x && b.y === k);	
					b0.df = b1.df;
					b0.iro = b1.iro;
					j = 3;  
					k = 2;
					b0 = this.balls.find(b => b.x === bballs[0].x && b.y === j);
					b1 = this.balls.find(b => b.x === bballs[0].x && b.y === k);	
					b0.df = b1.df;
					b0.iro = b1.iro;
					j = 2;  
					k = 1;
					b0 = this.balls.find(b => b.x === bballs[0].x && b.y === j);
					b1 = this.balls.find(b => b.x === bballs[0].x && b.y === k);	
					b0.df = b1.df;
					b0.iro = b1.iro;
					j = 1;  
					k = 0;
					b0 = this.balls.find(b => b.x === bballs[0].x && b.y === j);
					b1 = this.balls.find(b => b.x === bballs[0].x && b.y === k);	
					b0.df = b1.df;
					b0.iro = b1.iro;
					k = 0;
					b1 = this.balls.find(b => b.x === bballs[0].x && b.y === k);
					//b1.sn = -1;
					b1.iro = "item-0";
					b1.df = 0;	
				}
				bballs = this.balls.filter(b => b.df === 1);
		  }
	  },

縦列が全て消えた時に列ごと、右に詰めないといけない

  	rightArea() {
		  let xAxis = 4;
		  while (xAxis >= 0)
		  {
			  let xBalls = this.balls.filter(b => b.x === xAxis && b.iro === "item-0");
			  if (xBalls.length > 4)
			  {
					//alert("ok")
					if (xAxis == 1)
					{
						this.move(1)
						this.cls()
					}
					if (xAxis == 2)
					{
						this.move(2)
						this.move(1)
						this.cls()
					}
					if (xAxis == 3)
					{
						this.move(3)
						this.move(2)
						this.move(1)
						this.cls()
					}
					if (xAxis == 4)
					{
						this.move(4)
						this.move(3)
						this.move(2)
						this.move(1)
						this.cls()
					}
			  }
			  xAxis--;
		  }
	  },
		move(l) {
			var i;
			for (i = 0; i < 5; i++)
			{
				var	j = l;  
				var	k = l - 1;
				var	b0 = this.balls.find(b => b.x === j && b.y === i);
				var b1 = this.balls.find(b => b.x === k && b.y === i);	
				b0.df = b1.df;
				b0.iro = b1.iro;
			}
		},
		cls() {
			var i;
			for (i = 0; i < 5; i++)
			{
				var k = 0;
				var b1 = this.balls.find(b => b.x === k && b.y === i);
				b1.iro = "item-0";
				b1.df = 0;	
			}
		},

成果物

以上。