我目前正在制作一个带有视觉二维阵列的吃 bean 人幽灵。我想让鬼像这样移动:
我想我会使用 CSS 转换，但我不确定如何使用!如果有一种方法可以在 javascript 中执行此操作，那将同样有帮助。这是我的代码:
<!doctype html>
<html>
<head>
<title>Visualizing 2D arrays</title>
<style>
#stage {
position:relative;
}
.cell {
position:absolute;
width:30px;
height:30px;
border:1px solid black;
background-color:black;
}
</style>
</head>
<body>
<div id="stage"></div>
<script>
// GRAB A REFERENCE TO THE STAGE
var stage = document.querySelector("#stage");
// THE 2D ARRAY THAT DEFINES THE PATTERN
var pattern = [
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0],
[0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0],
[0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0],
[0,0,1,2,2,1,1,1,1,2,2,1,1,1,0,0],
[0,0,2,2,2,2,1,1,2,2,2,2,1,1,0,0],
[0,0,3,3,2,2,1,1,3,3,2,2,1,1,0,0],
[0,1,3,3,2,2,1,1,3,3,2,2,1,1,1,0],
[0,1,1,2,2,1,1,1,1,2,2,1,1,1,1,0],
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
[0,1,1,0,1,1,1,0,0,1,1,1,0,1,1,0],
[0,1,0,0,0,1,1,0,0,1,1,0,0,0,1,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
];
// THE SIZE OF EACH CELL
var SIZE = 30;
// THE SPACE BETWEEN EACH CELL
var SPACE = 10;
// DISPLAY THE ARRAY
var ROWS = pattern.length;
var COLS = pattern[0].length;
// CREATE THE DIVS and POSITION THEM IN THE STAGE... BUT DON'T WORRY ABOUT COLORING THEM HERE!!!!
for (var row = 0; row < ROWS; row++) {
for (var col = 0; col < COLS; col++) {
// CREATE A DIV HTML ELEMENT CALLED CELL
var cell = document.createElement("div");
// SET ITS CSS CLASS TO CELL
cell.setAttribute("class", "cell");
// GIVE EACH OF THE CREATED DIVS A UNIQUE ID
// BASED ON THE ROW# AND COL#
// EXAMPLE : <div id="c-1-2" class="cell"></div>
// In this example, row = 1 and col = 2
cell.setAttribute("id", "c-" + row + "-" + col);
// ADD A CLICK HANDLER TO EACH OF THE INDIVIDUAL DIVS
cell.addEventListener("click", cellClick, false);
// ADD THE DIV HTML ELEMENT TO THE STAGE
stage.appendChild(cell);
// POSITION THE CELL IN THE CORRECT PLACE
// WITH 10 PIXELS OF SPACE AROUND IT
cell.style.top = row * (SIZE + SPACE) + "px";
cell.style.left = col * (SIZE + SPACE) + "px";
}
}
colorizeDivs();
function cellClick() {
// RIP APART THE DIV ID THAT WAS CLICKED ON
// WERE HIDING THE ROW AND COLUMN IN THE ID
// THE FORMAT OF THE ID IS "C-ROW#-COL#"
// EXAMPLE : <div id="c-1-2" class="cell"></div>
// In this example, row = 1 and col = 2
var zpos;
// THE "this" KEYWORD RETURNS THE HTML ELEMENT THAT WAS CLICKED ON
var thisid = this.id;
zpos = thisid.indexOf("-");
thisid = thisid.substr(zpos+1);
zpos = thisid.indexOf("-");
var thisRow = thisid.substr(0,zpos);
var thisCol = thisid.substr(zpos+1);
// now that we have the row and column for this div... change the array
pattern[thisRow][thisCol] += 1;
if (pattern[thisRow][thisCol] > 7) {
pattern[thisRow][thisCol] = 0;
}
colorizeDivs();
}
function colorizeDivs() {
for (var row = 0; row < ROWS; row++) {
for (var col = 0; col < COLS; col++) {
var cell = document.querySelector("#c-" + row + "-" + col);
if (pattern[row][col] === 0) {
cell.style.backgroundColor = "black";
} else if (pattern[row][col] === 1) {
cell.style.backgroundColor = "orange";
} else if (pattern[row][col] === 2) {
cell.style.backgroundColor = "white";
} else if (pattern[row][col] === 3) {
cell.style.backgroundColor = "blue";
} else if(pattern[row][col] === 4) {
cell.style.backgroundColor = "green";
} else if(pattern[row][col] === 5) {
cell.style.backgroundColor = "red";
} else if(pattern[row][col] === 6) {
cell.style.backgroundColor = "lightblue";
} else if(pattern[row][col] === 7) {
cell.style.backgroundColor = "pink";
}
}
}
}
</script>
</body>
</html>
谢谢!
最佳答案
我认为您在这种情况下无法使用 CSS 转换。过渡通常应用于整个 HTML 元素，而您正试图有选择地更改幽灵的某些颜色。我已经在这个 fiddle 中为您的问题创建了一个解决方案.这个解决方案所做的是添加另一个视觉模式来表示鬼影运动的第二帧，如下所示:
var patterns = [
[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
[0, 0, 1, 2, 2, 1, 1, 1, 1, 2, 2, 1, 1, 1, 0, 0],
[0, 0, 2, 2, 2, 2, 1, 1, 2, 2, 2, 2, 1, 1, 0, 0],
[0, 0, 3, 3, 2, 2, 1, 1, 3, 3, 2, 2, 1, 1, 0, 0],
[0, 1, 3, 3, 2, 2, 1, 1, 3, 3, 2, 2, 1, 1, 1, 0],
[0, 1, 1, 2, 2, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 1, 1, 0],
[0, 1, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 1, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
],
[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
[0, 0, 1, 2, 2, 1, 1, 1, 1, 2, 2, 1, 1, 1, 0, 0],
[0, 0, 2, 2, 2, 2, 1, 1, 2, 2, 2, 2, 1, 1, 0, 0],
[0, 0, 3, 3, 2, 2, 1, 1, 3, 3, 2, 2, 1, 1, 0, 0],
[0, 1, 3, 3, 2, 2, 1, 1, 3, 3, 2, 2, 1, 1, 1, 0],
[0, 1, 1, 2, 2, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0],
[0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
]
];
创建此动画的下一个重要方面是使用 requestAnimationFrame 函数创建渲染循环。这只是用于尽可能快地运行 render 函数，
var startTime = Date.now();
var SPEED = 5; // Runs 5 times per second
function render() {
requestAnimationFrame(render.bind(this));
var elapsed = (Date.now() - startTime) / 1000;
var index = Math.floor((elapsed * SPEED) % patterns.length);
colorizeDivs(patterns[index]);
}
render();
所以渲染函数首先做的是计算动画运行了多长时间(以秒为单位)，也称为运行时间。然后可以使用此值从上面定义的 patterns 中检索适当的 index。此计算仅应用 floor 和模运算，以便索引始终从绑定(bind) 0 到 patterns.length - 1。检索索引后，当前模式被传递到 colorizeDivs 函数，以便可以更新单元格。
关于javascript - 视觉二维数组中的动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34712361/