Как создать бои двух ботов в игре камень, ножницы, бумага?

Question

[Stalk007]

У меня есть какое-то ужасное подобие которое плохо работает, но хотелось бы узнать как проще сделать на чистым javascript
Вот код https://codepen.io/stalk000/pen/zYBVrNo

Comments

[Пашенька]

А если бы в игре была 1000 сущностей, а не три, вы бы тоже их все по одной описывали? (Это не вопрос. Пища к размышлению)

[Stalk007]

Пашенька, а сущностей это игроков или выбор предмета?

[Роман]

Stalk007, в данном случае игроки

[Пашенька]

Stalk007, и игроки и предметы. Игроки - один тип сущностей, предметы - другой тип.

[Роман]

Stalk007, вот небольшой лайтовый пример (не особо заморачивался на правильную архитектуру, возможно Пашенька пожелает заморочится и исправить, а заодно и добавит сущности для выбора, а мне уже лень, у меня жена с вином уже 10 минут за спиной ждет)

код

var idCount = 0;

class Player{
  constructor(name){
    this.id = ++idCount;
    this.name = name||`bot ${this.id}`;
  }
  nextChoise(){
    this.choise = ["камень","ножницы","бумага"][Math.floor(Math.random()*3)];
    return this.choise;
  }  
}


class Game{
  constructor(){
    this.members = [];
    this.tour=0;
    this.choiseDiffs={
    	"камень": {win:"ножницы", fall:"бумага"},
      "ножницы": {win:"бумага", fall:"камень"},
      "бумага": {win:"камень", fall:"ножницы"},
    }
  }
  addMember(member){
    if(member instanceof Player){
      this.members.push(member);
    }
  }
  nextTour(){
  	console.log("тур №", ++this.tour);
    console.log("Участники", this.members.map(player=>player.name).join(", "));
    this.members.forEach(player=>console.log(player.name, "->", player.nextChoise()));
    
    const falls = [];
    
    const list = this.members.filter(player=>{
    	return this.members.every(enemy=>{
    		 if(this.choiseDiffs[player.choise].fall===enemy.choise){
         	falls.push(player);
          return false;
         } 
         return true;
    	});    	
    });
    
    if(!list.length){
    	console.log("игра продолжается. тур завешился ничьей.");
      return true;
    }else if(list.length>1){
    	console.log("игра продолжается. часть игроков покидает нас:", falls.map(player=>player.name).join(", "));
      this.members = list;
      return true;
    }else{
    	this.members = list;
    	console.log("игра завершена. победил игрок:", list[0].name)
      return false;
    }
  }
}


const game = new Game();
for(var i=0;i<3;i++){
	const player = new Player();
  game.addMember(player);
}

while(game.nextTour()){}

вывод в консоль

тур № 1
Участники bot 1, bot 2, bot 3
bot 1 -> бумага
bot 2 -> камень
bot 3 -> ножницы
игра продолжается. тур завешился ничьей.

тур № 2
Участники bot 1, bot 2, bot 3
bot 1 -> ножницы
bot 2 -> камень
bot 3 -> камень
игра продолжается. часть игроков покидает нас: bot 1

тур № 3
Участники bot 2, bot 3
bot 2 -> ножницы
bot 3 -> бумага
игра завершена. победил игрок: bot 2

пример на jsfiddle

[Stalk007]

Роман, Вы не так поняли, я создал бои всегда только двух ботов, например: бот1 ножницы бот2 бумага, бот1 выйграл, и при том показывает картинки ножниц и бумаги, так бы я ни писал если бы не ошибка со сменой картинок, попробуйте запустить код на компьютере, там функция должна работать

[Stalk007]

Пашенька, наверное можно сделать черезa аddEventListener

[Пашенька]

Stalk007, вы про ошибку нигде не говорили, да и я не увидел нигде ошибки. Вам написали альтернативную реализацию, о которой вы в своём вопросе и спрашивали и намекнули, что если хотите более простую, но при этом гибкую реализацию, то присмотритесь к ООП (объектно-ориентированное программирование).

[Stalk007]

Пашенька, присмотритесь, когда нажимаете на кнопку бои ботов, то через какое-то количество нажатий выводит надпись например Бот№1 выйграл, Бот№2 проиграл, хотя картинки показывают обратное, мне не нужно гибкая реализация, а простая в том смысле в том чтобы код писался чуть короче в возможностях чистого js

[Пашенька]

Stalk007, ну начнём с того, что по кнопке оно вообще не работает и никаких картинок не выводит. У вас так и сыпятся ошибки о том, что переменные (out, imagesUser, по крайней мере) используются до объявления. Разберитесь с объявлениями переменных и их областями видимости.

[Роман]

Вы не так поняли, я создал бои всегда только двух ботов

Stalk007, я и не должен ничего понимать, мне оно не нужно. Это раз. Вы ничего не поняли. Это 2. Я дал вариант, который легко привязывается к интерфейсу, а использовать его или нет - сами решайте, но без обвинений меня что мол я что то не так понял)
И кстати, в предложенном варианте количество ботов можно задавать любое в интервале от 2-х и до дофига.

На всякий случай рассказываю как мой вариант можно привязать к интерфейсу:

1 варианты для подмены ввода.
1.1 Меняете метод Player.nextChoise()на свой, который будет брать выбор из интерфейса
1.2 либо добавляете в класс метод Player.setChoise(choise) который будет устанавливать выбор игрока в соответствии с нажатыми в интерфейсе вариантами а метод Player.nextChoise() меняете чтобы просто возвращал переменную this.choise
2 подмена вывода - в методе Game.nextTour() вместо console.log(...) делаете вывод нужной информации в интерфейс.
3 создание новой игры - в обработчике нажатия кнопки новой игры: const game = new Game();
4 добавление пользователей в игру:

const player = new Player();
  game.addMember(player);
  // сколько новых игроков добавите, столько участников и будет

5 старт игры - запуск метода game.nextTour() до тех пор пока не вернет false

[Stalk007]

Роман, ясно, спасибо.

Answer 1

[Stalk007]

Разобрался сам, объясню своё чудо. У нас есть переменная BotOne она выбирает рандомное число от 0 до 2,и к примеру у нас будет 0 - камень, 1 - ножницы, 2 - бумага, и делаем ещё одну переменную

let gamer = 1; //единица потому, что это среднее число

значит мы можем сделать так:

if (BotOne === 0) {//здесь мы сравниваем BotTwo и gamer если BotTwo больше чем 1 то бот№2 выйграл, если меньше то проиграл  }//это у нас камень

и так делаем и с бумагой и ножницами
Вот само чудо https://codepen.io/stalk000/pen/LYZKMJe
Адекватная критика кода приветствуется