Question

这是我的益智游戏代码。我刚刚使用Kinetic javascript从http://www.html5canvastutorials.com/labs/html5-canvas-animals-on-the-beach-game-with-kineticjs/使用了教程代码。我试图运行代码，但它不起作用。我用html和javascript检查了错误。但我找不到代码中的问题。如果有人知道什么是错误导致它不起作用，请告诉我。

<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<script>
  function loadImages(sources, callback) {
var assetDir = 'http://citmalumnes.upc.es/~laiafv/zz_MASTER/testhard/images/';
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in sources) {
  numImages++;
}
for(var src in sources) {
  images[src] = new Image();
  images[src].onload = function() {
    if(++loadedImages >= numImages) {
      callback(images);
    }
  };
  images[src].src = assetDir + sources[src];
}
}
function isNearOutline(country, outline) {
var c = country;
var o = outline;
var cx = c.getX();
var cy = c.getY();

if(cx > o.x - 30 && cx < o.x + 30 && cy > o.y - 30 && cy < o.y + 30) {
  return true;
}
else {
  return false;
}
}
function drawBackground(background, eumapImg, text) {
var context = background.getContext();

context.drawImage(eumapImg, 0, 0);
context.setAttr('font', '20pt Arial');
context.setAttr('textAlign', 'center');
context.setAttr('fillStyle', 'black');
context.fillText(text, background.getStage().getWidth() / 2, 40);
}
function initStage(images) {
var stage = new Kinetic.Stage({
  container: 'container',
  width: 1024,
  height: 668,
});
var background = new Kinetic.Layer();
var countryLayer = new Kinetic.Layer();
var countryShapes = [];
var score = 0;

// image positions
var countries = {
 latvia: {x: 621, y: 198},
 estonia: {x: 640, y: 167},
 czech: {x: 518, y: 344},
 netherlands: {x: 407, y: 292},
  lithuania: {x: 623, y: 230},
  bulgaria: {x: 673, y: 469},
  hungary: {x: 577, y: 389},
  denmark: {x: 474, y: 216},
  austria: {x: 477, y: 388},
  portugal: {x: 182, y: 489}
};

var outlines = {
 latvia_black: {x: 621, y: 198},
 estonia_black: {x: 640, y: 167},
 czech_black: {x: 518, y: 344},
 netherlands_black: {x: 407, y: 292},
  lithuania_black: {x: 623, y: 230},
  bulgaria_black: {x: 673, y: 469},
  hungary_black: {x: 577, y: 389},
  denmark_black: {x: 474, y: 216},
  austria_black: {x: 477, y: 388},
  portugal_black: {x: 182, y: 489}
};

// create draggable animals
for(var key in countries) {
  // anonymous function to induce scope
  (function() {
    var privKey = key;
    var anim = countries[key];

    var country = new Kinetic.Image({
      image: images[key],
      x: anim.x,
      y: anim.y,
      draggable: true,
      brightness: 0,
      blurRadius: 0
    });

    country.cache();
    country.drawHitFromCache();
    country.filters([
      Kinetic.Filters.Blur,
      Kinetic.Filters.Brighten
    ]);

    country.on('dragstart', function() {
      this.moveToTop();
      countryLayer.draw();
    });
    /*
     * check if animal is in the right spot and
     * snap into place if it is
     */
    country.on('dragend', function() {
      var outline = outlines[privKey + '_black'];
      if(!country.inRightPlace && isNearOutline(country, outline)) {
        country.setPosition({x:outline.x, y:outline.y});
        countryLayer.draw();
        country.inRightPlace = true;

        if(++score >= 4) {
          var text = 'You win! Enjoy your booty!'
          drawBackground(background, images.eumap, text);
        }

        // disable drag and drop
        setTimeout(function() {
          country.setDraggable(false);
        }, 50);
      }
    });
    // make animal glow on mouseover
    country.on('mouseover touchstart', function() {
      country.blurRadius(1);
      country.brightness(0.3);
      countryLayer.draw();
      document.body.style.cursor = 'pointer';
    });
    // return animal on mouseout
    country.on('mouseout touchend', function() {
      country.blurRadius(0);
      country.brightness(0);
      countryLayer.draw();
      document.body.style.cursor = 'default';
    });

    country.on('dragmove', function() {
      document.body.style.cursor = 'pointer';
    });

    countryLayer.add(country);
    countryShapes.push(country);
  })();
}

// create animal outlines
for(var key in outlines) {
  // anonymous function to induce scope
  (function() {
    var imageObj = images[key];
    var out = outlines[key];

    var outline = new Kinetic.Image({
      image: imageObj,
      x: out.x,
      y: out.y
    });

    countryLayer.add(outline);
  })();
}

stage.add(background);
stage.add(countryLayer);

drawBackground(background, images.eumap, 'Put the countries on the Map!');
}

var sources = {
eumap: 'eumap.png',
latvia: 'latvia.png',
latvia_black: 'latvia_shape.png',
estonia: 'estonia.png',
estonia_black: 'estonia_shape.png',
czech:'czechrepublic.png',
czech_black:'estonia_shape.png',
netherlands:'netherlands.png',
netherlands_black:'netherlands_shape.png',
lithuania: 'lithuania.png',
lithuania_black:'lithuania_shape.png',
bulgaria: 'bulgaria.png',
bulgaria_black:'bulgaria_shape.png', 
hungary:'hungary.png',
hungary_black:'hungary_shape.png',
denmark:'denmark.png',
denmark_black:'denmark_shape.png', 
austria:'austria.png',
austria_black:'austria_shape.png',
portugal:'portugal.png',
portugal_black:'portugal_shape.png'
};
loadImages(sources, initStage);
</script>
</body>

Answer 1

我要你做的第一件事是......改变这一行，添加我在BOLD中所拥有的......

var outline = new Kinetic.Image（{ image：imageObj， x：out.x， y：out.y， draggable：true }）;

然后告诉我你是否还在苦苦挣扎。

（例如，这将使拉脱维亚成为可拖延的）。所以你会看到绿色版本下的国家的红色版本。希望这是一个帮助的开始。

益智游戏使用Kinetic js

1 个答案: