<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<p> Color picker for map. </p>
<iframe src="http://www.colorpicker.com/" id="iframe">Hex Color Picker</iframe>
<p>Add your Legend/Key</p>
<textarea rows="2" cols="15">
open space=black.
Wall=Green
</textarea>
<input type="button" onclick="disp_it()" value="Click here when you moved!" />
<br/>
<canvas id="gameArea" tabindex="0" >Your browser does not support the canvas tag.</canvas>
<style>
#iframe{
height:330px;
width:550px;
}
#gameArea {
position:absolute;
border-style:solid;
border-width:2px;
height:330px;
width:550px;
}
</style>
<script type="text/javascript">
var colorgroup = new Array();
colorgroup[0]=000000;
colorgroup[1]=000033;
colorgroup[2]=000066;
colorgroup[3]=000099;
colorgroup[4]=0000CC;
colorgroup[5]=0000FF;
colorgroup[6]=003300;
colorgroup[7]=003333;
colorgroup[8]=003366;
colorgroup[9]=003399;
colorgroup[10]=0033CC;
colorgroup[11]=0033FF;
colorgroup[12]=006600;
colorgroup[13]=006633;
colorgroup[14]=006666;
colorgroup[15]=006699;
colorgroup[16]=0066CC;
colorgroup[17]=0066FF;
colorgroup[18]=009900;
colorgroup[19]=009933;
colorgroup[20]=009966;
colorgroup[21]=009999;
colorgroup[22]=0099CC;
colorgroup[23]=0099FF;
colorgroup[24]=00CC00;
colorgroup[25]=00CC33;
colorgroup[26]=00CC66;
colorgroup[27]=00CC99;
colorgroup[28]=00CCCC;
colorgroup[29]=00CCFF;
colorgroup[30]=00FF00;
colorgroup[31]=00FF33;
colorgroup[32]=00FF66;
colorgroup[33]=00FF99;
colorgroup[34]=00FFCC;
colorgroup[35]=00FFFF;
colorgroup[36]=330000;
colorgroup[37]=330033;
colorgroup[38]=330066;
colorgroup[39]=330099;
colorgroup[40]=3300CC;
colorgroup[41]=3300FF;
colorgroup[42]=333300;
colorgroup[43]=333333;
colorgroup[44]=333366;
colorgroup[45]=333399;
colorgroup[46]=3333CC;
colorgroup[47]=3333FF;
colorgroup[48]=336600;
colorgroup[49]=336633;
colorgroup[50]=336666;
colorgroup[51]=336699;
colorgroup[52]=3366CC;
colorgroup[53]=3366FF;
colorgroup[54]=339900;
colorgroup[55]=339933;
colorgroup[56]=339966;
colorgroup[57]=339999;
colorgroup[58]=3399CC;
colorgroup[59]=3399FF;
colorgroup[60]=33CC00;
colorgroup[61]=33CC33;
colorgroup[62]=33CC66;
colorgroup[63]=33CC99;
colorgroup[64]=33CCCC;
colorgroup[65]=33CCFF;
colorgroup[66]=33FF00;
colorgroup[67]=33FF33;
colorgroup[68]=33FF66;
colorgroup[69]=33FF99;
colorgroup[70]=33FFCC;
colorgroup[71]=33FFFF;
colorgroup[72]=660000;
colorgroup[73]=660033;
colorgroup[74]=660066;
colorgroup[75]=660099;
colorgroup[76]=6600CC;
colorgroup[77]=6600FF;
colorgroup[78]=663300;
colorgroup[79]=663333;
colorgroup[80]=663366;
colorgroup[81]=663399;
colorgroup[82]=6633CC;
colorgroup[83]=6633FF;
colorgroup[84]=666600;
colorgroup[85]=666633;
colorgroup[86]=666666;
colorgroup[87]=666699;
colorgroup[88]=6666CC;
colorgroup[89]=6666FF;
colorgroup[90]=669900;
colorgroup[91]=669933;
colorgroup[92]=669966;
colorgroup[93]=669999;
colorgroup[94]=6699CC;
colorgroup[95]=6699FF;
colorgroup[96]=66CC00;
colorgroup[97]=66CC33;
colorgroup[98]=66CC66;
colorgroup[99]=66CC99;
colorgroup[100]=66CCCC;
colorgroup[101]=66CCFF;
colorgroup[102]=66FF00;
colorgroup[103]=66FF33;
colorgroup[104]=66FF66;
colorgroup[105]=66FF99;
colorgroup[106]=66FFCC;
colorgroup[107]=66FFFF;
colorgroup[108]=990000;
colorgroup[109]=990033;
colorgroup[110]=990066;
colorgroup[111]=990099;
colorgroup[112]=9900CC;
colorgroup[113]=9900FF;
colorgroup[114]=993300;
colorgroup[115]=993333;
colorgroup[116]=993366;
colorgroup[117]=993399;
colorgroup[118]=9933CC;
colorgroup[119]=9933FF;
colorgroup[120]=996600;
colorgroup[121]=996633;
colorgroup[122]=996666;
colorgroup[123]=996699;
colorgroup[124]=9966CC;
colorgroup[125]=9966FF;
colorgroup[126]=999900;
colorgroup[127]=999933;
colorgroup[128]=999966;
colorgroup[129]=999999;
colorgroup[130]=9999CC;
colorgroup[131]=9999FF;
colorgroup[132]=99CC00;
colorgroup[133]=99CC33;
colorgroup[134]=99CC66;
colorgroup[135]=99CC99;
colorgroup[136]=99CCCC;
colorgroup[137]=99CCFF;
colorgroup[138]=99FF00;
colorgroup[139]=99FF33;
colorgroup[140]=99FF66;
colorgroup[141]=99FF99;
colorgroup[142]=99FFCC;
colorgroup[143]=99FFFF;
colorgroup[144]=CC0000;
colorgroup[145]=CC0033;
colorgroup[146]=CC0066;
colorgroup[147]=CC0099;
colorgroup[148]=CC00CC;
colorgroup[149]=CC00FF;
colorgroup[150]=CC3300;
colorgroup[151]=CC3333;
colorgroup[152]=CC3366;
colorgroup[153]=CC3399;
colorgroup[154]=CC33CC;
colorgroup[155]=CC33FF;
colorgroup[156]=CC6600;
colorgroup[157]=CC6633;
colorgroup[158]=CC6666;
colorgroup[159]=CC6699;
colorgroup[160]=CC66CC;
colorgroup[161]=CC66FF;
colorgroup[162]=CC9900;
colorgroup[163]=CC9933;
colorgroup[164]=CC9966;
colorgroup[165]=CC9999;
colorgroup[166]=CC99CC;
colorgroup[167]=CC99FF;
colorgroup[168]=CCCC00;
colorgroup[169]=CCCC33;
colorgroup[170]=CCCC66;
colorgroup[171]=CCCC99;
colorgroup[172]=CCCCCC;
colorgroup[173]=CCCCFF;
colorgroup[174]=CCFF00;
colorgroup[175]=CCFF33;
colorgroup[176]=CCFF66;
colorgroup[177]=CCFF99;
colorgroup[178]=CCFFCC;
colorgroup[179]=CCFFFF;
colorgroup[180]=FF0000;
colorgroup[181]=FF0033;
colorgroup[182]=FF0066;
colorgroup[183]=FF0099;
colorgroup[184]=FF00CC;
colorgroup[185]=FF00FF;
colorgroup[186]=FF3300;
colorgroup[187]=FF3333;
colorgroup[188]=FF3366;
colorgroup[189]=FF3399;
colorgroup[190]=FF33CC;
colorgroup[191]=FF33FF;
colorgroup[192]=FF6600;
colorgroup[193]=FF6633;
colorgroup[194]=FF6666;
colorgroup[195]=FF6699;
colorgroup[196]=FF66CC;
colorgroup[197]=FF66FF;
colorgroup[198]=FF9900;
colorgroup[199]=FF9933;
colorgroup[200]=FF9966;
colorgroup[201]=FF9999;
colorgroup[202]=FF99CC;
colorgroup[203]=FF99FF;
colorgroup[204]=FFCC00;
colorgroup[205]=FFCC33;
colorgroup[206]=FFCC66;
colorgroup[207]=FFCC99;
colorgroup[208]=FFCCCC;
colorgroup[209]=FFCCFF;
colorgroup[210]=FFFF00;
colorgroup[211]=FFFF33;
colorgroup[212]=FFFF66;
colorgroup[213]=FFFF99;
</script>
<script type="text/javascript">
var showing=1;
var thecolor="#FF0000";
var para=document.getElementById("demo");
para.innerHTML=thecolor;
var canvas=document.getElementById('gameArea');
var ctx=canvas.getContext('2d');
var black="#00FFFF";
var x=150;
var y=70;
var w=5;
var h=5;
var height=330;
var width=550;
ctx.fillStyle=thecolor;
ctx.fillRect(x,y,w,h);
function space() {
return (ctx.fillStyle="#000000");
}
function wall(){
return (ctx.fillStyle="#00FF00");
}
function special(color){
return (ctx.fillStyle=color);
}
function disp_it() {
var direc=prompt("Which way did you move?N for north, W for west etc...","N");
var what=prompt("What did you hit? W for wall, S for open space, T for other","S");
if (what=="T"){
thisisacolor=prompt("Pick a number between 0 and 213, 212 and 213 look almost the same.","'56'");
para.innerHTML=thecolor;
}
}
if (direc=="N"){
y=y-7;
direc=1;
}
if (direc=="S"){
y=y+7;
direc=2;
}
if (direc=="W"){
x=x-7;
direc=3;
}
if (direc=="E"){
x=x+7;
direc=4;
}
thecolor=colorgroup[thisisacolor];
if (what=="W"){
thecolor="#000000";
}
if (what=="S"){
thecolor="#00FF00";
}
ctx.fillStyle=thecolor;
ctx.fillRect(x,y,w,h);
}
</script>
</body>
</html>When I put in the colorgroup array, the w3 schools javascript editor had an error screen. Is the problem with the length of the code, or is it a problem with the syntax?
Offline