0

我正在尝试用 HTML5 和 JavaScript 制作游戏。我创建了一个播放音频的功能onclick（声音是枪声）。由于某种原因，错误报告说 playSound(volume) 没有定义，我不知道如何修复它。我想找到一个解决方案。一般来说，我对 HTML5/Java 编码很陌生，这是一个作业，所以如果我能得到一些帮助，我会非常感激 :)

我尝试使用此处的代码，但到目前为止它对我来说无法正常工作：HTML5 音频 - 在点击时重复播放声音，无论之前的迭代是否完成

这是到目前为止我正在使用的整个代码，因此您不会感到困惑。

 <!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>

4

0 回答 0