My first JavaScript program, am I on the right track?

Projects
1

Hi!

My name is Jon, I live in Sweden and I’m 41 years old, this is my first post, and my first program.

So I finally decided to learn coding and decided to go with JavaScript. I have spent two days studying the syntax, looking at some code and following a few small tutorials. Today I decided to write my first program from scratch. It’s a simple program that rolls two dices, adds them up, and displays the results in numbers and a graph. I also made a scale function, so the graph looks ok wether you roll the dices 50 times or 10.000 times.

All I wish for is someone to look at my code and let me know if I’m on the right path, or if my code is bad and why so. It seems important to start thinking in “the right way” from scratch, since there is so many ways to write code. I don’t want to develop any bad habits.

So here it goes:

<html>

<canvas id="myCanvas" height="400" width="600" style="border:3px solid #888888;"></canvas>

<script>

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');

let i = 0; // initialize counter
let numberOfThrows = 600;
let scale = 800 / numberOfThrows;
let sumOfDices;
let graphArray = [0,0,0,0,0,0,0,0,0,0,0,0,0];

let darkCol = '#666666';
let brightCol = '#AAAAAA';
let fps = 50; // frames per second = speed

mainFunction();

function mainFunction() {
    if (i < numberOfThrows) {
        setTimeout(function() {
            dice1 = randomDice();
            dice2 = randomDice();
            sumOfDices = dice1 + dice2;
            graphArray[sumOfDices] = ++graphArray[sumOfDices];
            drawEverything();
            mainFunction();
        }, 1000/fps);
        i++;
    }
};

function randomDice(){
    dice = Math.floor(Math.random() * 6);
    return dice + 1;
}

function drawEverything(){
    // clears the canvas:
    drawRect(0, 0, canvas.width, canvas.height, '#EEEEEE');

    // draws the boundary lines:
    drawRect(100, 120, 3, 270, brightCol);
    drawRect(10, 110, canvas.width-20, 3, brightCol);

    drawTitle();
    drawGraph();
    drawSidebar();
}

function drawTitle(){
    drawText('Dices', 20, 50, '30px Arial', darkCol);
    drawText('Probability of the sum of 2 dices', 20, 70, '14px Arial', brightCol);
}

function drawSidebar(){
    drawText('Throws:', 20, 150, '14px Arial', darkCol)
    drawText(numberOfThrows, 20, 177,'30px Arial', brightCol);
    drawText('Throw:', 20, 200, '14px Arial', darkCol)
    drawText(i, 20, 227,'30px Arial', brightCol);
    drawText('Dice 1:', 20, 250, '14px Arial', darkCol)
    drawText(dice1, 20, 277,'30px Arial', brightCol);
    drawText('Dice 2:', 20, 300, '14px Arial', darkCol)
    drawText(dice2, 20, 327,'30px Arial', brightCol);
    drawText('Sum:', 20, 350, '14px Arial', darkCol)
    drawText(dice1 + dice2, 20, 377,'30px Arial', brightCol);
}

function drawGraph(){
    drawText('Counts:', 120, 350, '14px Arial', brightCol);
    drawText('Sum:', 120, 380, '14px Arial', darkCol);
        for (count=0; count < 12; count++){   
        drawText(graphArray[count+1], 180+(count*35), 350,'14px Arial', brightCol);
        drawText(count+1, 180+(count*35), 380,'14px Arial', darkCol);
        // draws the diagram:
        drawRect(180+(count*35), 320-graphArray[count+1]*scale, 20, graphArray[count+1]*scale, darkCol)
    }
}

function drawRect(x, y, width, height, color){
    ctx.fillStyle = color;
    ctx.fillRect(x, y, width, height);
}

function drawText(text, x, y, font, color){
    ctx.font = (font);
    ctx.fillStyle = color;
    ctx.fillText(text, x, y);
}

</script>

</html>
2

First off, great project! For whatever reason I had to refactor it for my environment but once that was done, it turned out okay. Really cool project for canvas.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dice Throw Graph</title>
<style>
body {
  font-size: 100%;
}
canvas {
  height: 500px;
  width: 800px;
  border: 3px solid #888888;
}
</style>
</head>
<body>
  <canvas></canvas>

<script>
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

let i = 1;
let numberOfThrows = 600;
let scale = 400 / numberOfThrows;
let sumOfDice;
let graphArray = [0,0,0,0,0,0,0,0,0,0,0,0,0];

let darkCol = '#666666';
let brightCol = '#AAAAAA';
let fps = 50;

mainFunction();

function mainFunction() {
    if (i < numberOfThrows) {
        setTimeout(function() {
            dice1 = randomDice();
            dice2 = randomDice();
            sumOfDice = dice1 + dice2;
            graphArray[sumOfDice] = ++graphArray[sumOfDice];
            drawEverything();
            mainFunction();
        }, 1000 / fps);
        i++;
    }
}
function randomDice(){
    return Math.floor(Math.random() * 6 + 1);
}
function drawEverything(){
    drawRect(0, 0, canvas.width, canvas.height, '#EEEEEE');
    drawRect(70, 34, 1, 270, brightCol);
    drawRect(2, 30, canvas.width-4, 1, brightCol);
    drawTitle();
    drawGraph();
    drawSidebar();
}
function drawTitle(){
    drawText('Dice', 20, 15, '0.8em Arial', darkCol);
    drawText('Probability of the sum of a pair of dice', 20, 25, '0.6em Arial', brightCol);
}
function drawSidebar(){
    drawText('Throws:', 4, 43, '0.6em Arial', darkCol)
    drawText(numberOfThrows, 46, 43,'0.66em Arial', brightCol);
    drawText('Throw:', 4, 55, '0.6em Arial', darkCol)
    drawText(i, 46, 55,'0.66em Arial', brightCol);
    drawText('Dice 1:', 4, 67, '0.6em Arial', darkCol)
    drawText(dice1, 46, 67,'0.66em Arial', brightCol);
    drawText('Dice 2:', 4, 79, '0.6em Arial', darkCol)
    drawText(dice2, 46, 79,'0.66em Arial', brightCol);
    drawText('Sum:', 4, 91, '0.6em Arial', darkCol)
    drawText(dice1 + dice2, 46, 91,'0.66em Arial', brightCol);
}
function drawGraph(){
    drawText('Counts:', 80, 43, '0.6em Arial', brightCol);
    drawText('Sum:', 80, 55, '0.6em Arial', darkCol);
        for (count = 1; count < 12; count++){   
        drawText(graphArray[count + 1], 105 + (count * 16), 43,'0.6em Arial', brightCol);
        drawText(count + 1, 105 + (count * 16), 55,'0.6em Arial', darkCol);
        drawRect(105 + (count * 16), 140 - graphArray[count + 1] * scale, 16, graphArray[count + 1] *scale, darkCol)
    }
}
function drawRect(x, y, width, height, color){
    ctx.fillStyle = color;
    ctx.fillRect(x, y, width, height);
}
function drawText(text, x, y, font, color){
    ctx.font = (font);
    ctx.fillStyle = color;
    ctx.fillText(text, x, y);
}
</script>
</body>
</html>

dice_sum_probability
dice_sum_probability814×514 23.7 KB

I should mention that this will not work in Chrome. Someone else will have to step up to the plate to solve that. I’ve run out of energy.

3

Wow, your screenshot looks very different than what the program looks here. I run it in Chrome on mac OSX. Weird, works exactly the same in Safari. Firefox wouldn’t run it, probably because insufficient HTML declaration.

Program
Program1238×838 57.1 KB

4

No explaining why it took so much wrestling to get it to even work in FF (Windows 7) or why it looks so fuzzy and pixelated.

Wish I had a screen shot of what it first looked like in FF. Even more, I wish it could be replicated. Now when I open your code it runs fine.

dice_graph_ff

and in IE 11

dice_grap%5Bh_ie

Ah, I did save the code earlier, here is what I first saw…

dice_graph_first_run

5

Very strange behaviour. Glad it look right in the end!

1 Like
7

Hi Jon,

My name is Ralph and I know absolutely nothing in Java Script (I just learnt HTML and CSS for the moment) so I cannot tell you if you’re in the right track code-wise.

What I can tell you is that I am absolutely fascinated by what you came up with ! That’s mesmerising ! And I can’t believe you could do that with so little code ! Well done !

Anyway, just to let you know that I just made the decision to learn JS thanks to you !

I wish you all the best for the future!

Best,

Ralph

1 Like