使用動力學js的益智遊戲

這是我的益智遊戲的代碼。我只是使用來自http://www.html5canvastutorials.com/labs/html5-canvas-animals-on-the-beach-game-with-kineticjs/的教程代碼，使用Kinetic JavaScript。我試圖運行代碼，但它不起作用。我用html和javascript檢查錯誤。但是我無法找到我的代碼中存在什麼問題。請讓我知道是否有人知道錯誤是什麼使它不起作用。使用動力學js的益智遊戲

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

來源

2014-05-08 user3615594

我要你做的第一件事情是這樣的......改變這一行添加什麼，我有BOLD ...

VAR外形=新Kinetic.Image（ { image：imageObj， x：out.x， y：out.y， draggable：true }）;

然後告訴我你是否仍在掙扎。

（例如，這會使拉脫維亞成爲可拖動的）。所以你會在綠色版本中看到該國的紅色版本。希望這是幫助的開始。

來源

2014-05-09 04:31:41 JSdc

使用動力學js的益智遊戲

回答

相關問題