javascript - 需要帮助来限制游戏中生成的方 block 数量和目标数量

Question

我从代码笔那里得到了一些简单的炸弹人游戏。为了我的研究，我需要限制多少 block 瓷砖和目标。对于最大 32 个瓷砖和 7 个目标(灰色瓷砖和红色目标)。这里的来源:codepen.io/Digiben/pen/oGYGrx

我不明白脚本如何使用随机算法创建目标和图 block 。

感谢所有关注此主题的人。

window.onload = function(){
//Map Kelas
	class Map {
		constructor (nbX, nbY, tileSize){
			this.nbX = nbX;
			this.nbY = nbY;
			this.mapArray = new Array(this.nbX);
			this.tileSize = tileSize;
			this.map = document.getElementById('map');
		}
		init()  {
			console.log('Map size: ' + this.nbX * this.nbY);
			let i = 0;
			let j = 0;
			let bool = null;

			this.map.style.width = (this.tileSize * this.nbX) + 'px';
			this.map.style.height = this.tileSize * this.nbY + 'px';

			for (i = 0; i < this.nbX; i++) {

				this.mapArray[i] = new Array(this.nbY);

				for (j = 0; j < this.nbY; j++) {

					bool = Math.random() >= 0.7 ? true : false;

					if (bool) {
							for (var z = Things.length - 1; i >= 0; i-) {
								Things[i]
							}
					} else if (!bool) {
						this.mapArray[i][j] = 1;
					}
				}
			}
		}

		appendTile(i, j) {
			let tile = document.createElement('div');
			this.map.appendChild(tile);
			tile.style.width = this.tileSize + 'px';
			tile.style.height = this.tileSize + 'px';

			tile.classList.add('tile');
			tile.style.left = (i * this.tileSize) + 'px';
			tile.style.top = (j * this.tileSize) + 'px';
		}

		getMapArray () {
			return this.mapArray;
		}

		getMapSize () {
			return {sizeX: this.nbX, sizeY:this.nbY}
		}
	}
//Create Target
	class Target {
		constructor (map, tileSize) {
			this.mapArray = map.getMapArray();
			this.playerSpace = map.getMapSize();
			this.targetsArray = new Array();
			this.possiblePositionToStartX = new Array();
			this.possiblePositionToStartY = new Array();
			this.tileSize = tileSize;
			this.map = document.getElementById('map');
			this.totalTargets = 0;
		}
		
		getTotalTargets(){
			return this.totalTargets;
		}
//Show Total Target
		showTotalTargets () {
			let totalDiv = document.querySelector('#score strong');
			totalDiv.innerHTML = ' / ' + this.totalTargets;
		}

		showTargets(i, j) {
			let tile = document.createElement('div');
			this.map.appendChild(tile);

			tile.classList.add('target');
			tile.style.width = this.tileSize + 'px';
			tile.style.height = this.tileSize + 'px';

// set attribute to identify the target when we need to remove it
			tile.setAttribute('data-pos', i + ':' +  j );

// positionning and styling
			tile.style.left = (i * this.tileSize) + 'px';
			tile.style.top = (j * this.tileSize) + 'px';
			tile.style.backgroundColor = 'red';
			tile.style.opacity = 0.5;
		}
		createTargets() {
//Target looping
			for (var i = 1; i < this.playerSpace.sizeX-1; i++) {
//Maks Target 2D 10x10
				this.targetsArray[i] = new Array();
				if (i == 1) this.targetsArray[i-1] = new Array();
				if (i == 8) this.targetsArray[i+1] = new Array();

				for (var j = 1; j < this.playerSpace.sizeY-1; j++) {

					this.targetsArray[i][j] = 1;
//Target aLgorithm
					
//Player dont Looping On red Zone
						this.possiblePositionToStartX.push(i+1);
						this.possiblePositionToStartY.push(j+1);
//Target Array if 0 to display Win on the End
						this.targetsArray[i][j] = 0;
//Total Targets
						this.totalTargets++;
//Show Target On map
						this.showTargets(i, j);

					}
				}
			}
			//Show Total Targets
			this.showTotalTargets();

		}
		// Start Player
		getPossiblePosToStart() {
			//Random Start PLayer
			let xPos = this.possiblePositionToStartX[Math.floor(Math.random() * (this.possiblePositionToStartX.length))];
			let yPos = this.possiblePositionToStartY[Math.floor(Math.random() * (this.possiblePositionToStartY.length))];

			return {x: xPos, y: yPos}
		}
		//Player Array
		getTargetsArray(){
			return this.targetsArray;
		}
	}

//PLayer CLass
	class Player {
		constructor (mapArray, map, targets, tileSize) {
			this.positionArray = mapArray;
			this.position = {x: 0, y: 0}
			this.playerDiv = document.getElementById('player');
			this.playerDiv.style.left = 0;
			this.playerDiv.style.top = 0;
			this.playerDiv.style.right = 0;
			this.playerDiv.style.bottom = 0;
			this.playerDiv.style.width = tileSize + 'px';
			this.playerDiv.style.height = tileSize + 'px';
			this.playerSpace = map.getMapSize();
			this.playerMap = map.getMapArray();
			this.score = 0;
			this.targetsArray = targets.getTargetsArray();
			this.totalTargets = targets.getTotalTargets();
			this.tileSize = tileSize;
		}
//Record Posisition Player
		recordPosition(mapArray){
			this.positionArray = mapArray;
		}
//Reset Score when Restart The game
		static resetScore() {
			let scoreSpan = document.querySelector('#score span'); scoreSpan.innerHTML = '0';
		}

//Set Palyer 
		setPosition (position){
			this.playerDiv.style.left = (position.x * this.tileSize) + 'px';
			this.playerDiv.style.top = (position.y * this.tileSize) + 'px';
			this.position.x = position.x;
			this.position.y = position.y;
		}

		getPosition() {
			return this.position;
		}
//Limt Map
		moveRight() {
			
			if(this.position.x > this.playerSpace.sizeX-2) return false;
			if(this.positionArray[this.position.x+1][this.position.y] != 0){
				this.position.x++;
				let nb = this.playerDiv.style.left.split('px');
				this.playerDiv.style.left = (parseInt(nb[0]) + this.tileSize) + 'px';
				console.log('Droite | X : ' +  this.playerDiv.style.left);
				console.log(this.position.x + ' : ' + this.position.y);
			} else {
				console.log('Not OK');
			}
		}
		
		moveDown() {
			
			if(this.position.y > this.playerSpace.sizeY-2) return false;
			if(this.positionArray[this.position.x][this.position.y+1] != 0){
				this.position.y++;
				let nb = this.playerDiv.style.top.split('px');
				this.playerDiv.style.top = (parseInt(nb[0]) + this.tileSize) + 'px';
				console.log('Bas | Y : ' +  this.playerDiv.style.top);
				console.log(this.position.x + ' : ' + this.position.y);
			} else {
				console.log('Not OK');
			}
		}
		
		moveLeft() {
			
			if(this.position.x == 0) return false;
			if(this.positionArray[this.position.x-1][this.position.y] != 0){
				this.position.x--;
				let nb = this.playerDiv.style.left.split('px');
				this.playerDiv.style.left = (parseInt(nb[0]) - this.tileSize) + 'px';
				console.log('Gauche | X : ' +  this.playerDiv.style.left);
				console.log(this.position.x + ' : ' + this.position.y);
			} else {
				console.log('Not OK');
			}
		}
		
		moveUp() {
			
			if(this.position.y <= 0) return false;
			if(this.positionArray[this.position.x][this.position.y-1] != 0){
				this.position.y--;
				let nb = this.playerDiv.style.top.split('px');
				this.playerDiv.style.top = (parseInt(nb[0]) - this.tileSize) + 'px';
				console.log('Haut | Y : ' +  this.playerDiv.style.top);
				console.log(this.position.x + ' : ' + this.position.y);
			} else {
				console.log('Not OK');
			}
		}
//Update Score
		updateScore () {
			let scoreDiv = document.querySelector('#score span');
			scoreDiv.innerHTML = this.score;			
			
//Winner Message
			if(this.score == this.totalTargets) document.querySelector ('#win').classList.add('show');
			
			console.log('Score : ' + this.score);
		}
//Update Target Array
		updateTargetsArray (posx, posy){
			this.targetsArray[posx][posy] = 1;
			console.log('Array state : ');
			console.log(this.targetsArray);
		}
//Remove Target
		removeTarget(posx, posy) {

			
			let targetToRemove = document.querySelectorAll('.target');
			let coords = posx + ':' +  posy;
			let attr = '';
//Loop To find Right Target accroding Coordinates Player
			
			for (var i = 0; i< targetToRemove.length; i++) {
				attr = targetToRemove[i].getAttribute('data-pos');
				if(attr == coords) {
					targetToRemove[i].remove();
					//Update Score
					this.score++;
					this.updateScore();
				}
			}

//Remove Html node (Remove Array Target) 
			if(this.targetsArray[posx][posy] == 0){
				this.targetsArray[posx][posy] == 1;
			}

		}
//Plant Bomb
		plantBomb(){
//Make Child Bomb
			let map = document.getElementById('map');
			let bomb = document.createElement('div');
			map.appendChild(bomb);
			bomb.style.width = this.tileSize + 'px';
			bomb.style.height = this.tileSize + 'px';

//Posision Bomb
			bomb.classList.add('bomb');
			bomb.style.left = (this.position.x * this.tileSize) + 'px';
			bomb.style.top = (this.position.y * this.tileSize) + 'px';
//Variables
			var posx = this.position.x;
			var posy = this.position.y;
			var that = this;

			var timer = setInterval(bombTimer, 500, posx, posy, that);
			var iter = 0;
//BombTimer
			function bombTimer() {
				switch (iter) {
					case 1:
						bomb.classList.add('waiting');
						break;
					case 2:
						bomb.classList.add('before');
						bomb.classList.remove('waiting');
						break;
					case 3:
						bomb.classList.add('explode');
						bomb.classList.remove('before');
						break;
					case 4:
						clearInterval(timer);
						bomb.remove();
						that.updateTargetsArray(posx, posy);
						that.removeTarget(posx, posy);
					default:
						break;
				}
				iter++;
			}

		}

	}
//Game Class
	class Game {
		constructor (tileSize, mapX, mapY) {

//Create Map
			var map = new Map(mapX,mapY, tileSize);
			map.init();

//Create Target
			var targets = new Target(map, tileSize);
			targets.createTargets();

//Create PLayer
			var player = new Player(map.getMapArray(), map, targets, tileSize);
//Place The player
			player.setPosition(targets.getPossiblePosToStart());
//Keyboard Events
			document.onkeydown = checkKey;
			function checkKey(e) {
				e = e || window.event;
				if (e.keyCode == '38') {
					
					player.moveUp();
				}
				else if (e.keyCode == '40') {
					
					player.moveDown();
				}
				else if (e.keyCode == '37') {
			
					player.moveLeft();
				}
				else if (e.keyCode == '39') {
					
					player.moveRight();
				}
				else if (e.keyCode == '32') {
					
					player.plantBomb();
				}
			}

		}
//Destroy Game
		static destroy () {

			let targets = document.querySelectorAll('.target');
			let tiles = document.querySelectorAll('.tile');

			Player.resetScore();

			if(tiles){
				targets.forEach(function(element) {
					element.remove();
				});
				tiles.forEach(function(element) {
					element.remove();
				});
			}

		}
	}

	class Session {
		constructor () {
			this.totalTargets = 0;
			this.players = {};
			this.restartBtn = document.querySelector('#restart');
			this.restartBtn.addEventListener('click', function() {
				Session.restart();
			});
		}

		static restart () {
		
			Game.destroy();
			var game = new Game(25, 10, 10);
		}

	}




	var session = new Session();
	




};

#map {
    width: 500px;
    height: 500px;
    background: lightgrey;
    position: relative;
    margin: auto;
}

#game {
    width: 500px;
    height: 500px;
    position: relative;
    margin: auto;
}

#map .tile {
    width: 50px;
    height: 50px;
    background: grey;
    position: absolute;
    outline: 1px solid #eee;
}

#map .target {
    width: 50px;
    height: 50px;
    background: red;
    position: absolute;
    outline: 1px solid #eee;
}

#map #player {
    border-radius: 25%;
    width: 50px;
    height: 50px;
    position: absolute;
    background: #222222;
    z-index: 1;
    transition: 0.1s;
}

.bomb {
    border-radius: 100%;
    width: 50px;
    height: 50px;
    position: absolute;
    background: #333;
    z-index: 1;
    transition: 0.3s ease;
}

.bomb.waiting {
    animation: waiting 2s infinite;
}

.bomb.before {
    animation: before 1s infinite;
}

.bomb.explode {
    animation: explode 1s infinite;
}

#score p, #score span {
    font-family: sans-serif;
    color: #333;
    font-size: 16px;
    display: inline;
}


@keyframes waiting {
    0% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1.1);
    }
}

@keyframes before {
    0% {
        transform: scale(1.0);
        background: orange;
    }
    100% {
        transform: scale(1.2);
        background: red;
    }
}

@keyframes explode {
    0% {
        transform: scale(1.0);
        background: red;
        opacity: 1;
    }
    100% {
        transform: scale(2);
        background: yellow;
        opacity: 0;
    }
}

@keyframes win {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    66% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

h4 {
    font-family: sans-serif;
    color: #333;
    text-align: center;
}

p, strong {
    font-family: sans-serif;
    color: #333;
    text-align: left;
    font-size: 12px;
}

#win {
    position: fixed;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    z-index: 9999999;
    background: rgba(181, 181, 195, 0.1);
    pointer-events: none;
    opacity: 0;
}

#win p {
    color: red;
    font-size: 130px;
    text-align: center;
    font-family: sans-serif;
    text-transform: uppercase;
    height: 100%;
    margin: 0;
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -25%);
    right: 0;
    bottom: 0;
    font-weight: bold;
    text-shadow: 5px 5px #333;
}

#win.show {
    animation: win 4s ease;
}

#restart {
    text-align: center;
    padding: 10px 20px;
    font-family: sans-serif;
    color: #333;
    outline: #ccc 1px solid;
    display: table;
    margin: auto;
    margin-top: 20px;
    cursor: pointer;
    transition: 0.1s ease;
}

#restart:hover {
    background: #eee;
}

<!DOCTYPE html>
       <html>
       <head>
           <title>Bomberman</title>
           <link href="bomber.css" type="text/css" rel="stylesheet">
           <script type="text/javascript" src="1.js"></script>
       </head>
       <body>
        <h4>Space bar to plant a bomb / Arrows to move </h4>
        <div id="win"><p>WIN !</p></div>
        <div id="restart"> RESTART </div>
        <div id="score"><p>Score: </p><span>0</span><strong> / 0</strong></div>

        <section id="game">
            <div id="map">
                <div id="player"></div>
            </div>
        </section>
       
       </body>
</html>

Answer 1

我不确定我是否理解您的问题，但我认为您正在尝试调试 Targets 类中的 createTargets 方法。问题是在 //Show Total Targets 行之前有一个额外的右括号 (})。