순수 HTML typing 게임

| 자바스크립트

2012. 8. 16. 14:41

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

var words = [ "accept-charset", "accept", "accesskey", "action", "align",

"alink", "alt", "applicationname", "archive", "autoFlush", "axis",

"background", "behavior", "bgcolor", "bgproperties", "border",

"bordercolor", "bordercolordark", "bordercolorlight",

"borderstyle", "buffer", "caption", "cellpadding", "cellspacing",

"char", "charoff", "charset", "checked", "cite", "class",

"classid", "clear", "code", "codebase", "codetype", "color",

"cols", "colspan", "compact", "content", "contentType", "coords",

"data", "datetime", "declare", "defer", "dir", "direction",

"disabled", "dynsrc", "encoding", "enctype", "errorPage",

"extends", "face", "file", "flush", "for", "frame", "frameborder",

"framespacing", "gutter", "headers", "height", "href", "hreflang",

"hspace", "http-equiv", "icon", "id", "import", "info",

"isErrorPage", "ismap", "isThreadSafe", "label", "language",

"leftmargin", "link", "longdesc", "loop", "lowsrc", "marginheight",

"marginwidth", "maximizebutton", "maxlength", "media", "method",

"methods", "minimizebutton", "multiple", "name", "nohref",

"noresize", "noshade", "nowrap", "object", "onabort", "onblur",

"onchange", "onclick", "ondblclick", "onerror", "onfocus",

"onkeydown", "onkeypress", "onkeyup", "onload", "onmousedown",

"onmousemove", "onmouseout", "onmouseover", "onmouseup", "onreset",

"onselect", "onsubmit", "onunload", "page", "param", "profile",

"prompt", "property", "readonly", "rel", "rev", "rows", "rowspan",

"rules", "runat", "scheme", "scope", "scrollamount", "scrolldelay",

"scrolling", "selected", "session", "shape", "showintaskbar",

"singleinstance", "size", "span", "src", "standby", "start",

"style", "summary", "sysmenu", "tabindex", "target", "text",

"title", "topmargin", "type", "urn", "usemap", "valign", "value",

"valuetype", "version", "vlink", "vrml", "vspace", "width",

"background", "background-attachment", "background-color",

"background-image", "background-position", "background-repeat",

"baseline", "bbox", "border", "border-collapse", "border-color",

"border-spacing", "border-style", "border-top", "border-right",

"border-bottom", "border-left", "border-top-color",

"border-right-color", "border-bottom-color", "border-left-color",

"border-top-style", "border-right-style", "border-bottom-style",

"border-left-style", "border-top-width", "border-right-width",

"border-bottom-width", "border-left-width", "border-width" ];

var divWordArr;

var cbArr;

var countDrop = 0;

var countLife = 10;

var flagLoop = false;

function init() {

var divWord00 = document.getElementById("word00");

var divWord01 = document.getElementById("word01");

var divWord02 = document.getElementById("word02");

var divWord03 = document.getElementById("word03");

var divWord04 = document.getElementById("word04");

var divWord05 = document.getElementById("word05");

var divWord06 = document.getElementById("word06");

var divWord07 = document.getElementById("word07");

var divWord08 = document.getElementById("word08");

var divWord09 = document.getElementById("word09");

var divWord10 = document.getElementById("word10");

var divWord11 = document.getElementById("word11");

var divWord12 = document.getElementById("word12");

var divWord13 = document.getElementById("word13");

var divWord14 = document.getElementById("word14");

var divWord15 = document.getElementById("word15");

var divWord16 = document.getElementById("word16");

var divWord17 = document.getElementById("word17");

var divWord18 = document.getElementById("word18");

var divWord19 = document.getElementById("word19");

var cb00 = document.getElementById("cb00");

var cb01 = document.getElementById("cb01");

var cb02 = document.getElementById("cb02");

var cb03 = document.getElementById("cb03");

var cb04 = document.getElementById("cb04");

var cb05 = document.getElementById("cb05");

var cb06 = document.getElementById("cb06");

var cb07 = document.getElementById("cb07");

var cb08 = document.getElementById("cb08");

var cb09 = document.getElementById("cb09");

divWordArr = [ divWord00, divWord01, divWord02, divWord03, divWord04,

divWord05, divWord06, divWord07, divWord08, divWord09,

divWord10, divWord11, divWord12, divWord13, divWord14,

divWord15, divWord16, divWord17, divWord18, divWord19 ];

cbArr = [ cb00, cb01, cb02, cb03, cb04, cb05, cb06, cb07, cb08, cb09 ];

for ( var i = 0; i < divWordArr.length; i++) {

var rndWords = parseInt(Math.random() * words.length);

divWordArr[i].innerHTML = words[rndWords];

divWordArr[i].style.top = "-20px";

var rndLeft = parseInt(Math.random() * 380 + 20);

divWordArr[i].style.left = rndLeft + "px";

}

showCountLife(countLife);

}

function btnKeyPress(event) {

if (event.keyCode == 13) {

removeSameWord();

}

function removeSameWord() {

var strType = document.getElementById("txtType").value;

document.getElementById("txtType").value = "";

for ( var i = 0; i < countDrop; i++) {

var strWord = divWordArr[i].innerHTML;

if (strType == strWord

&& divWordArr[i].style.visibility == "visible") {

divWordArr[i].style.visibility = "hidden";

break;

}

function timedCount() {

var rndCountDrop = Math.random();

if (rndCountDrop < 0.02 && countDrop < 20) {

countDrop++;

}

for ( var i = 0; i < countDrop; i++) {

downDiv(divWordArr[i]);

}

for ( var i = 0; i < countDrop; i++) {

var strTop = divWordArr[i].style.top;

var strVisible = divWordArr[i].style.visibility;

var topBuff = parseInt(strTop.substring(0, strTop.length - 2));

if (topBuff > 350 && divWordArr[i].style.visibility == "visible") {

divWordArr[i].style.visibility = "hidden";

countLife--;

showCountLife(countLife);

}

if (countLife <= 0) {

var btnStart = document.getElementById("btnStart");

btnStart.value = "start";

flagLoop = false;

alert("YOU LOSE");

return;

}

if (isAllRemove()) {

alert("YOU WIN");

return;

}

if (countDrop >= 20) {

var strTop = divWordArr[20 - 1].style.top;

var topBuff = parseInt(strTop.substring(0, strTop.length - 2));

if (topBuff > 350) {

var btnStart = document.getElementById("btnStart");

btnStart.value = "start";

flagLoop = false;

alert("YOU WIN");

return;

}

t = setTimeout("timedCount()", 40);

}

function isAllRemove() {

for ( var i = 0; i < divWordArr.length; i++) {

if (divWordArr[i].style.visibility == "visible") {

return false;

}

return true;

}

function showCountLife(paramLife) {

for ( var i = 0; i < cbArr.length; i++) {

cbArr[i].checked = false;

}

for ( var j = 0; j < paramLife; j++) {

cbArr[j].checked = true;

}

function btnStart() {

if (flagLoop)

return;

var btnStart = document.getElementById("btnStart");

btnStart.value = "Looping";

flagLoop = true;

timedCount();

}

function downDiv(div) {

var str = div.style.top;

var topBuff = parseInt(str.substring(0, str.length - 2));

topBuff += 1;

div.style.top = topBuff + "px";

}

</script>

</head>

<input id="cb00" type="checkbox" /><br /> <input id="cb01"

type="checkbox" /><br /> <input id="cb02" type="checkbox" /><br />

<input id="cb03" type="checkbox" /><br /> <input id="cb04"

type="checkbox" /><br /> <input id="cb05" type="checkbox" /><br />

<input id="cb06" type="checkbox" /><br /> <input id="cb07"

type="checkbox" /><br /> <input id="cb08" type="checkbox" /><br />

</div>

????? ????????-->

<div id="word00"