URL Hunter ¶
<html>
<head>
<script>
var arr=new Array(40);
var hunter=20;
function firprint()
{
var i=0;
while(i<40)
{
arr[i]='-';
i++;
}
makea();
arr[hunter]='O';
continuePrint();
}
function continuePrint()
{
location.href="./URLHunter.html#|||"+arr.join('')+"|||time:";
movea();
}
function makea()
{
var a;
for(i=0;i<10;i++)
{
a=Math.floor(Math.random()*40);
if(arr[a]=='-') arr[a]='a';
}
}
function keyboard(){
switch(event.keyCode){
case 37: // Left
if(hunter>0){
hunter--;
if(arr[hunter]=='a') arr[hunter]='@';
else arr[hunter]='O';
if(arr[hunter+1]=='@') arr[hunter+1]='a';
else arr[hunter+1]='-';
}
continuePrint();
break;
case 39: // Right
if(hunter<40){
hunter++;
if(arr[hunter]=='a') arr[hunter]='@';
else arr[hunter]='O';
if(arr[hunter-1]=='@') arr[hunter-1]='a';
else arr[hunter-1]='-';
}
continuePrint();
break;
case 32: // Space Bar
if(arr[hunter]=='@'){
arr[hunter]='O';
}
continuePrint();
break;
}
}
function movea(){
var temp;
i=0;
while(i<40)
{
if(arr[0]=='a') arr[1]=='a';
if(arr[40]=='a') arr[39]=='a';
temp=Math.floor(Math.random()*3)-1;
if(arr[i]=='a') {
if(arr[i-1]!='O'||arr[i]!='O'||arr[i+1]!='O') {
arr[i]='-'; arr[temp+i]='a';
}
}
i++;
}
}
</script>
</head>
<body onload="firprint();" onkeydown="keyboard();">
<input type="button" value="pause" onclick="pause();"/>
<br/>
!!! 완성했다! </body>
</html>
그림판 ¶
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<script>
var flag=false;
var element;
var ctx;
var color=3,size=2,drawmethod=1;
var dotx,doty;
var temp;
var lastImage=[],imgNum=1,imgNumL=0;
function draw()
{
if(ctx && flag){
ctx.beginPath();
drawColor();
if(drawmethod==1) drawLines();
else if(drawmethod==2) drawDotPoint();
}
}
function hold()
{
flag=true;
element=document.getElementById('drawLine');
ctx=element.getContext('2d');
draw();
}
function release()
{
dotx=undefined;
undoprac();
imgNumL=imgNum;
flag=false;
}
// var draw=new array();
// draw.color=a;
// draw.color();
//
function undoprac()
{
if(lastImage[imgNum-1]!=element.toDataURL()){
lastImage[imgNum]=element.toDataURL();
imgNum++;
}
}
function undo()
{
ctx.clearRect(0,0,window.innerWidth-15, window.innerHeight-50);
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
}
if(imgNum!=1){
img.src = lastImage[imgNum-2];
imgNum--;
}else {
img.src = lastImage[0];
}
}
function redo()
{
ctx.clearRect(0,0,window.innerWidth-15, window.innerHeight-50);
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
}
if(lastImage[imgNum]!=undefined&&imgNumL!=imgNum){
img.src = lastImage[imgNum];
imgNum++;
}else {
img.src = lastImage[imgNum-1];
alert("더이상 되살릴 수 없습니다.");
}
}
function selectColor(temp)
{
color=temp;
}
function selectSize(temp)
{
size=temp+1;
}
function drawMethod(temp)
{
drawmethod=temp;
}
function drawColor()
{
switch(color){
case 0:
ctx.fillStyle="rgb(255, 255, 255)";
ctx.strokeStyle="rgb(255, 255, 255)";
break;
case 1:
ctx.fillStyle="rgb(5, 5, 230)";
ctx.strokeStyle="rgb(5, 5, 230)";
break;
case 2:
ctx.fillStyle="rgb(230, 5, 5)";
ctx.strokeStyle="rgb(255, 0, 0)";
break;
case 3:
ctx.fillStyle="rgb(0, 0, 0)";
ctx.strokeStyle="rgb(0, 0, 0)";
}
}
function drawDotPoint()
{
ctx.arc(event.x-7, event.y-7, size, 0, Math.PI*2, false);
ctx.fill();
}
function drawLines()
{
if(ctx && flag){
ctx.beginPath();
ctx.lineWidth=size;
ctx.moveTo(dotx-7, doty-7);
ctx.lineTo(event.x-7, event.y-7);
dotx=event.x;
doty=event.y;
ctx.stroke();
return 0;
}
}
</script>
</head>
<body>
<canvas id="drawLine" width="300" height="300" onmousedown="hold();"
onmouseup="release();" onmouseout="release();" onmousemove="draw();"></canvas>
Choose Color:
<select name="colors"onclick="selectColor(this.selectedIndex)">
<option value="White">White(Eraser)</option>
<option value="Blue">Blue</option>
<option value="Red">Red</option>
<option value="Black"selected="selected">Black</option>
</select>
Size:
<select name="sizes"onclick="selectSize(this.selectedIndex)">
<option value="1">1</option>
<option value="2"selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
Style:
<button type="button" onclick="drawMethod(1)"> LINE </button>
<button type="button" onclick="drawMethod(2)"> DOT </button>
실행취소:
<button type="button" onclick="undo()"> UNDO </button>
<button type="button" onclick="redo()"> REDO </button>
<!--
<form action="">
</form>
-->
<script>
element=document.getElementById("drawLine");
element.setAttribute("width", window.innerWidth-15);
element.setAttribute("height", window.innerHeight-50);
context=element.getContext('2d');
context.strokeRect(0, 0, window.innerWidth-15, window.innerHeight-50);
lastImage[0]=element.toDataURL();
</script>
</body>
</html>
