200 lines
7.4 KiB
HTML
200 lines
7.4 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
"http://www.w3.org/TR/html4/loose.dtd">
|
|
<html>
|
|
<head>
|
|
<title>Sokoban Bitmap Editor</title>
|
|
<script type="text/javascript">
|
|
var grid = new Array(0);
|
|
|
|
function Init() {
|
|
grid = InitGrid();
|
|
DisplayGrid();
|
|
}
|
|
|
|
function InitGrid() {
|
|
var _grid = new Array(16);
|
|
for (i=0; i<16; i++) {
|
|
_grid[i] = new Array(16);
|
|
for (j=0; j<16; j++) {
|
|
_grid[i][j]=false;
|
|
}
|
|
}
|
|
return _grid;
|
|
}
|
|
|
|
function RotateBitmapRight() {
|
|
var _grid = InitGrid();
|
|
|
|
for (i=0; i<16; i++) {
|
|
for (j=0; j<16; j++) {
|
|
_grid[j][15-i]=grid[i][j];
|
|
}
|
|
}
|
|
|
|
grid = _grid;
|
|
DisplayGrid();
|
|
}
|
|
|
|
function MirrorBitmap() {
|
|
var _grid = InitGrid();
|
|
|
|
for (i=0; i<16; i++) {
|
|
for (j=0; j<16; j++) {
|
|
_grid[i][15-j]=grid[i][j];
|
|
}
|
|
}
|
|
|
|
grid = _grid;
|
|
DisplayGrid();
|
|
}
|
|
|
|
function DisplayGrid() {
|
|
var str = "<table border=1 cellspacing=0>";
|
|
var i,j, backgroundColor;
|
|
for (i=-1; i<16; i++) {
|
|
str=str+"<tr>";
|
|
for (j=-1; j<16; j++) {
|
|
if (i == -1 && j != -1) {
|
|
str=str+"<td>" + (j+1) + "</td>";
|
|
} else if (i != -1 && j == -1) {
|
|
str=str+"<td>" + (i+1) + "</td>";
|
|
} else if (i ==-1 && j == -1) {
|
|
str=str+"<td/>";
|
|
} else {
|
|
|
|
if (grid[i][j] == true)
|
|
backgroundColor = "black";
|
|
else
|
|
backgroundColor = "white";
|
|
|
|
str=str+"<td onclick=\"OnCellClicked(this)\" id="; str=str+(i*16+j); str=str+" width=16 height=16 bgcolor=" + backgroundColor + "></td>";
|
|
}
|
|
}
|
|
str=str+"</tr>";
|
|
}
|
|
str=str+"</table>"
|
|
|
|
gridElement = document.getElementById('grid');
|
|
gridElement.innerHTML = str;
|
|
GenerateBitMap() ;
|
|
}
|
|
|
|
function OnCellClicked(cell) {
|
|
var i = cell.id / 16 |0;
|
|
var j = cell.id - i*16;
|
|
grid[i][j] = !grid[i][j];
|
|
if (grid[i][j])
|
|
cell.style.backgroundColor = "black";
|
|
else
|
|
cell.style.backgroundColor = "white";
|
|
GenerateBitMap();
|
|
}
|
|
|
|
function GenerateBitMap() {
|
|
var i, j;
|
|
var value;
|
|
|
|
var functionTypeSelect = document.getElementById('functionType');
|
|
methodType = functionTypeSelect.options[functionTypeSelect.selectedIndex].value;
|
|
|
|
generateCode = document.getElementById('generatedCode');
|
|
generateCode.value = methodType + " void " +
|
|
document.getElementById('functionName').value +
|
|
"(int location) {\n\tlet memAddress = 16384+location;\n";
|
|
|
|
for (i=0; i<16; i++) {
|
|
//get grid binary representation
|
|
binary = "";
|
|
for (j=0; j<16; j++) {
|
|
if (grid[i][j])
|
|
binary = "1" + binary;
|
|
else
|
|
binary = "0" + binary;
|
|
}
|
|
|
|
isNegative = false;
|
|
//if number is negative, get its one's complement
|
|
if (binary[0] == "1") {
|
|
isNegative = true;
|
|
oneComplement = "";
|
|
for (k=0; k<16; k++) {
|
|
if (binary[k] == "1")
|
|
oneComplement = oneComplement + "0";
|
|
else
|
|
oneComplement = oneComplement + "1";
|
|
}
|
|
binary = oneComplement;
|
|
}
|
|
|
|
//calculate one's complement decimal value
|
|
value = 0;
|
|
for (k=0; k<16; k++) {
|
|
value = value * 2;
|
|
if (binary[k] == "1")
|
|
value=value+1;
|
|
}
|
|
|
|
//two's complement value if it is a negative value
|
|
if (isNegative == true)
|
|
value = -(value + 1)
|
|
|
|
generateCode.value = generateCode.value + GenerateCodeLine(i, value);
|
|
}
|
|
|
|
generateCode.value = generateCode.value + "\treturn;\n}";
|
|
}
|
|
|
|
function GenerateCodeLine(row, value) {
|
|
str = "\tdo Memory.poke(memAddress+" + row*32 + ", " + value + ");\n";
|
|
return str;
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="Init();">
|
|
<h4><i>IDC Herzliya / Efi Arazi School of Computer Science / Digital Systems Construction, Spring 2011 / Project 09 / Golan Parashi</i></h4>
|
|
<h1>Sokoban Bitmap Editor</h1>
|
|
<p>This javascript applicaiton is used to generate highly optimized jack code for drawing a 16x16 bitmap to the screen.</p>
|
|
<p>Using the mouse, click the desired cell to mark/unmark it. You may use 90 degrees rotation and vertical mirroring by<br>
|
|
clicking the appropriate buttons.</p>
|
|
<p>When you are finished drawing, you may select function type and enter function's name.</p>
|
|
<p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th align="left">Bitmap</th>
|
|
<th align="left"></th>
|
|
<th align="left">Generated Jack Code</th>
|
|
</tr>
|
|
</thead>
|
|
<tr>
|
|
<td><div id="grid"/></td>
|
|
<td>
|
|
<form action="javascript:GenerateBitMap();">
|
|
<table>
|
|
<tr><td align="left">Function Type:</td></tr>
|
|
<tr><td align="center">
|
|
<select id="functionType" onChange="GenerateBitMap()">
|
|
<option value="function" selected="selected">function</option>
|
|
<option value="method">method</option>
|
|
</select>
|
|
</td></tr>
|
|
<tr><td align="left">Function Name:</td></tr>
|
|
<tr><td align="left"><input type="text" value="draw" id="functionName" onkeyup="GenerateBitMap()"/></td></tr>
|
|
<tr><td></td></tr>
|
|
<tr><td align="center"><input type="button" value="Generate Code >>" onclick="GenerateBitMap()"/></td></tr>
|
|
</table>
|
|
</form>
|
|
</td>
|
|
<td><textarea id="generatedCode" cols="50" rows="20" readonly="read-only"></textarea></td>
|
|
</tr>
|
|
<tr>
|
|
<table>
|
|
<tr>
|
|
<td align="center"><input type="button" value="Rotate right" onclick="RotateBitmapRight()"/></td>
|
|
<td align="center"><input type="button" value="Vertical Mirror" onclick="MirrorBitmap()"/></td>
|
|
</tr>
|
|
</table>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html> |