HTML5 Game Development


#1

Hi everyone,

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:

<canvas id ="c" width="750" height="750"></canvas>
 <script>
 	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();
        //Calling scene two
	    x.addEventListener("click", sceneTwo);