1234567890-^ qwertyuiop@[ asdfghjkl;:] zxcvbnm,./\
view source

JavaScript

$(function(){
  var keys = [];
  var eles = [];
  var $keys = $('#keys');
  var $input = $('input').eq(0);
  var keysText = $keys.text();
  $keys.empty();

  keys =  keysText.split('')
    .map((letter, idx) => `${letter}`);
  keys.pop();
  keys.push('xx');
  console.log(keys);

  var inputKey = function(v){
    var vv = $input.val();
    $input.val(vv+v);
  }
  var delKey = function(){
    var vv = $input.val();
    vv = vv.slice( 0, -1) 
    $input.val(vv);
  }

  var div = $('<div>');
  keys.forEach(function(v){
    if(v === "\n"){
      div = $('<div>');
      $keys.append(div);
    } else if (v === 'xx'){
      var span = $('<span>',{id: 'del'}).text('X');
      div.append(span);
      eles.push(span);
      span.on('mousedown', function(){
        $t = $(this);
        $(this).addClass('click');
        delKey(v);
        setTimeout(function(){
          $t.trigger('mouseup');
        }, 39);
      });
      span.on('mouseup', function(){
        $(this).removeClass('click');
      });
    } else {
      var cc = 'c' + v.charCodeAt(0);
      var span = $('<span>',{id: cc}).text(v);
      div.append(span);
      eles.push(span);

      span.on('mousedown', function(){
        $t = $(this);
        $(this).addClass('click');
        inputKey(v);
        setTimeout(function(){
          $t.trigger('mouseup');
        }, 39)
        setTimeout(function(){
          $t.trigger('mouseup');
        }, 999)
      });
      span.on('mouseup', function(){
        $(this).removeClass('click');
      });
      span.on('mouseout', function(){
        $(this).removeClass('click');
      });
    }
    
  });
  document.onkeypress = function(e) {
    var v = e.charCode;
		if (v) {
      cc = v
      v = String.fromCharCode(v);
      console.log(v);
      //inputKey(v);
      $('#c' + cc).trigger('mousedown');
    }
	}
});

CSS

#demo{
  font-size:40px;
}

#keys span{
  display:inline-block;
  width:calc(100% / 13);
  height:16vh;
  line-height:16vh;
  border:1px solid #000;
  margin:1px;
  text-align:center;
  cursor:pointer;
  user-select:none;
}
#keys span.click{
  background-color:rgba(255,0,0,0.1);
}

#keys span#del{
  color:transparent;
  background-image: url("xx.svg");
  background-size: 100% 100%;
}
input{
  width:calc(100% - 20px);
  height:16vh;
  font-size:40px;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-typing-game/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。