我正在为javascript课程做家庭作业。作业是显示滑块拼图。这些碎片布置在一个带有一个空白区域的网格中。与空白区相邻的碎片可与空间交换。这个难题的目标是将块移动到正确的位置。
我无法让我的图像显示在网格中。我一直在盯着我的代码，无法弄清楚我哪里出错了。任何帮助将不胜感激。谢谢！这是我的代码，首先是HTML，然后是我的两个外部javascript文件。
HTML：
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
New Perspectives on HTML, XHTML and DHTML 4th Edition
Tutorial 15
Review Assignment
Kiddergarden Sliding Blocks Puzzle
Author: Collin Klopstein
Date: December 5, 2013
Filename: blocks.htm
Supporting files: block0.jpg - block23.jpg, kgmenu.jpg, kgtitle.jpg, library.js,
photo.jpg, sbtitle.jpg, sbblocks.css, slideblocks.js
-->
<title>Today's Sliding Blocks Puzzle Puzzle</title>
<link href="sbblocks.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="library.js"</script>
<script type="text/javascript" src="slideblocks.js"></script>
</head>
<body>
<form id="sb" action="">
<div id="head">
<img src="kgtitle.jpg" alt="Kiddergarden" />
</div>
<div id="menu">
<img src="kgmenu.jpg" alt="" />
</div>
<div id="title">
<img src="sbtitle.jpg" alt="Sliding Blocks" />
</div>
<div id="slidingBlocks">
<div id="block0" class="block"></div><div id="block1" class="block"></div>
<div id="block2" class="block"></div><div id="block3" class="block"></div>
<div id="block4" class="block"></div>
<div id="block5" class="block"></div><div id="block6" class="block"></div>
<div id="block7" class="block"></div><div id="block8" class="block"></div>
<div id="block9" class="block"></div>
<div id="block10" class="block"></div><div id="block11" class="block"></div>
<div id="block12" class="block"></div><div id="block13" class="block"></div>
<div id="block14" class="block"></div>
<div id="block15" class="block"></div><div id="block16" class="block"></div>
<div id="block17" class="block"></div><div id="block18" class="block"></div>
<div id="block19" class="block"></div>
<div id="block20" class="block"></div><div id="block21" class="block"></div>
<div id="block22" class="block"></div><div id="block23" class="block"></div>
<div id="blank" class="block"></div>
</div>
<div id="main">
<p><img src="photo.jpg" alt="" style="float: right; margin: 0px 0px 6px 6px" />
Click the <kbd>Scramble</kbd> button and try to reassemble the photo shown
at the right by
swapping a block adjacent to the one blank space in the puzzle.
To solve the puzzle, click the
<kbd>Solve</kbd> button.</p>
<h2>For Mouse Users</h2>
<p>To swap a block with the blank space, click a block adjacent to the blank
space.</p>
<h2>For Keyboard Users</h2>
<p>Use your <kbd>arrow keys</kbd> to highlight different puzzle blocks. When adjacent
to the blank space, press the <kbd>Spacebar</kbd> key to swap the selected
block with the blank space.</p>
</div>
<div id="controls">
<p>
<input type="button" id="scramble" value="Scramble" />
<input type="button" id="solve" value="Solve" />
</p>
</div>
<address>
Kiddergarden ·
A safe site on the Web for kids and families
</address>
</div>
</form>
</body>
</html>
library.js：
/*
New Perspectives on HTML, XHTML, and DHTML 4th Edition
Tutorial 15
Tutorial Case
Author: Collin Klopstein
Date: December 5, 2013
Filename: library.js
Functions List:
scrambleIt()
Reloads the current Web page, thus re-arranging the puzzle blocks
solveIt()
Places the puzzle blocks in the correct order in the puzzle
getStyle(object, styleName)
Returns the computed style value for a specified styleName applied to
an object.
nextTo(object1, object)
Returns a Boolean value indicating whether the coordinate (x, y) lies
within the boundaries of object
withinIt(x, y, object2)
Returns a Boolean value indicating whether object2 is next to object1
(either above, below, to the left, or to the right of object1)
swapObjects(object1, object2)
Swaps the page positions of object1 and object2
scrambleIntegers(size)
Returns an array of integers from 0 up to size-1 sorted in random order
with even parity observed in the sorting of the integers (to ensure
a solveable solution of the sliding blocks puzzle.)
randOrder()
Returns a random value between -0.5 and 0.5
addEvent(object, evName, fnName, cap)
Assigns an event handers to object where evName is the name of the event,
fnName is the name of the function, and cap is the capture phase.
This function works for both the IE and W3C event models.
removeEvent(object, evName, fnName, cap)
Removes an event handers from object where evName is the name of the event,
fnName is the name of the function, and cap is the capture phase.
This function works for both the IE and W3C event models.
*/
function scrambleIt() {
window.location.reload();
}
function solveIt() {
for (var i = 0; i < blocks.length; i++) {
blocks[i].style.backgroundImage = "url(block"+i+".jpg)";
}
}
function getStyle(object, styleName) {
if (window.getComputedStyle) {
return document.defaultView.getComputedStyle(object, null).getPropertyValue(styleName);
} else if (object.currentStyle) {
return object.currentStyle[styleName]
}
}
function nextTo(object1, object2) {
var x = parseInt(object1.style.left) + 5;
var y = parseInt(object1.style.top) + 5;
width = parseInt(object2.style.width);
height = parseInt(object2.style.height);
// check if object is located above object1
if (withinIt(x,y-height,object2)) {return true};
// check if object is located to the left of object1
if (withinIt(x-width,y,object2)) {return true};
// check if object is located below object1
if (withinIt(x,y+height,object2)) {return true};
// check if object is located to the right of object1
if (withinIt(x+width,y,object2)) {return true};
return false;
}
function withinIt(x, y, object) {
var within = false;
var left = parseInt(object.style.left);
var top = parseInt(object.style.top);
var width = parseInt(object.style.width);
var height = parseInt(object.style.height);
var bottom = top + height;
var right = left + width;
if ((x >= left && x <= right) && (y >= top && y <= bottom)) within = true;
return within;
}
function swapObjects(object1, object2) {
var tempTop = object2.style.top;
var tempLeft = object2.style.left;
object2.style.top = object1.style.top;
object2.style.left = object1.style.left;
object1.style.top = tempTop;
object1.style.left = tempLeft;
}
function scrambleIntegers(size) {
var x = new Array(size);
for (var i = 0;i < x.length;i++) {x[i] = i;}
x.sort(randOrder);
var nSum = 0;
for (var i = 0; i < x.length;i++) {
for (var j = i; j < x.length; j++) {if (x[j] < x[i]) nSum++;}
}
if (Math.floor(nSum/2) != nSum/2) {
// puzzle is not solveable make one more swap of values
needSwap = true;
for (var i = 0; (i < x.length) && needSwap; i++) {
for (var j = i; j < x.length && needSwap; j++) {
if (x[j] > x[i]) {temp=x[j];x[j]=x[i];x[i]=temp;needSwap=false;}
}
}
}
return x;
}
function randOrder(){
return 0.5 - Math.random();
}
function addEvent(object, evName, fnName, cap) {
if (object.attachEvent)
object.attachEvent("on" + evName, fnName);
else if (object.addEventListener)
object.addEventListener(evName, fnName, cap);
}
function removeEvent(object, evName, fnName, cap) {
if (object.detachEvent)
object.detachEvent("on", evName, fnName);
else if (object.removeEventListener)
object.removeEventListener(evName, fnName, cap);
}
slideblocks.js：
/*
New Perspectives on HTML, XHTML, and DHTML 4th Edition
Tutorial 15
Review Assignment
Author: Collin Klopstein
Date: December 5, 2013
Filename: slideblocks.js
Global Variables List;
blocks
An array of elements belonging to the block class
blankBlock
The puzzle representing a blank space in the sliding block puzzle
keyBlock
The puzzle block currently selected by the user's keyboard
Functions List:
init()
Sets up and initializes the Web page, defining the blocks array,
and appying event handlers to mouse and keyboard actions
swapWithBlank(e)
Responds to the mousedown event to swap the current block with an adjacent
blank space (if one exists)
highlightBlank(e)
Highlights a block on the mouseover event by changing the mouse cursor if the block
is adjacent to a blank space
removeHighlightBlank(e)
Removes highlighting from a puzzle block by changing the cursor style to "default".
keySwapWithBlank()
Swaps keyBlock with an adjacent blank space (if one exists)
selectBlock(diffX, diffY)
Moves the keyBlock diffX to the right and diffY down.
keyEvent(e)
Responds to the spacebar event to swap keyBlock with an adjacent blank
space or to arrow keys to move the position of keyBlock up, down, to
the left, or to the right
*/
var blocks = new Array();
var blankBlock;
var keyBlock;
window.onload = init;
function init() {
var allElem = document.getElementsByTagName("*");
for (var i = 0; i < allElem.length; i++) {
if (allElem[i].className == "block") blocks.push(allElem[i]);
}
var randomIntegers = scrambleIntegers(blocks.length - 1);//sets var to scrambleIntegers() w/ parameter one less than blocks
for ( var i = 0; i < blocks.length - 1; i++) {
blocks[i].style.backgroundImage = "url(block" + randomIntegers[i] + ".jpg)";
addEvent(blocks[i], "click", swapWithBlank, false);//calls swapWithBlank when block is clicked
addEvent(blocks[i], "mouseover", highlightBlank, false);//calls highlightBlank when mouse moves over block
addEvent(blocks[i], "mouseout", removeHighlightBlank, false);//call removeHighlighBlank when mouse moves away from block
}
for (var i = 0; i < blocks.length; i++) {
blocks[i].style.top = getStyle(blocks[i], "top");
blocks[i].style.left = getStyle(blocks[i], "left");
blocks[i].style.width = getStyle(blocks[i], "width");
blocks[i].style.height = getStyle(blocks[i], "height");
}
blankBlock = blocks[24];//equal to last element of blocks array
keyBlock = blocks[0];//equal to first element of blocks array
addEvent(document, "keydown", keyEvent, false);//add event keydown that occurs when user presses key
}
function swapWithBlank(e) {
var evt = e || window.event;//points to event object
var mouseBlock = evt.target || evt.srcElement;//references target source of event
if (nextTo(mouseBlock, blankBlock))
swapObjects(mouseBlock, blankBlock);//uses nextto() to test if mouseBlock is next to blankBlock, if so calls swapObjects()
}
function highlightBlank(e) {
var evt = e || window.event;//points to event object
var mouseBlock = evt.target || evt.srcElement;//references target source of event
if (nextTo(mouseBlock, blankBlock))
document.style.cursor = "pointer";//sets cursor to pointer if mouseBlock is next to blankBlock
}
function removeHighlightBlank(e) {
//remove highlighting from blocks adjacent to empty space
var evt = e || windows.object;//points to event object
var mouseBlock = evt.target || evt.srcElement;//references target source of event
if(nextTo(mouseBlock, blankBlock))
document.style.cursor = "default";//sets cursor to default
}
function keySwapWithBlank() {
if (nextTo(keyBlock, blankBlock))
swapObjects(keyBlock, blankBlock);//calls swapObject to swap keyBlock and blankBlock if next to each other
}
function selectBlock(diffX, diffY) {
var newX = parseInt(keyBlock.style.left) + diffX;//sets value to left position of newX + diffX
var newY = parseInt(keyBlock.style.top) + diffY;//sets value to top position of newY + diffY
oldKeyBlock = keyBlock;
for (var i = 0; i < blocks.length; i++) {
if (withinIt(newX, newY, blocks[i])) {
keyBlock = blocks[i];
keyBlock.style.borderColor = "red";
oldKeyBlock.style.borderColor = "black";
break;
}
}
}
function keyEvent (e) {
var evt = e || window.event;
if (evt.keyCode == 32) {
keySwapWithBlank;
return false
}
else if (evt.keyCode == 37) {
selectBlock(-30, 0);
return false
}
else if (evt.keyCode == 38) {
selectBlock(0, -30);
return false
}
else if (evt.keyCode == 39) {
selectBlock (90, 0);
return false
}
else if (evt.keyCode == 40) {
selectBlock (0, 90);
return false
}
}
答案 0 :(得分：0)
在html代码的部分中，用于将html页面链接到library.js页面的代码不正确。必须关闭开始脚本元素，以便html代码知道链接到library.js文件。
<script type="text/javascript" src="library.js"></script>