使用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