从节点应用创建带有基本输入文本区域的HTML网页

eh57zj3b  于 2022-12-09  发布在  其他
关注(0)|答案(2)|浏览(125)

我创建了一个简单的3卡扑克游戏,接受用户输入,并通过命令行使用 NodeJS 确定赢家。我需要将其转换为一个网页,用户可以输入信息,它将返回赢家。我不知道如何去做这件事...下面是我的script.JS文件
我希望能够只是写它,并连接它,但我已经尝试了一些事情,但我只是有点困惑,如何完成这给我所写的
这是我的JS

import Hand from "./hand.js";
import prompt from "prompt-sync";

const players = prompt()("How many players?");
// // console.log(`Hey there ${players}`);
const numberOfPlayers = Number(players);

//aggregate user input
let userInput = [];

for (let i = 0; i < numberOfPlayers; i++) {
  const newPrompt = prompt()(`${i} `);
  userInput.push(newPrompt);
}

let hands = userInput.map((val, i) => new Hand(val, i));

hands.sort((a, b) => b.value - a.value);

let winners = [hands[0].order];
let winningValue = hands[0].value;
for (let i = 1; i < hands.length; i++) {
  if (hands[i].value == winningValue) {
    winners.push(hands[i].order);
  } else {
    break;
  }
}

console.log(winners.join(", "));

下面是我的hand.JS文件...

const SUITS = ["h", "s", "d", "c"];
const RANKS = ["2", "3", "4", "5", "6", "7", "8", "9", "T", "J", "Q", "K", "A"];

const RANK_TO_VALUE = {
  2: 2,
  3: 3,
  4: 4,
  5: 5,
  6: 6,
  7: 7,
  8: 8,
  9: 9,
  T: 10,
  J: 10,
  Q: 10,
  K: 10,
  A: 11,
};

//fresh card Hand
export default class Hand {
  constructor(cards = "", order = 0) {
    this.cards = cards.split(" ").map((c) => new Card(c));
    this.value = this.getHandValue();
    this.order = order;
  }
  //straight flush outcome
  hasStraightFlush() {
    return 100000 * (this.hasStraight() && this.hasFlush());
  }
  //three of a kind outcome
  hasThreeOfKind() {
    return (
      10000 *
      (this.cards[0].rank == this.cards[1].rank &&
        this.cards[2].rank == this.cards[1].rank)
    );
  }
  //straight outcome
  hasStraight() {
    let ranks = this.cards.map((c) => c.order);
    ranks.sort();

    return 1000 * (ranks[0] + 2 == ranks[1] + 1 && ranks[1] + 1 == ranks[2]);
  }
  //flush outcome
  hasFlush() {
    return (
      100 *
      (this.cards[0].suit == this.cards[1].suit &&
        this.cards[2].suit == this.cards[1].suit)
    );
  }
  //pair outcome
  hasPair() {
    return (
      20 *
      ((this.cards[0].rank == this.cards[1].rank ||
        this.cards[2].rank == this.cards[1].rank) &&
        !(
          this.cards[0].rank == this.cards[1].rank &&
          this.cards[2].rank == this.cards[1].rank
        ))
    );
  }
  //high card outcome
  hasHighCard() {
    const vals = this.cards.map((c) => c.value);
    vals.sort((a, b) => a - b);
    return vals[vals.length - 1];
  }

  getHandValue() {
    return Math.max(
      this.hasStraightFlush(),
      this.hasThreeOfKind(),
      this.hasFlush(),
      this.hasStraight(),
      this.hasPair(),
      this.hasHighCard()
    );
  }
}

//creates cards with suits and ranks
class Card {
  constructor(input) {
    this.suit = input.charAt(1);
    this.rank = input.charAt(0);
    this.value = RANK_TO_VALUE[this.rank];
    this.order = RANKS.indexOf(this.rank);
  }

  // constructor(suit, rank) {
  //     this.suit = suit
  //     this.rank = rank
  // }
}

//array of 52 cards as one thanks to flatmap
function freshHand() {
  return SUITS.flatMap((suit) => {
    return RANKS.map((rank) => {
      return new Card(suit, rank);
    });
  });
}
plicqrtu

plicqrtu1#

这里是一个开始
删除导入
删除导出默认值
将prompt()变更为prompt(或使用事件行程常式加入输入)
修复Cannot read properties of undefined (reading 'rank')",(我没有"修复"它,只是在数组中只有一个条目的情况下,通过添加一个条件链?使它不会出错)
保存在以<script> Package 的HTML文件中
第一个

lqfhib0f

lqfhib0f2#

Javascript程序可以在节点和浏览器中运行。
在第一种情况下,您运行类似node ./path-to-script.js的程序,您可以直接在终端中添加输入或从程序中获取输出。
对于浏览器,需要有一个使用脚本的HTML页面。在最短的场景中,它很简单:<script>console.log('hello world');</script>-这已经是足够运行Javascript的HTML。
在你当前的设置中,Nodejs正在运行一个脚本,而没有任何HTML或浏览器连接。你从终端运行一个程序,并在终端上打印结果。
如果要将脚本连接到浏览器,则有以下两个选项:
1.继续使用nodej进行计算,并添加一个提供或生成HTML的Web服务器,它允许提交一个包含您的输入的表单,您的nodej可以对该表单提交做出响应。
1.完全停止使用nodejs,因为脚本的主要逻辑不依赖于任何节点特定的东西,您可以在浏览器中运行相同的脚本,这是@mplungjan在另一个答案中给您的建议。手动创建一个HTML文件,并直接向其中添加脚本代码。
选择一个选项是一个偏好问题。

相关问题