How to make HTML5 game accessible to users

Report · Feb 21, 2023

Hi. I've tried to recreate a simple AS3 game with the HTML5 canvas, using Javascript. This is the first time I've done this and it's for pupils and staff to use at our school.

It all works fine when I test it from Animate - it opens in a browser and plays. But when I publish it and I get HTML, JS and FLA files, clicking on the HTML file just brings up the visuals, but it isn't interactive in any way. I've tried using the 'Include Javascript in HTML' option, but that didn't make any difference.

Our school has a website, but it doesn't allow for installing game files. Is there a way for people in the school to access and play it locally, maybe from the server - or even from individual PCs' C drives?

The reason I don't want to use AS3 is because the pupils mainly use iPads now.

Thanks.

Report · Feb 21, 2023

they should be able to use the html, js and source folder(s), from any web server, but not locally

In Response To kglad · Feb 23, 2023

Thanks for the reply. I've now discovered IIS on our server and I've put the html and js files, plus the images and sounds folders in the root directory. I can now see the game and interact with some of it but not all - and there's no sound. Am I missing something?

In Response To pauls73381349 · Feb 23, 2023

i'm not sure that should be in your root directory. test by creating a game directory and putting the files there.

if you detect any problem while testing open your browser's developer console and track the issue. if you have trouble, post a link to your online game and explain the problem and how to trigger it.

In Response To kglad · Feb 23, 2023

I tried what you said and it still didn't work. I've attached a screenshot of the Chrome console errors.

In Response To pauls73381349 · Feb 23, 2023

It says variables are not defined, but it all works fine when tested within Animate.

In Response To pauls73381349 · Feb 23, 2023

what are the lines of code just above and below line 1370?

what is playPiano?

In Response To kglad · Feb 24, 2023

I don't know what those lines of code are.

playPiano is the variable(?) that plays the piano sound. Here's the code - I've taken out the references to the other instruments, for clarity.

function init(){
	
	var assetPath = "sounds/";
	var sounds = [
		{src:"piano.mp3", id:"piano"}
	]	
	
	var preload = new createjs.LoadQueue()
	preload.addEventListener("fileload", handleFileComplete)
	preload.loadFile (assetPath)
	
	function handleFileComplete(event){
		
		createjs.Sound.registerSounds(sounds, assetPath)
		playPiano = createjs.Sound.play("piano")
}
}
init()

piano.mp3 is in a folder called 'sounds', which is in the same folder as the html and js files.

In Response To pauls73381349 · Feb 24, 2023

@pauls73381349

you're using a fla that you did not create and that you do not understand?

In Response To kglad · Feb 24, 2023

I did create the fla and it works fine in AS3 - and in HTML5/JS when testing. My query is why it's not working when I try to access it on a web server.

In Response To pauls73381349 · Feb 24, 2023

The lines of code that I don't understand are in the Chrome Console in the screenshot.

In Response To pauls73381349 · Feb 24, 2023

are you requiring user interaction (eg, mouse click) to play your sound?

In Response To kglad · Feb 24, 2023

Yes. I click on a play button.

In Response To pauls73381349 · Feb 24, 2023

which line is 1370 in the code you showed and where is playPiano declared?

In Response To kglad · Feb 27, 2023

My apologies - I hadn't realised that 1370 referred to a line of code in the js file. I knew I hadn't written that much code and I'm used to AS3 where the only code is what I've written.

Here's the code around that line:

function activatePiano() {
			
	if(!pianoActive){
		
		pianoActive = true
		root.piano_btn.gotoAndStop(4)
		root.piano_mc.alpha = 1
		playPiano.muted = false
		if(soundPlaying){
			root.piano_mc.play()
		}
		
	} else {
		
(ln 1370)	pianoActive = false
		root.piano_btn.gotoAndStop(0)
		root.piano_mc.gotoAndStop(0)
		root.piano_mc.alpha = 0.5
		playPiano.muted = true
		
	}

The sound file should be playing already, but muted, and piano_mc should be faded out a bit. When piano_btn is clicked, piano_btn gets a red line around it (frame 4), piano_mc gets full alpha and starts a looped animation and the piano audio is unmuted.

When it's clicked again, piano_mc's animation stops at frame 0 and is faded out, the red line around the button disappears (frame 0) and the sound is muted.

In Response To pauls73381349 · Feb 27, 2023

pianoActive is defined right at the beginning of the code, along woith all the other instruments:

let pianoActive = false

In Response To pauls73381349 · Feb 27, 2023

in the timeline frame where you defined:

function activatePiano(){}

copy from your fla and paste here, all the code. ie, just that one frame of code is needed, at this point.

In Response To kglad · Feb 27, 2023

Almost all of the code is in that frame:

let root = this
var buttonClickSound

let congasActive = false
let bassActive = false
let guiroActive = false
let guitarActive = false
let pianoActive = false
let saxophoneActive = false
let triangleActive = false
let trumpetActive = false
let allActive = false

let soundPlaying = false

root.congas_mc.alpha = 0.5
root.bass_mc.alpha = 0.5
root.guiro_mc.alpha = 0.5
root.guitar_mc.alpha = 0.5
root.piano_mc.alpha = 0.5
root.saxophone_mc.alpha = 0.5
root.triangle_mc.alpha = 0.5
root.trumpet_mc.alpha = 0.5

function init(){
	
	var assetPath = "sounds/";
	var sounds = [
		{src:"congas.mp3", id:"congas"},
		{src:"bass.mp3", id:"bass"},
		{src:"guiro.mp3", id:"guiro"},
		{src:"guitar.mp3", id:"guitar"},
		{src:"piano.mp3", id:"piano"},
		{src:"saxophone.mp3", id:"saxophone"},
		{src:"triangle.mp3", id:"triangle"},
		{src:"trumpet.mp3", id:"trumpet"}
	]	
	
	var preload = new createjs.LoadQueue()
	preload.addEventListener("fileload", handleFileComplete)
	preload.loadFile (assetPath)
	
	function handleFileComplete(event){
		
		createjs.Sound.registerSounds(sounds, assetPath)
		playCongas = createjs.Sound.play("congas")
		playBass = createjs.Sound.play("bass")
		playGuiro = createjs.Sound.play("guiro")
		playGuitar = createjs.Sound.play("guitar")
		playPiano = createjs.Sound.play("piano")
		playSaxophone = createjs.Sound.play("saxophone")
		playTriangle = createjs.Sound.play("triangle")
		playTrumpet = createjs.Sound.play("trumpet")
		
	}

	root.play_btn.addEventListener("click", buttonClicked.bind(this));

	function buttonClicked () {
	
		if(!soundPlaying){
			
			playCongas.play()
			if(!congasActive){
				playCongas.muted = true
			}
			playBass.play()
			if(!bassActive){
				playBass.muted = true
			}
			playGuiro.play()
			if(!guiroActive){
				playGuiro.muted = true
			}
			playGuitar.play()
			if(!guitarActive){
				playGuitar.muted = true
			}
			playPiano.play()
			if(!pianoActive){
				playPiano.muted = true
			}
			playSaxophone.play()
			if(!saxophoneActive){
				playSaxophone.muted = true
			}
			playTriangle.play()
			if(!triangleActive){
				playTriangle.muted = true
			}
			playTrumpet.play()
			if(!trumpetActive){
				playTrumpet.muted = true
			}
			soundPlaying = true
			if(congasActive){
				root.congas_mc.play()
			}
			if(bassActive){
				root.bass_mc.play()
			}
			if(guiroActive){
				root.guiro_mc.play()
			}
			if(guitarActive){
				root.guitar_mc.play()
			}
			if(pianoActive){
				root.piano_mc.play()
			}
			if(saxophoneActive){
				root.saxophone_mc.play()
			}
			if(triangleActive){
				root.triangle_mc.play()
			}
			if(trumpetActive){
				root.trumpet_mc.play()
			}
			
		} else {
			
			playCongas.stop()
			playBass.stop()
			playGuiro.stop()
			playGuitar.stop()
			playPiano.stop()
			playSaxophone.stop()
			playTriangle.stop()
			playTrumpet.stop()
			
			root.congas_mc.gotoAndStop(0)
			root.bass_mc.gotoAndStop(0)
			root.guiro_mc.gotoAndStop(0)
			root.guitar_mc.gotoAndStop(0)
			root.piano_mc.gotoAndStop(0)
			root.saxophone_mc.gotoAndStop(0)
			root.triangle_mc.gotoAndStop(0)
			root.trumpet_mc.gotoAndStop(0)
			
			soundPlaying = false
			
		}
		
	}

	root.congas_btn.addEventListener("click", activateCongas.bind(this))

	function activateCongas() {
	
		if(!congasActive){

			congasActive = true
			root.congas_btn.gotoAndStop(4)
			root.congas_mc.alpha = 1
			playCongas.muted = false
			if(soundPlaying){
				root.congas_mc.play()
			}

		} else {

			congasActive = false
			root.congas_btn.gotoAndStop(0)
			root.congas_mc.alpha = 0.5
			root.congas_mc.gotoAndStop(0)
			playCongas.muted = true
			
		}
	
	}

	root.bass_btn.addEventListener("click", activateBass.bind(this))

	function activateBass() {
	
		if(!bassActive){

			bassActive = true
			root.bass_btn.gotoAndStop(4)
			root.bass_mc.alpha = 1
			playBass.muted = false
			if(soundPlaying){
				root.bass_mc.play()
			}

		} else {

			bassActive = false
			root.bass_btn.gotoAndStop(0)
			root.bass_mc.gotoAndStop(0)
			root.bass_mc.alpha = 0.5
			playBass.muted = true

		}
	
	}

	root.guiro_btn.addEventListener("click", activateGuiro.bind(this))

	function activateGuiro() {
	
		if(!guiroActive){

			guiroActive = true
			root.guiro_btn.gotoAndStop(4)
			root.guiro_mc.alpha = 1
			playGuiro.muted = false
			if(soundPlaying){
				root.guiro_mc.play()
			}

		} else {

			guiroActive = false
			root.guiro_btn.gotoAndStop(0)
			root.guiro_mc.gotoAndStop(0)
			root.guiro_mc.alpha = 0.5
			playGuiro.muted = true

		}
	
	}

	root.guitar_btn.addEventListener("click", activateGuitar.bind(this))

	function activateGuitar() {
	
		if(!guitarActive){

			guitarActive = true
			root.guitar_btn.gotoAndStop(4)
			root.guitar_mc.alpha = 1
			playGuitar.muted = false
			if(soundPlaying){
				root.guitar_mc.play()
			}

		} else {

			guitarActive = false
			root.guitar_btn.gotoAndStop(0)
			root.guitar_mc.gotoAndStop(0)
			root.guitar_mc.alpha = 0.5
			playGuitar.muted = true

		}
	
	}

	root.piano_btn.addEventListener("click", activatePiano.bind(this))

	function activatePiano() {
	
		if(!pianoActive){

			pianoActive = true
			root.piano_btn.gotoAndStop(4)
			root.piano_mc.alpha = 1
			playPiano.muted = false
			if(soundPlaying){
				root.piano_mc.play()
			}

		} else {

			pianoActive = false
			root.piano_btn.gotoAndStop(0)
			root.piano_mc.gotoAndStop(0)
			root.piano_mc.alpha = 0.5
			playPiano.muted = true

		}
	
	}

	root.saxophone_btn.addEventListener("click", activateSaxophone.bind(this))

	function activateSaxophone() {
	
		if(!saxophoneActive){

			saxophoneActive = true
			root.saxophone_btn.gotoAndStop(4)
			root.saxophone_mc.alpha = 1
			playSaxophone.muted = false
			if(soundPlaying){
				root.saxophone_mc.play()
			}

		} else {

			saxophoneActive = false
			root.saxophone_btn.gotoAndStop(0)
			root.saxophone_mc.gotoAndStop(0)
			root.saxophone_mc.alpha = 0.5
			playSaxophone.muted = true

		}
	
	}

	root.triangle_btn.addEventListener("click", activateTriangle.bind(this))

	function activateTriangle() {
	
		if(!triangleActive){

			triangleActive = true
			root.triangle_btn.gotoAndStop(4)
			root.triangle_mc.alpha = 1
			playTriangle.muted = false
			if(soundPlaying){
				root.triangle_mc.play()
			}

		} else {

			triangleActive = false
			root.triangle_btn.gotoAndStop(0)
			root.triangle_mc.gotoAndStop(0)
			root.triangle_mc.alpha = 0.5
			playTriangle.muted = true

		}
	
	}

	root.trumpet_btn.addEventListener("click", activateTrumpet.bind(this))

	function activateTrumpet() {
	
		if(!trumpetActive){

			trumpetActive = true
			root.trumpet_btn.gotoAndStop(4)
			root.trumpet_mc.alpha = 1
			playTrumpet.muted = false
			if(soundPlaying){
				root.trumpet_mc.play()
			}

		} else {

			trumpetActive = false
			root.trumpet_btn.gotoAndStop(0)
			root.trumpet_mc.gotoAndStop(0)
			root.trumpet_mc.alpha = 0.5
			playTrumpet.muted = true

		}
	
	}

	root.allInstruments_btn.addEventListener("click", activateAll.bind(this))

	function activateAll() {
	
		if(!allActive){

			root.congas_btn.gotoAndStop(4)
			root.bass_btn.gotoAndStop(4)
			root.guiro_btn.gotoAndStop(4)
			root.guitar_btn.gotoAndStop(4)
			root.piano_btn.gotoAndStop(4)
			root.saxophone_btn.gotoAndStop(4)
			root.triangle_btn.gotoAndStop(4)
			root.trumpet_btn.gotoAndStop(4)
			congasActive = true
			bassActive = true
			guiroActive = true
			guitarActive = true
			pianoActive = true
			saxophoneActive = true
			triangleActive = true
			trumpetActive = true
			root.congas_mc.alpha = 1
			root.bass_mc.alpha = 1
			root.guiro_mc.alpha = 1
			root.guitar_mc.alpha = 1
			root.piano_mc.alpha = 1
			root.saxophone_mc.alpha = 1
			root.triangle_mc.alpha = 1
			root.trumpet_mc.alpha = 1
			playCongas.muted = false
			playBass.muted = false
			playGuiro.muted = false
			playGuitar.muted = false
			playPiano.muted = false
			playSaxophone.muted = false
			playTriangle.muted = false
			playTrumpet.muted = false
			if(soundPlaying){
				root.congas_mc.play()
				root.bass_mc.play()
				root.guiro_mc.play()
				root.guitar_mc.play()
				root.piano_mc.play()
				root.saxophone_mc.play()
				root.triangle_mc.play()
				root.trumpet_mc.play()
			}
			allActive = true

		} else {

			root.congas_btn.gotoAndStop(0)
			root.bass_btn.gotoAndStop(0)
			root.guiro_btn.gotoAndStop(0)
			root.guitar_btn.gotoAndStop(0)
			root.piano_btn.gotoAndStop(0)
			root.saxophone_btn.gotoAndStop(0)
			root.triangle_btn.gotoAndStop(0)
			root.trumpet_btn.gotoAndStop(0)
			congasActive = false
			bassActive = false
			guiroActive = false
			guitarActive = false
			pianoActive = false
			saxophoneActive = false
			triangleActive = false
			trumpetActive = false
			root.congas_mc.alpha = 0.5
			root.bass_mc.alpha = 0.5
			root.guiro_mc.alpha = 0.5
			root.guitar_mc.alpha = 0.5
			root.piano_mc.alpha = 0.5
			root.saxophone_mc.alpha = 0.5
			root.triangle_mc.alpha = 0.5
			root.trumpet_mc.alpha = 0.5
			playCongas.muted = true
			playBass.muted = true
			playGuiro.muted = true
			playGuitar.muted = true
			playPiano.muted = true
			playSaxophone.muted = true
			playTriangle.muted = true
			playTrumpet.muted = true
			allActive = false
			root.congas_mc.gotoAndStop(0)
			root.bass_mc.gotoAndStop(0)
			root.guiro_mc.gotoAndStop(0)
			root.guitar_mc.gotoAndStop(0)
			root.piano_mc.gotoAndStop(0)
			root.saxophone_mc.gotoAndStop(0)
			root.triangle_mc.gotoAndStop(0)
			root.trumpet_mc.gotoAndStop(0)

		}
	
	}

}

init ();

Report · Feb 21, 2023

The include JavaScript would have helped with some sescurity issues. The other thing you can do is uncheck any spritesheet options, let it create individual images. That would then test locally ok, and you could publish again using spritesheets for the server based version, to help the page load quicker.

I didn't yet figure out a way for my iPad to open local HTML files.

Report · Mar 01, 2023

Hi. I've sorted it, thanks. I'd set the site up incorrectly on IIS. Thank you all for your help.

In Response To pauls73381349 · Mar 01, 2023

@pauls73381349

you're welcome.