Javascript Patchworker - タイピングゲーム

タイピングゲーム

ドキュメント関連

文字がスライドイン

文字が伸び縮み

枠線を徐々に表示

オブジェクトを自在に移動

キーボードからの入力を認識

タイピングゲーム

連続して文字をスライド

擬似ツールバー

ドキュメント関連

リンク関連

マウスオーバー関連

ウィンドウ関連

フォーム関連

フィルタ関連

トップページ

インフォメーション

JavaScript

掲示板

　

このスクリプトについて
　最近流行りのAjaxです。 XMLHttpRequestとかいうものを使ってCGIやASPと通信するらしいんですが、ここでは詳しい説明は控えたいと思います。（詳しく知りたいデベロッパの方はこちらなんでどうでしょうか。）
　以前から検討していたタイピングゲームにこいつを応用しました。
　ですが問題がありまして、なぜかウチのサーバーだと動かないんですよね。。。ローカルだと普通に動くのに。。。というわけで不完全品です。ダウンロードしてHTMLファイルを見て遊んでください。

　また、Geckoエンジンでは未テストです。

実行例
こちらからダウンロードできます。

関連

JS : キーボードからの入力を認識

対応ブラウザ
WIN IE 6.0～ NN -～　MAC IE -～ NN -～

サンプルソース

<html>
<head>
<title>てすと</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift-jis" >
<script language="javascript">
<!--
var sFlag = false; //shiftキー押下判別フラグ
var cFlag = false; //ctrlキー押下判別フラグ
var strings = new Array("b","g","d","6","e","a","2","y","u","9","d","c","5","s","m","j","v","1","t","4","i","h","o","w","3","z","q","k","0","n","p","7","x","f","r","8","l");

function identifier (key){
   var def48_90 = new Array
   ("0","1","2","3","4","5","6","7","8","9","",":","",";","","","",
    "a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z");
    
   var shift_def48_90 = new Array
   ("","!","&quot;","#","$","%","&amp;","\'","\(","\)","","*","","+","","","",
    "A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
   
   var unique188_226 = new Array
   ("\,","-","\.","/","@","","","","","","","","","","","","","","","","","","","","","","","","","","","[","\\","]","^","","","","\\");
   
   var shift_unique188_226 = new Array
   ("&lt","=","&gt;","?","`","","","","","","","","","","","","","","","","","","","","","","","","","","","{","|","}","~","","","","_");
   
   var literal;
   
   if (key == 16) {
      sFlag = true;
      literal = "";
   }
   else if (key == 17) {
      cFlag = true;
      literal = "";
   }
   else if (key == 13) literal = "enter";
   else if (key == 32) literal = " ";
   else if (!sFlag) {
      if (48 <= key && key <= 90) literal = def48_90[key-48];
      else if (188 <= key && key <= 226) literal = unique188_226[key-188];
      else literal = "error";
   }
   else {
      if (48 <= key && key <= 90) literal = shift_def48_90[key-48];
      else if (188 <= key && key <= 226) literal = shift_unique188_226[key-188];
      else literal = "error";
   }
   return literal;
}
function checker (evt){
   if (document.all) evt = event;
   value = evt.keyCode;
   if (value == 16) sFlag = false;
   if (value == 17) cFlag = false;
}
var key;
var timeFlag;
var keyFlag;
function correspond (){
   timeFlag = true;
   keyFlag = true;
   try {
     xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
        try {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
          xmlhttp = false;
        }
   }
   if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
      xmlhttp = new XMLHttpRequest();
   }
   if (xmlhttp) {
      xmlhttp.onreadystatechange = function() {
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var disp = document.getElementById('disp');
            var tmp = new Array();
            tmp =  xmlhttp.responseText.split("\n");
            if (tmp.length == 4){
               keyFlag = false;
               timeFlag = false;
               key = tmp[0];
               disp.innerHTML = tmp[1];
            } else {
               alert("お疲れ様でした");
               disp.innerHTML = "";
               for (i=1; i<tmp.length; i++){
                  disp.innerHTML += tmp[i] + "<br>";
               }
            }
         }
      }
      xmlhttp.open('GET', 'http://hpcgi3.nifty.com/jspw/typing/typing.cgi?'+key);//
      xmlhttp.send(null);
   }
}
var type = 0; var miss = 0; var score = 0;
var flag = false;
function mainProcess (evt){
   if (!keyFlag){
      if (document.all) evt = event;
      var value = evt.keyCode; var tmp;
      var disp = document.getElementById('disp');
      var lit = identifier (value);
      if (lit == "enter") return true;
      else if (lit == "error") return true;
      tmp = disp.innerHTML
      if (tmp){
         flag = true;
         if (tmp.charAt(0) == lit){
            disp.innerHTML = tmp.substring (1, tmp.length);
            type ++;
         } else {
            miss ++;
         }
      }
      if (!disp.innerHTML){
         if (flag){
            score ++;
            for (j=0; j<2; j++){
               key += strings[Math.floor(Math.random()*100) % strings.length];
            }
            alert("CLEARED!!");
            correspond();
         }
      }
   }
}
var countdown = 4;
var id;
function timer (){
   if (countdown == 0){
      clearInterval (id);
      key += "&" + score + "&" + type + "&" + miss;
      correspond();
   }
   if (!timeFlag){
     countdown --;
     document.getElementById("timer").innerHTML = countdown;
   }
}
function begin (){
   if (!id) id = setInterval(begin, 1000);
   if (countdown == 0){
      clearInterval(id);
      countdown = 61;
      for (j=0; j<5; j++){
         key += strings[Math.floor(Math.random()*100) % strings.length];
      }
      correspond();
      id = setInterval(timer, 1000);
      return true;
   }
   countdown --;
   document.getElementById("disp").innerHTML = countdown;
}
function abort (){
   clearInterval (id);
   key += "&" + score + "&" + type + "&" + miss;
   correspond();
}
if (!document.all) window.document.captureEvents(Event.KEYDOWN);
window.document.onkeydown = mainProcess;
window.document.onkeyup = checker;
window.onload = begin;
window.onunload = abort;
//-->
</script>
<style type="text/css">

</style>
</head>
<body>
<div id="disp"></div>
<div id="timer"></div>
</body></html>

ユーザ設定
このスクリプトにはユーザが設定する箇所はありません。

JavaScriptのTOPに戻る　　

Navigation

ホーム　-　更新履歴　-　ダイアリー　-　インフォメーション　-　JavaScript　-　HTML　-　CSS　-　BBS　-　リンク集
このサイトへのリンクはご自由に。一言掲示板かメールで断っていただけるとありがたいです。
メールでの質問・要望は受け取れない場合がございますので、なるべくメッセンジャーでの質問･要望をお願いします。
Copyright © 2005 ミケネコ (neko_141@hotmail.com) All Rights Reserved.