HTML5游戏开发

Question

I'm making an illustrated storybook, with the user clicking to read the next part of the story. I've made three different scenes (three different pages). I can switch from scene One to scene two using eventListener, but I am not able to switch from scene Two to scene Three.

I want to be able to switch between the scenes as in

When the user clicks the mouse:

• if the current scene is the first one, go to the second
• if the current scene is the second one, go to the third
• if the current scene is the third one, go back to the first

But I'm not sure how to do it. Any help is appreciated. Thanks!

I should also mention I'm learning the basics so that I can move forward with Game Development. And so this is a very basic code.

Here is my code:

var c = document.querySelector("#c");
var ctx = c.getContext("2d");

var x = document.getElementById("c");
    //Scene One
    function sceneOne(){
       ctx.fillStyle = "rgb(235,247,255)";
       ctx.fillRect(0,0,750,750);
        ctx.fillStyle = "rgb(0, 85, 255)";
        ctx.font = "70px Impact";
        ctx.fillText("The Story of Winston", 40, 130); 
    };

   //Scene Two
   function sceneTwo() {
        ctx.fillStyle = "rgb(173,239,255)";
        ctx.fillRect(0,0,750,750);
        ctx.fillStyle="rgb(7, 14, 145)";
        ctx.fillText("Lil Winston is born!", 10, 100);
    };

    //Scee Three
    function sceneThree() {
        ctx.fillStyle = "rgb(173,239,255)";
        ctx.fillRect(0,0,750,750);
        ctx.fillStyle = "rgb(7, 14, 145)";
        ctx.fillText("Winston grows up!", 10, 100);
    };
       //Calling scene one
    sceneOne();

Answer 1

The example below contains the functionality that you require.

In summary:

• We use the currentScene variable to keep track of which screen the user is currently on
• Within our event listener we use a switch statement to call the appropriate function to display the next screen, depending on which screen the user is currently on

 var c = document.querySelector("#c"); c.width = 800; c.height = 200; var ctx = c.getContext("2d"); // Init variable to store screen the user is on var currentScene; // Load next screen when user clicks the canvas c.addEventListener("click", function(){ switch(currentScene) { case 1: sceneTwo(); break; case 2: sceneThree(); break; case 3: sceneOne(); break; } }); //Scene One function sceneOne(){ currentScene = 1; ctx.fillStyle = "rgb(235,247,255)"; ctx.fillRect(0,0,750,750); ctx.fillStyle = "rgb(0, 85, 255)"; ctx.font = "70px Impact"; ctx.fillText("The Story of Winston", 40, 130); }; //Scene Two function sceneTwo() { currentScene = 2; ctx.fillStyle = "rgb(173,239,255)"; ctx.fillRect(0,0,750,750); ctx.fillStyle="rgb(7, 14, 145)"; ctx.fillText("Lil Winston is born!", 10, 100); }; //Scee Three function sceneThree() { currentScene = 3; ctx.fillStyle = "rgb(173,239,255)"; ctx.fillRect(0,0,750,750); ctx.fillStyle = "rgb(7, 14, 145)"; ctx.fillText("Winston grows up!", 10, 100); }; //Calling scene one sceneOne(); 

 <canvas id="c"></canvas>