Fatal编程技术网
  • javascript/
  • Javascript 当特定图像与其他图像接触时，不会触发音频

Javascript 当特定图像与其他图像接触时，不会触发音频

javascript html function audio

Javascript 当特定图像与其他图像接触时，不会触发音频,javascript,html,function,audio,konvajs,Javascript,Html,Function,Audio,Konvajs,我不是以英语为母语的人，我是编程语言的初学者。我知道我的解释不是最好的，但我正在努力向人们更好地解释，以理解我正在尝试做的事情。所以，请对我耐心一点，不要试图否决它，因为它伤害了我的感情，而不是告诉我为什么我的解释不好。谢谢你抽出时间来读这篇文章。多谢各位 我正在做一个名为硬币分类游戏的帆布游戏，它将硬币拖到正确的小猪存钱罐图像上，当硬币碰到正确的图像或没有正确的图像时，它会发出正确和错误的声音。 我现在一直处于if状态 在当前状态下，当特定硬币图像接触到特定小猪存钱罐图像时，将播放正确的声音。

我不是以英语为母语的人，我是编程语言的初学者。我知道我的解释不是最好的，但我正在努力向人们更好地解释，以理解我正在尝试做的事情。所以，请对我耐心一点，不要试图否决它，因为它伤害了我的感情，而不是告诉我为什么我的解释不好。谢谢你抽出时间来读这篇文章。多谢各位

我正在做一个名为硬币分类游戏的帆布游戏，它将硬币拖到正确的小猪存钱罐图像上，当硬币碰到正确的图像或没有正确的图像时，它会发出正确和错误的声音。 我现在一直处于if状态

在当前状态下，当特定硬币图像接触到特定小猪存钱罐图像时，将播放正确的声音。然而，当任何硬币图像接触到任何存钱罐图像时，也会播放错误的声音。我正在努力定义这个问题的其他条件

我试图在else条件下设置错误的音频功能，但当任何硬币图像移动并接触到小猪存钱罐图像时，将播放错误的声音

               playYesAudio();
           }else{
               playNoAudio();
      }
这是HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://unpkg.com/konva@4.0.5/konva.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="CSS/style.css"
</head>


<body>
    <div id="stage-parent">
    <div id="container">     
    </div>
</div>

        <audio id="yesAudio" >
        <source src="Audio/yes.mp3" type="audio/mpeg">
        </audio>
        <audio id="noAudio" >
        <source src="Audio/no.mp3" type="audio/mpeg">
        </audio>


<script src="JS/moneysort.js"
</body>
</html>
这是JS代码

  var stageWidth =  1000;
 var stageHeight =  800;

    var stage = new Konva.Stage({
        width: stageWidth,
        height: stageHeight,
        container: 'container'
    });

    var layer = new Konva.Layer();
    stage.add(layer);

    //1yen
    var ichiYenImg = new Konva.Image({
        x:20,
        y:20,
        width:100,
        height: 100,
        draggable: true,
        name: '1yen'
            }); 
    layer.add(ichiYenImg);

    //5yen
    var goYenImg = new Konva.Image({
        x:250,
        y:20,
        width:100,
        height: 100,
        draggable: true,
        name: '5yen'
    });
layer.add(goYenImg);

    //10yen
    var jyuYenImg = new Konva.Image({
        x:250,
        y:150,
        width:100,
        height: 100,
        draggable: true,
        name: '10yen'
    });
layer.add(jyuYenImg);

    //50yen
    var gojyuYenImg = new Konva.Image({
        x:20,
        y:150,
        width:100,
        height: 100,
        draggable: true,
        name: '50yen'
    });
layer.add(gojyuYenImg);

    //500yen
    var gohyakuYenImg = new Konva.Image({
        x:130,
        y:20,
        width:100,
        height: 100,
        draggable: true,
        name:'500yen'
    });
layer.add(gohyakuYenImg);

    //100yen
    var hyakuYenImg = new Konva.Image({
        x:130,
        y:150,
        width:100,
        height: 100,
        draggable: true,
        name: '100yen'
    });
layer.add(hyakuYenImg);

  //piggy bank 1yen
  var ichiYenpiggyImg = new Konva.Image({
        x:100,
        y:500,
        width:100,
        height: 100,
        draggable: false,
        name: '1yen'
    });
layer.add(ichiYenpiggyImg);

//piggy bank 5yen
var goYenpiggyImg = new Konva.Image({
        x:450,
        y:500,
        width:100,
        height: 100,
        draggable: false,
        name: '5yen'
    });
layer.add(goYenpiggyImg);

//piggy bank 10yen
var jyuYenpiggyImg = new Konva.Image({
        x:800,
        y:500,
        width:100,
        height: 100,
        draggable: false,
        name: '10yen'
    });
layer.add(jyuYenpiggyImg);

//piggy bank 50yen
var gojyuYenpiggyImg = new Konva.Image({
        x:100,
        y:650,
        width:100,
        height: 100,
        draggable: false,
        name: '50yen'
    });
layer.add(gojyuYenpiggyImg);

//piggy bank 100yen
var hyakuYenpiggyImg = new Konva.Image({
        x:450,
        y:650,
        width:100,
        height: 100,
        draggable: false,
        name: '100yen'
    });
layer.add(hyakuYenpiggyImg);

//piggy bank 500yen
var gohyakuYenpiggyImg = new Konva.Image({
        x:800,
        y:650,
        width:100,
        height: 100,
        draggable: false,
        name: '500yen'
    });
layer.add(gohyakuYenpiggyImg);

//1yen
var imageObj1 = new Image();
imageObj1.onload = function(){
    ichiYenImg.image(imageObj1);
    layer.draw();
};
var sourceImg1 = "https://illustrain.com/img/work/2016/illustrain09-okane5.png";
drawImage(sourceImg1, ichiYenImg);

//5yen
var sourceImg2 = "https://illustrain.com/img/work/2016/illustrain09-okane6.png";
drawImage(sourceImg2, goYenImg);

//10yen
var sourceImg3 = "https://illustrain.com/img/work/2016/illustrain09-okane7.png";
drawImage(sourceImg3, jyuYenImg);

//50yen
var sourceImg4 = "https://illustrain.com/img/work/2016/illustrain02-money04.png";
drawImage(sourceImg4, gojyuYenImg);

//100yen
var sourceImg5 = "https://illustrain.com/img/work/2016/illustrain09-okane8.png";
drawImage(sourceImg5, hyakuYenImg);

//500yen
var sourceImg6 = "https://illustrain.com/img/work/2016/illustrain02-money06.png";
drawImage(sourceImg6, gohyakuYenImg);

//piggy1yen
var sourceImg7 = "https://user-images.githubusercontent.com/31402838/63416628-a322b080-c3b4-11e9-96e8-e709ace70ec1.png";
drawImage(sourceImg7, ichiYenpiggyImg);

//piggy5yen
var sourceImg8 = "https://user-images.githubusercontent.com/31402838/63416629-a322b080-c3b4-11e9-94a8-eb6c008d4584.png";
drawImage(sourceImg8, goYenpiggyImg);

//piggy10yen
var sourceImg9 = "https://user-images.githubusercontent.com/31402838/63416630-a322b080-c3b4-11e9-95ef-a04228fc3c0d.png";
drawImage(sourceImg9, jyuYenpiggyImg);

//piggy50yen
var sourceImg10 = "https://user-images.githubusercontent.com/31402838/63416631-a322b080-c3b4-11e9-9e99-43061e2eaf2c.png";
drawImage(sourceImg10, gojyuYenpiggyImg);

//piggy100yen
var sourceImg11 = "https://user-images.githubusercontent.com/31402838/63416626-a322b080-c3b4-11e9-9ff6-00b3babf3fe9.png";
drawImage(sourceImg11, hyakuYenpiggyImg);

//piggy500yen
var sourceImg12 = "https://user-images.githubusercontent.com/31402838/63416627-a322b080-c3b4-11e9-86c4-4edf13a57063.png";
drawImage(sourceImg12, gohyakuYenpiggyImg);

// This will draw the image on the canvas.
function drawImage(source, konvaImage) {
    var image = new Image();
    image.src = source;
    image.onload = function() {
        konvaImage.image(image);
        layer.draw();
    }
}

//use event delegation to update pointer style

layer.on('mouseover', function(evt){
    var shape = evt.target;
    document.body.style.cursor = 'pointer';
    shape.strokeEnabled(false);
    layer.draw();
});

layer.on('mouseout', function(evt){
    var shape = evt.target;
    document.body.style.cursor = 'default';
    shape.strokeEnabled(false);
    layer.draw();
});

//collistion
layer.on('dragmove', function(e){
    var target = e.target;
    var targetRect = e.target.getClientRect();
    layer.children.each(function(obj){
        if(obj === target){
            return;
        }
      // capture the result of the intersection test
      var checkHit = haveIntersection(obj.getClientRect(), targetRect);

      //get the objects name attribute
      var nameDragged1 = e.target.attrs.name;
      var namePiggy1 = obj.attrs.name;
      var nameDragged5 = e.target.attrs.name;
      var namePiggy5 = obj.attrs.name;
      var nameDragged500 = e.target.attrs.name;
      var namePiggy500 = obj.attrs.name;
      var nameDragged10 = e.target.attrs.name;
      var namePiggy10 = obj.attrs.name;
      var nameDragged100 = e.target.attrs.name;
      var namePiggy100 = obj.attrs.name;
      var nameDragged50 = e.target.attrs.name;
      var namePiggy50 = obj.attrs.name;

      //decide if they match
      var checkNames = (nameDragged1 === namePiggy1 && nameDragged5 === namePiggy5&& nameDragged500 === namePiggy500 && nameDragged10 === namePiggy10 && nameDragged100 === namePiggy100 && nameDragged50 === namePiggy50 );


      //finaly decide if we have a valid hit
      if(checkHit && checkNames){
               playYesAudio();
           }else{
               playNoAudio();
      }

    });
});
function haveIntersection(r1, r2){
    return!(
        r2.x > r1.x + r1.width/2 ||
        r2.x + r2.width/2 < r1.x ||
        r2.y > r1.y + r1.height/2 ||
        r2.y + r2.height/2 < r1.y
    );
}

var y = document.getElementById("yesAudio");
function playYesAudio() { 
 y.play(); 
} 

var x = document.getElementById("noAudio");
function playNoAudio() { 
 x.play(); 
} 
/*
function fitStageIntoParentContainer(){
    var container = document.querySelector('#stage-parent');


    var containerWidth = container.offsetWidth;
    var scale = containerWidth / stageWidth;

    stage.width(stageWidth * scale);
    stage.height(stageHeight * scale);
    stage.scale({x:scale, y: scale});
    stage.draw(); 
}
fitStageIntoParentContainer();
window.addEventListener('resize', fitStageIntoParentContainer);
*/
我是否需要创建“循环到其他”条件来选择除正确图像外的所有存钱罐图像以播放错误的声音音频

任何帮助都将不胜感激

检查是否应该播放声音以及应该播放哪个声音的条件不太正确

第一个条件checkHit确定硬币是否与存钱罐相交。条件checkNames决定应该播放哪种声音。但是，您对两者都进行评估，如果其中一个为假，则播放“无音频”。因此，即使没有交叉路口，也不会播放音频。你应该只在它们相交时播放任何声音，然后决定播放哪个

// finaly decide if we have a valid hit
if(checkHit) {
    // Decide if it's the right coin + piggy bank
    if (checkNames) {
        playYesAudio();
    } else {
        playNoAudio();
    }
}
检查是否应该播放声音以及应该播放哪个声音的条件不太正确

第一个条件checkHit确定硬币是否与存钱罐相交。条件checkNames决定应该播放哪种声音。但是，您对两者都进行评估，如果其中一个为假，则播放“无音频”。因此，即使没有交叉路口，也不会播放音频。你应该只在它们相交时播放任何声音，然后决定播放哪个

// finaly decide if we have a valid hit
if(checkHit) {
    // Decide if it's the right coin + piggy bank
    if (checkNames) {
        playYesAudio();
    } else {
        playNoAudio();
    }
}
在当前代码中。将硬币拖到正确的小猪上。PlayySaudio和playNoAudio跑步。然后将硬币拖到错误的piggy playNoAudio only run？请参见观察中的重构代码，因为您对编码还不熟悉-您加载硬币和银行对象的方法不是干巴巴的，请不要重复自己的操作]。由于它们都具有相同的操作，但具有不同的映像，因此应将它们配置为数据。这将允许您扩展硬币和银行的数量，更改图像等，而无需更改代码。这是编写大型程序的基础——识别代码中的模式并重构任何重复的内容。@DarkKnight，感谢您的回复。我的问题是playNoAudio在硬币与任何图像碰撞时都会发出声音，无论图像是正确的还是错误的。@Vanquishedwambat，谢谢你的建议！我知道我在重复同样的事情，我想减少我的代码，但我不知道怎么做。这是一个非常有用的提示！我很幸运，你花时间给我看了这个。非常感谢你！！！在当前代码中。将硬币拖到正确的小猪上。PlayySaudio和playNoAudio跑步。然后将硬币拖到错误的piggy playNoAudio only run？请参见观察中的重构代码，因为您对编码还不熟悉-您加载硬币和银行对象的方法不是干巴巴的，请不要重复自己的操作]。由于它们都具有相同的操作，但具有不同的映像，因此应将它们配置为数据。这将允许您扩展硬币和银行的数量，更改图像等，而无需更改代码。这是编写大型程序的基础——识别代码中的模式并重构任何重复的内容。@DarkKnight，感谢您的回复。我的问题是playNoAudio在硬币与任何图像碰撞时都会发出声音，无论图像是正确的还是错误的。@Vanquishedwambat，谢谢你的建议！我知道我在重复同样的事情，我想减少我的代码，但我不知道怎么做。这是一个非常有用的提示！我很幸运，你花时间给我看了这个。非常感谢你！！！非常感谢你的解释！我明白我为什么做错了。我尝试了你建议的代码，但当硬币接触到其他硬币或任何小猪存钱罐时，仍然不播放音频播放。这是因为checkHit确定了与硬币、硬币、小猪银行、小猪银行的冲突-小猪银行、硬币和小猪银行？@Kijimu7-这可能是一个硬币冲突，正如您所建议的，在重构代码中，您可以看到我添加了objType=coin或piggy，并在冲突中包含了一个检查
检查在我这么做之前，我注意到硬币在碰撞检查中造成了一个假阳性；当硬币在x和y位置移动时仍在播放。代码量减少了，现在看起来更干净了。再次感谢。我有一个问题，我如何才能设置draggable:false只用于小猪银行的图像？@Kijimu7我在这里添加了另一个基于@Vanquished袋熊的代码笔：。通过向makeObject函数添加另一个参数，并输入type=='coin'，并设置图像的draggable属性，可以仅使硬币可拖动。我还更新了碰撞条件检查，所以它应该只在发生碰撞时播放声音，而且是在硬币和存钱罐之间。最后，它如我所希望的那样工作@戴卡德，还有被征服的袋熊，非常感谢你的解释，感谢你给我时间来找出解决办法。当你们帮助我解释和解决问题时，我从这个项目中学到了很多。我需要复习我的JavaScript知识。你们太棒了：非常感谢你们的解释！我明白我为什么做错了。我尝试了你建议的代码，但当硬币接触到其他硬币或任何小猪存钱罐时，仍然不播放音频播放。这是因为checkHit确定了与硬币、硬币、小猪银行、小猪银行的冲突-小猪银行、硬币和小猪银行？@Kijimu7-这可能是一个硬币冲突，正如您所建议的，在重构代码中，您可以看到我添加了objType=coin或piggy，并在冲突检查中包含了一个检查。在我这么做之前，我注意到硬币在碰撞检查中造成了一个假阳性；当硬币在x和y位置移动时仍在播放。代码量减少了，现在看起来更干净了。再次感谢。我有一个问题，我如何才能设置draggable:false只用于小猪银行的图像？@Kijimu7我在这里添加了另一个基于@Vanquished袋熊的代码笔：。通过向makeObject函数添加另一个参数，并输入type=='coin'，并设置图像的draggable属性，可以仅使硬币可拖动。我还更新了碰撞条件检查，所以它应该只在发生碰撞时播放声音，而且是在硬币和存钱罐之间。最后，它如我所希望的那样工作@戴卡德，还有被征服的袋熊，非常感谢你的解释，感谢你给我时间来找出解决办法。当你们帮助我解释和解决问题时，我从这个项目中学到了很多。我需要复习我的JavaScript知识。你们真是太棒了：