La création d'un bouton sur un HTML5 canvas à l'aide de JavaScript

Je suis en train d'écrire un simple jeu pour enseigner un Gallois de base en utilisant le HTML5 canvas et JavaScript.

J'ai actuellement une page web, qui affiche une toile, et sur la toile, le "bouton démarrer" a été élaboré, lequel l'utilisateur clique pour lancer le jeu.

Je veux maintenant ajouter de la fonctionnalité à ce bouton, de sorte que lorsque l'utilisateur clique dessus, le premier niveau du jeu est affiché sur la toile. Cependant, je vais avoir un peu de mal avec cela, et je me demandais si quelqu'un pouvait m'aider.

J'ai le code suivant dans mon index.html fichier:

Dans une section masquée dans la tête, j'ai:

<section hidden>
<img id="StartButton" src="StartButton.png" alt="Start Button" width="179" height="180" />

<script type="text/javascript">
    /* Create a canvas layer to display text */
    function displayText(textLayer, message){
        var textLayerContext = textLayer.getContext();
        textLayer.clear();
        textLayerContext.font = "18pt Calibri";
        textLayerContext.fillStyle = "black";
        textLayerContext.fillText(message, 10, 10);
    }

    /* Create a canvas layer to display the button */
    window.onload = function(){
        var stage = new Kinetic.Stage({
            container: "container",
            width: 179,
            height: 180
        });
        var buttonLayer = new Kinetic.Layer();
        var textLayer = new Kinetic.Layer();
</script>


</section>

Dans le body onLoad... j'ai un appel à la fonction startGame(), et ensuite le code suivant dans le corps tags:

<body onLoad="startGame()">
    <h1>Home</h1>
    <p1>The purpose of this website is to allow users to learn some basic Welsh by playing the game below. <br /><br /></p1>
    <p2>

    <canvas id="gameCanvas" width="700" height="300" style="border:1px dotted">
    Your browser does not support the canvas element.
    </canvas>

    <script type="text/javascript">
        /* Create the canvas, and add some global variables. */
        var myGameCanvas = document.getElementById("gameCanvas");
        var context = myGameCanvas.getContext("2d");
        var image = new Image();
        var imageSource;
        var imageX;
        var imageY;

        /* Global variables- game elements */
        var currentLevel=1;
        var totalLevels=5;
        var currentScore=0;
        var currentScorePositionX=100;
        var currentScorePositionY=100;


        /* This function starts the game, and calls all of the other functions required to play the game */
        function startGame(){
            drawGameElements();
            drawStartButton(); 
            /* Now need to add an event listener to call drawLevelOneElements() when
                the start button is clicked. */
            myGameCanvas.addEventListener("click", drawLevelOneElements, false);
            //drawLevelOneElements();
            //game_id=setInterval(game_loop, 50);
        }

        /* This function draws the game elements */
        function drawGameElements(){

            /* Draw a line for the 'score bar'. */
            context.moveTo(0, 25);
            context.lineTo(700, 25);
            context.stroke();

            /* Draw current level/total levels on the left, and current score on the right. */
            context.font = "11pt Calibri"; /* Text font & size */
            context.strokeStyle = "black"; /* Font colour */
            context.strokeText(currentLevel + "/" + totalLevels, 10, 15);
            context.strokeText(currentScore, 650, 15);
        }

        /* This function draws a start button which the user can click to start the game */
        function drawStartButton(){
            image.onload = function(){
                context.drawImage(image, 260.5, 60);
            };
            image.src = "StartButton.png";
            /** Now I need to add an event listener to the area of the canvas on 
                on which the button image is displayed, in order to 'listen' for 
                a click on the button */
            var boundingBox = myGameCanvas.getBoundingClientRect();
            var mouseX = (mouse_event.clientX-boundingBox.left) * (myGameCanvas.width/boundingBox.width);
            var mouseY = (mouse_event.clientY-boundingBox.top) * (myGameCanvas.height/boundingBox.height);
            var pixels = context.getImageData(mouseX, mouseY, 1, 1);

            /** There maybe more than one pixel at this location so use a loop
                to test whether any of the pixels have an alpha value greater than
                0. With pixel data, 3 is alpha, so check data[3] and every fourth
                element in data after that. */
            //for (var i=3; i<pixels.data.length; i+=4;){
                /** If a non- zero alpha is found, stop and return "true"- the click
                    was on a part of the canvas that has colour on it. */
            // if(pixels.data[i]!=0) return true;
            //}

            /** If the function gets here, then the mouse click wasn't on a painted
                part of the canvas. */
            //return false;
            /**myGameCanvas.getElementById("StartButton").onClick = function(e){
                drawLevelOneElements();
            } */               
        }


        /* This function draws the elements for level 1. */
        function drawLevelOneElements(){
            var context = canvas.getContext("2d");

            /* Draw the images for numbers 1-10.*/
            var image1 = new Image();
            /* Test that this code is being executed */
            context.moveTo(300, 300);
            context.font = "11pt Calibri";
            context.strokeStyle = "black";
            context.strokeText("Testing",300, 300);
            /* End of test */

            image1.onLoad = function(){
                context.drawImage(image1, 50, 50);
                };
            image1.src="1.png";
        }

        /* This function is what will be used to draw the images on the canvas */
        function drawImage(x, y){
            var numberImage = new Image();
            numberImage.src = imageSource;
            context.drawImage(numberImage, x, y);

        }

    </script>
    <br /><br /></p2>
    <p3>Use this paragraph to enter text that provides the user with instructions for how to play the game. <br />
        Update the instructions so that they're appropriate to whatever level the user is currently playing.</p3>
</body>

Actuellement, lorsque j'affiche la page dans le navigateur, j'ai un "bouton démarrer" affiché dans la toile, comme je l'ai mentionné ci-dessus. Ce que je ne peux pas travailler, est de savoir comment obtenir de la toile à l'appel de la fonction drawLevelOneElements() lorsque le bouton de démarrage est cliqué... je serais très reconnaissant si quelqu'un pourrait s'il vous plaît me diriger dans la bonne direction?

Merci d'avance!

Merci pour votre réponse. J'ai essayé de faire les changements que vous avez suggéré, donc j'ai maintenant:

 function startGame(){
            drawGameElements();
            drawStartButton(); 
            /* Now need to add an event listener to call drawLevelOneElements() when
                the start button is clicked. */
            //myGameCanvas.addEventListener("click", drawLevelOneElements, false);
            //drawLevelOneElements();
            //game_id=setInterval(game_loop, 50);
            /*Add event listener to the canvas */
            myGameCanvas.addEventListener('click', function(e){
                console.log('click: ' + e.offsetX + '/' + e.offsetY);
                var buttonHit = collides(StartButton, e.offsetX, e.offsetY);
                if(buttonHit){
                    alert('collision: ' + buttonHit.x + '/' + buttonHit.y);
                } else {
                    console.log('no collision');
                }
            }, false);
        }

mais lorsque j'affiche la page dans le navigateur, j'ai encore juste avoir de la toile avec le bouton démarrer image affichée, et aucune fonctionnalité... c'est à dire en cliquant sur ne rien faire...

Des suggestions?

InformationsquelleAutor Someone2088 | 2012-04-22