NEWS: Total Picture Views: 147060 | Total Article Views: 155593 | Top 5 Most Popular Article: 1. Am I Stuck Algorithm with Becker Robot | 2. How to read a JSON and work with it | 3. PickUpThings with Becker Robot | 4. Encrypted Data GUI (Download .Zip) | 5. Create Wall and Things with Becker

Pizza Builder Javascript

Description:

In this example you will be able to see how canvas work. How random work. Make a button work with a Javascription function.

Code:

<!DOCTYPE html>

<html>
    <head>
        <title>Assignment 2 - Pizza Builder</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <div><center><h1>Sheridan Pizza</h1></center></div>

        <br>
        Select Pizza Size :
        <select id="size">
            <option value="s" >Small</option>
            <option value="m" >Medium</option>
            <option value="l">Large</option>
            <option value="xl">X-Large</option>
        </select>
        <br>
        Select toppings :<br> 
        <input type="checkbox" id="pep">Pepperoni<br>
        <input type="checkbox" id="saus">Sausage<br> 
        <input type="checkbox" id="mush">Mushroom<br>
        <input type="checkbox" id="green">Green Pepper<br>

        Name your pizza : <input type="text" id="name"><br>
        <button onclick="buildPizza();" type="button">Build Pizza</button>
    <center>
        <canvas id="pizza" width="500" height="500">
            Your browser does not support HTML5 canvas...
        </canvas>
    </center>
    <script type="text/javascript">

        var canvas = document.getElementById("pizza");
        var context = canvas.getContext("2d");
        context.strokeStyle = "blue";
        context.strokeRect(0, 0, canvas.width, canvas.height);


        function buildPizza() {
            clear();
            //Toppings
            var pep = document.getElementById("pep").checked;
            var saus = document.getElementById("saus").checked;
            var mush = document.getElementById("mush").checked;
            var green = document.getElementById("green").checked;

            //Pizza Size
            var size = document.getElementById("size").value;
            //var m = document.getElementById("m");
            //var l = document.getElementById("l");
            //var xl = document.getElementById("xl");

            var pizzaName = document.getElementById("name").value;

            var centerX = canvas.width / 2;
            var centerY = canvas.height / 2;


            if (size === "s") {
                var radius = 80;
                var totalSize = 25;
                var toppings = 30;

            } else if (size === "m") {
                var radius = 120;
                var totalSize = 30;
                var toppings = 50;

            } else if (size === "l") {
                var radius = 140;
                var totalSize = 40;
                var toppings = 70;

            } else {
                var radius = 160;
                var totalSize = 50;
                var toppings = 90;

            }
            var radiusTotal = radius;

            //Small


            //Crust
            context.beginPath();
            context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
            context.fillStyle = '#FFCC66';
            context.fill();
            context.lineWidth = 5;
            context.strokeStyle = '#CC9900';
            context.stroke();

            //Peperoni
            if (pep === true) {
                var radius = 7;

                for (var i = 0; i < toppings; i++) {
                    context.beginPath();
                    context.strokeStyle = "red";
                    context.fillStyle = "red";
                    var p = Math.floor(Math.random() * 2) + 1;
                    var m = Math.floor(Math.random() * 2) + 1;
                    var x = Math.floor(Math.random() * radiusTotal - totalSize) + 1;
                    var y = Math.floor(Math.random() * radiusTotal - totalSize) + 1;
                    console.error(p);
                    console.error(m);
                    console.error(x);
                    console.error(y);
                    if (p === 2 && m === 2) {
                        context.arc(centerX + x, centerY + y, radius, 0, 2 * Math.PI, false);
                    } else if (p === 1 && m === 2) {
                        context.arc(centerX - x, centerY + y, radius, 0, 2 * Math.PI, false);
                    } else if (p === 2 && m === 1) {
                        context.arc(centerX + x, centerY - y, radius, 0, 2 * Math.PI, false);
                    } else {
                        context.arc(centerX - x, centerY - y, radius, 0, 2 * Math.PI, false);
                    }
                    context.fill();
                    context.lineWidth = 2;
                    context.stroke();
                }
            }

            //Sausage
            if (saus === true) {
                var radius = 5;

                for (var i = 0; i < toppings; i++) {
                    context.beginPath();
                    context.strokeStyle = "brown";
                    context.fillStyle = "brown";
                    var p = Math.floor(Math.random() * 2) + 1;
                    var m = Math.floor(Math.random() * 2) + 1;
                    var x = Math.floor(Math.random() * radiusTotal - totalSize) + 1;
                    var y = Math.floor(Math.random() * radiusTotal - totalSize) + 1;
                    console.error(p);
                    console.error(m);
                    console.error(x);
                    console.error(y);
                    if (p === 2 && m === 2) {
                        context.arc(centerX + x, centerY + y, radius, 0, 2 * Math.PI, false);
                    } else if (p === 1 && m === 2) {
                        context.arc(centerX - x, centerY + y, radius, 0, 2 * Math.PI, false);
                    } else if (p === 2 && m === 1) {
                        context.arc(centerX + x, centerY - y, radius, 0, 2 * Math.PI, false);
                    } else {
                        context.arc(centerX - x, centerY - y, radius, 0, 2 * Math.PI, false);
                    }
                    context.fill();
                    context.lineWidth = 2;
                    context.stroke();

                }

            }

            //Mushroom
            if (mush === true) {

                for (var i = 0; i < toppings; i++) {
                    context.strokeStyle = "gray";
                    context.fillStyle = "gray";
                    var p = Math.floor(Math.random() * 2) + 1;
                    var m = Math.floor(Math.random() * 2) + 1;
                    var x = Math.floor(Math.random() * radiusTotal - totalSize) + 1;
                    var y = Math.floor(Math.random() * radiusTotal - totalSize) + 1;
                    console.error(p);
                    console.error(m);
                    console.error(x);
                    console.error(y);
                    if (p === 2 && m === 2) {
                        context.strokeRect(centerX + x, centerY + y, 5, 5);
                        context.fillRect(centerX + x, centerY + y, 5, 5);
                    } else if (p === 1 && m === 2) {
                        context.strokeRect(centerX - x, centerY + y, 5, 5);
                        context.fillRect(centerX - x, centerY + y, 5, 5);
                    } else if (p === 2 && m === 1) {
                        context.strokeRect(centerX + x, centerY - y, 5, 5);
                        context.fillRect(centerX + x, centerY - y, 5, 5);
                    } else {
                        context.strokeRect(centerX - x, centerY + y, 5, 5);
                        context.fillRect(centerX - x, centerY + y, 5, 5);
                    }
                }
            }

            //Green Pepper
            if (green === true) {
                for (var i = 0; i < toppings; i++) {
                    context.strokeStyle = "green";
                    context.fillStyle = "green";
                    var p = Math.floor(Math.random() * 2) + 1;
                    var m = Math.floor(Math.random() * 2) + 1;
                    var x = Math.floor(Math.random() * radiusTotal - totalSize) + 1;
                    var y = Math.floor(Math.random() * radiusTotal - totalSize) + 1;
                    console.error(p);
                    console.error(m);
                    console.error(x);
                    console.error(y);
                    if (p === 2 && m === 2) {
                        context.strokeRect(centerX + x, centerY + y, 7, 5);
                        context.fillRect(centerX + x, centerY + y, 7, 5);
                    } else if (p === 1 && m === 2) {
                        context.strokeRect(centerX - x, centerY + y, 7, 5);
                        context.fillRect(centerX - x, centerY + y, 7, 5);
                    } else if (p === 2 && m === 1) {
                        context.strokeRect(centerX + x, centerY - y, 7, 5);
                        context.fillRect(centerX + x, centerY - y, 7, 5);
                    } else {
                        context.strokeRect(centerX - x, centerY + y, 7, 5);
                        context.fillRect(centerX - x, centerY + y, 7, 5);
                    }
                }

            }
            context.strokeStyle = "Black";
            context.fillStyle = "Black";
            context.font = "30px Arial";
            context.fillText(pizzaName, 50, 50);

        }
        function clear() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.strokeStyle = "black";
            context.lineWidth = 1;
            context.strokeRect(0, 0, canvas.width, canvas.height);
        }

    </script>
</body>
</html>
Attachments: None

Tags: Random Canvas Function

Total Views: 1294

My name is Jean-Mathieu

I created this website so other people could enjoy finding useful stuff easier. If you have any question do not hesitate to contact me.

jean8mathieuCreated on 01/17/15


affiliate_link

Disclosure: We are a website that needs compensation to operate like any other website on the internet.
We may receive consideration for our reviews but we are totally unbiased and do not accept paid reviews or fake reviews claiming to be something they are not.