0

HTML5 と JavaScript でゲームを作ろうとしています。音声を再生する関数を作成しましたonclick(音は銃声です)。何らかの理由で、エラー レポートに playSound(volume) が定義されていないと表示され、修正方法がわかりません。これに対する解決策を見つけたいと思います。私は一般的に HTML5/Java のコーディングにかなり慣れていませんが、これは課題のためです。

here のコードを使用してみましたが、これまでのところ正しく機能していません: 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