双色汉诺塔java程序,汉诺塔显示 - 4112821992的个人空间 - OSCHINA

Towers of Hanoi:An Html/Css Graphics Case Study

#hanoi {

position: relative;

}

.base, .tower, .ring, .oddring {

position: absolute;

}

.base {

left: 0px;

right: 0px;

bottom: 0px;

height: 10px;

box-shadow: rgba(128, 128, 128, 0.85) 0px 4px 16px;

-moz-box-shadow: rgba(128, 128, 128, 0.85) 0px 4px 16px;

-webkit-box-shadow: rgba(128, 128, 128, 0.85) 0px 4px 16px;

color-stop(0, brown), color-stop(1, black));

}

.tower {

bottom: 10px;

box-shadow: rgba(128, 128, 128, 0.75) 0px 7px 12px;

-moz-box-shadow: rgba(128, 128, 128, 0.75) 0px 7px 12px;

-webkit-box-shadow: rgba(128, 128, 128, 0.75) 0px 7px 12px;

color-stop(0, brown), color-stop(1, black));

}

.ring, .oddring {

border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

box-shadow: rgba(128, 128, 128, 0.5) 2px 4px 7px;

-moz-box-shadow: rgba(128, 128, 128, 0.5) 2px 4px 7px;

-webkit-box-shadow: rgba(128, 128, 128, 0.5) 2px 4px 7px;

}

.ring {

background-image: -moz-linear-gradient(left, rgb(255, 200, 64), rgb(64, 50, 16));

color-stop(0, rgb(255, 200, 64)), color-stop(1, rgb(64, 50, 16)));

}

.oddring {

background-image: -moz-linear-gradient(left, rgb(64, 200, 255), rgb(16, 50, 64));

color-stop(0, rgb(64, 200, 255)), color-stop(1, rgb(16, 50, 64)));

}

An Initial Towers of Hanoi Display

Edit the onload function to change the height and number of towers,as well as the height(in pixels)of a tower ring.

* The hanoi function returns another function that is intended

* for use as the onload event handler.

var hanoi = function(height, towerCount, ringHeight) {

return function() {

// Represent the towers as arrays, then put those in an overall array.

var towers = [];

for (var i = 0; i < towerCount; i += 1) {

towers.push([]);

}

// Create the rings and place them on the first tower. Their widths

// vary by increments of the given ringHeight (in pixels).

var ringWidth = (height + 1) * ringHeight;

for (i = 0; i < height; i += 1) {

// Each ring is a div element, and we identify it with an ID.

var ring = document.createElement("div");

ring.id = height - i - 1;

ring.style.width = ringWidth + "px";

ring.style.height = ringHeight + "px";

// For variety, we'll display odd and even rings differently.

// The class attribute in HTML tags is accessed via the property

// name className in JavaScript.

ring.className = (i % 2 == 0) ? "ring" : "oddring";

towers[0].push(ring);

// The next ring is smaller.

ringWidth -= ringHeight;

}

// Create the containing element.

var puzzleboard = document.createElement("div");

puzzleboard.id = "hanoi";

// Calculate/set properties that depend on the ring height.

var positionIncrement = (height + 2) * ringHeight;

puzzleboard.style.height = (ringHeight * (height + 1)) + "px";

puzzleboard.style.width = (positionIncrement * (towerCount + 1)) + "px";

// Add the tower elements to the board.

var towerWidth = ringHeight / 2;

var towerLeft = positionIncrement;

for (i = 0; i < towerCount; i += 1) {

var tower = document.createElement("div");

tower.className = "tower";

tower.style.left = (towerLeft - (towerWidth / 2)) + "px";

tower.style.width = towerWidth + "px";

tower.style.height = puzzleboard.style.height;

puzzleboard.appendChild(tower);

towerLeft += positionIncrement;

}

// Add a base to the board. The base is as high as the towers are wide.

var base = document.createElement("div");

base.className = "base";

base.style.height = towerWidth + "px";

puzzleboard.appendChild(base);

// Add the rings to the board.

for (i = 0; i < height; i += 1) {

puzzleboard.appendChild(towers[0][i]);

}

// Define the function for positioning the rings---if actual Towers

// of Hanoi mechanics were implemented, we'll end up doing this a lot.

var positionRings = function() {

towerLeft = positionIncrement;

for (i = 0; i < towerCount; i += 1) {

var bottom = towerWidth;

for (j = 0; j < towers[i].length; j += 1) {

ring = towers[i][j];

ring.style.left =

// We use parseInt to chop off the units.

(towerLeft - (parseInt(ring.style.width) / 2)) + "px";

ring.style.bottom = bottom + "px";

bottom += ringHeight;

}

towerLeft += positionIncrement;

}

};

// Actually call the displayRings function now.

positionRings();

// Add the entire element to the document.

document.body.appendChild(puzzleboard);

};

οnlοad=hanoi(5,3,20);

双色汉诺塔java程序,汉诺塔显示 - 4112821992的个人空间 - OSCHINA - 中文开源技术交流社区...

An Initial Towers of Hanoi Display