HTML5 Canvas
Color Drop: compare AS3 and JavaScript game logic
A falling-color puzzle translates well between ActionScript and JavaScript when the board is treated as data. Represent the grid as rows and columns, keep the active piece outside the settled board and resolve matches only after a piece locks.
Port the rules before the renderer. An AS3 display list and a Canvas drawing loop may look different, but movement limits, flood-fill matching and gravity should produce the same board states for the same input.
Write a short sequence of predetermined moves and compare the grid after each one. Pay attention to integer division, array bounds and event timing. Once the rules agree, adapt keyboard, touch and drawing behavior to the target runtime.
Try the idea
function cellIndex(column, row, width) {
return row * width + column;
}
function canPlace(column, row) {
return column >= 0 && column < width &&
row >= 0 && row < height && board[cellIndex(column,row,width)] === 0;
}