使用Javascript的10 Pin保龄球比分计算器

Question

我一直负责用javascript创建保龄球比分计算器。

我是一个完整的JavaScript新手，所以我不知道从哪里开始。这个具体项目有没有简单的例子可以作为参考？

我不断发现它长而曲折的代码，并没有多大意义......

Answer 1

提出的问题是有点含糊，因为不清楚您正在使用什么平台，如果有任何预期的UI类型或仅逻辑的类型，并且期望由您编写的这种计算器的参考可帮助简化答案。

作为坚持代码的一般经验法则，我会建议从构建项目开始。布置任何需要稍后工作的东西。 你会需要超过几个方法/功能吗？如果是这样，布置通缉的结构。 作为一个普通的例子，我想创建一个：

╔════════════════╦═══════════════════════════════════════════════════════════════════╗ 
║ File   ║ Purpose               ║ 
╠════════════════╬═══════════════════════════════════════════════════════════════════╣ 
║ calc.html  ║ Main view (if implemented as html). May have a CSS attached to it.║ 
║ calcView.js ║ JS view controller. To be used for any logic related to views. ║ 
║ calcMain.js ║ Main JS calculator implementation, to separate calculation logic. ║ 
║ ops.html(...) ║ Optional options page, other related extras, and so on.   ║ 
╚════════════════╩═══════════════════════════════════════════════════════════════════╝ 

通过创建空文件开始，然后通过实现一切你一定，你需要开始。沿着这个过程很容易找出还需要什么。

我建议你开始与主JS，而实际上正在写作的第一步：

function mainCalculation(input){ 

return output; 
} 

然后填满它。 在这个过程中，试着弄清楚什么应该分离到它自己的方法，以及这是什么。

这可能会导致你喜欢的东西：

function parseRequest(inputRequestObject){ 
    // TODO 
    return outputRequestData; 
} 

function calcScore(inputRequestData){ 
    // TODO 
    return outputAsINT; 
} 

function generateResponseObject(intScore){ 
    // TODO 
    return outputObject; 
} 

function handleRequest(input){ 

    // This is your main flow of handling a single calculation. 
    // Try to include the minimal amount of logic possible here. 

    var parsedInput = parseRequest(input);  
    var intScore = calcScore(parsedInput); 
    var output = generateResponseObject(intScore); 

    // At this point your response might include extra info, and not just intScore. 
    // Example: the original request data, or error data, if the client needs it. 

    return output; 
} 

一旦这个模型就完成了，你是能够成功地返回结果，尝试设计的UI（如果需要），并计算之间的连接这两个使用视图控制器。

当你到达这一点时，你将确切地知道如何转移到额外的东西，如选项页面，选项控制器等。

最后一个提示： 您可以尝试寻找更多的一般示例，因为您的项目非常具体。 例如，检查this example用于创建Javscript计算器。我不喜欢使用的格式，但作为一个基本指南，它并不坏。

如果您仍然觉得有必要，请穿过伟大的W3Schools JavaScript Tutorial，适合初学者，也可以考虑在JS Examples page的相关示例中进行回顾。

祝你好运！

Answer 2

下面是一个例子，你可以看看。这使用所提供的游戏的字符串表示来计算分数。

bowlingScore（'11 11 11 11 11 11 11 11 11 11'）; // 20

function bowlingScore(frames) { 
 
    var framesArr = frames.split(' ').map((frame) => [...frame]); 
 
    var result = 0; 
 
    
 
    for (var i=0; i < framesArr.length; i++) { 
 
    var current = framesArr[i]; 
 
    
 
    if(current[0] === 'X' && i < 9) { 
 
     result += 10 + getNextElementsScore(framesArr, i, 2); 
 
    } else if(current.length === 2 && current[1] === '/' && i < 9) { 
 
     result += 10 + getNextElementsScore(framesArr, i, 1); 
 
    } else if(current.length === 3) { 
 
     result += getThreeRollScore(current); 
 
    } else { 
 
     result += getElementScore(current, 0) + getElementScore(current, 1); 
 
    } 
 
    } 
 
    return result; 
 
} 
 

 
function getNextElementsScore(framesArr, index, count) { 
 
    var result = getElementScore(framesArr[index + 1], 0); 
 
    var result2 = getElementScore(framesArr[index + 1], 1) 
 
    
 
    if (framesArr[index + 1].length === 1) { 
 
    return count === 1 ? result : result + getElementScore(framesArr[index + 2], 0); 
 
    } 
 
    return count === 1 ? result : (result2 === 10 && result !== 10 ? result2 : result2 + result); 
 
} 
 
    
 
function getElementScore(frame, index) { 
 
    if (frame[index] === 'X' || frame[index] === '/') { 
 
    return 10; 
 
    } 
 
    return parseInt(frame[index]); 
 
} 
 

 
function getThreeRollScore(current) { 
 
    var third = getElementScore(current, 2); 
 
    var second = getElementScore(current, 1); 
 
    var first = getElementScore(current, 0); 
 

 
    return third === 10 && second !== 10 ? third + first : (second === 10 && first !== 10 ? third + second : first + second + third); 
 
}

您可以在这里找到同样的代码： bowlingScoreCalculator.js