Im trying to make a game in HTML5 and JavaScript. I created a function to play audio onclick (the sound is a gunshot). For some reason the error report says the playSound(volume) is not defined and I'm not sure how to fix it. I would like to find a solution to this. I'm pretty new to coding HTML5/Java in general and this is for an assignment, So I'd really appreciate it if i could get some help :)
I tried using the code from here but its not working properly for me so far : HTML5 audio - play sound repeatedly on click, regardless if previous iteration has finished
Here is the whole code for what I'm using so far so you don't get confused.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<style type="text/css">
.cvs { background-image:url('Game/Backdrop.jpg');}
body
{
background-position: left 40px;
background-attachment: fixed;
background-repeat: repeat;
background-color:#131516;
}
</style>
<script type="text/javascript">
/* Global Var*/
var posX = 0;
var posY = 0;
var sound = new Audio("Game/fire.WAV");
sound.preload = 'auto';
sound.load();
/* end of global var*/
function handleClick(event)
{
console.log('handleclick');
console.log('BANG');
drawBlood();
playSound(volume);
}
function playSound(volume)
{
var click = sound.cloneNode();
click.volume = volume;
click.play();
}
function moveTarget(event)
{
//console.log('moveTarget');
var mCanvas = document.getElementById("myCanvas");
var mContext = mCanvas.getContext('2d');
clearCanvas();
drawTarget();
}
function drawTarget()
{
var mCanvas = document.getElementById("myCanvas");
var mContext = mCanvas.getContext('2d');
var mTarget = new Image();
var mouseX = getXCoords(event);
var mouseY = getYCoords(event);
var offSetX = leftOffSet(event);
var offSetY = scrollOffset(event);
var posX = mouseX - offSetX;
var posY = mouseY - offSetY;
var targetX = 31;
var targetY = 33;
posX = posX - targetX;
posY = posY - targetY
mTarget.src="Game/target.png";
mTarget.onload=function()
{
//clearCanvas();
mContext.drawImage(mTarget,posX,posY);
}
}
function getXCoords(event)
{
var x = event.clientX;
return(x);
}
function getYCoords(event)
{
var y = event.clientY;
return(y);
}
function clearCanvas()
{
var mCanvas = document.getElementById("myCanvas");
var mContext = mCanvas.getContext('2d');
mContext.clearRect(0,0,mCanvas.width,mCanvas.height);
}
function leftOffSet(event)
{
var mCanvas = document.getElementById("myCanvas");
var winX = mCanvas.offsetLeft - mCanvas.scrollLeft;
return(winX);
}
function scrollOffset(event)
{
var mCanvas = document.getElementById("myCanvas");
var winY = mCanvas.offsetTop - mCanvas.scrollTop;
return(winY);
}
function drawBlood()
{
var mCanvas = document.getElementById("myCanvas");
var mContext = mCanvas.getContext('2d');
var mBlood = new Image();
var mouseX = getXCoords(event);
var mouseY = getYCoords(event);
var offSetX = leftOffSet(event);
var offSetY = scrollOffset(event);
var posX = mouseX - offSetX;
var posY = mouseY - offSetY;
var bloodX = 133;
var bloodY = 44;
posX = posX - bloodX;
posY = posY - bloodY
mBlood.src="Game/blood.png";
mBlood.onload=function()
{
console.log(posX, posY);
console.log("This is where blood is drawn");
mContext.drawImage(mBlood,posX,posY);
//clearCanvas();
}
}
</script>
<audio src="Game/wolverine.mp3" autoplay="autoplay"></audio>
<audio src="Game/Deadpool Game - Main Menu Theme.mp3" autoplay="autoplay" loop="loop"> </audio>
<!--<BGSOUND src="Game/wolverine.mp3"
balance = 0
delay = 100
loop = 1
volume = -500>
<BGSOUND src="Game/Deadpool%20Game%20-%20Main%20Menu%20Theme.mp3"
balance = 0
delay = 10
loop = -1
volume = -500>
-->
</head>
<body>
<div style="width:1200px; height:900px; margin:0 auto;">
<canvas id="myCanvas" width="1200px" height="900px" class="cvs" onclick="handleClick(event)" onmousemove="moveTarget(event)"></canvas>
