Typing Blood

typing game of HTML5 Canvas

by erick

HTML

<div id="score_bord"></div>
<div id="message"></div>
<canvas id="hell"></canvas>

CSS

body{background:#000;margin:0;padding:0}
#score_bord{position:absolute;left:0;top:0;z-index:1;padding:5px;color:#666;font-size:14px;font-family:Verdana, Geneva, sans-serif;}
#message{
  font-family:Verdana, Geneva, sans-serif;
  position:absolute;
  right:0;
  bottom:0;
  z-index:20;
  color:#C00;
  font-size:11px;
}

.pause {
  background-color:#000;
  left:0;
  top:0;
  height:100%;
  width:100%;
}
canvas{z-index:0;}

JavaScript

/**
 * Typing Blood
 * 
 * ランダムに落ちてくる文字をタイプするだけのタイピングゲーム
 * パーティクル・グラデーション・テキスト・ライン・ context.shadow・キーイベントの組み合わせ
 * スコア計算とレベルアップロジックは真面目にテストしてないので超適当です
 *
 * [enter] Start/Resume
 * [space] Pause
 */

//MooTools $random
function _random(Min, Max){
  return Math.floor(Math.random() * (Max - Min + 1) + Min);
}

var TypingBlood = function(){
  var game = {

    canvas:null,
    context:null,
    playing : false,
    loop_timer:null, //タイマーの棺桶
    
    bones:[],//テキストオブジェクト入れる
    powders:[],
    
    karma:0, //カルマ
    
    bloodPondLineHeight:10,//１ミスあたりの高さ
    bloodPondHeight:0,
    bloodPondAlpha:1,
    bloodParticles:[],
    
    scoreBord:null,
    level:1,//難易度
    miss:0,
    pass:0,
    totalScore:0,
    combo:0,
    
    ascii : [48,49,50,51,52,53,54,55,56,57,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89],//ASCII CODE
    
    //イベントリスナー
    addEvent:function(obj, type, fn){
    if(obj.addEventListener)
      obj.addEventListener( type, fn, false );
    },
    
    //実行関数。引数はcanvasのID
    load:function(id){
    
      this.addEvent(window, 'load', function(event){
    
        game.canvas = document.getElementById(id);
        game.scoreBord =  document.getElementById("score_bord");
        game.message = document.getElementById("message");
        
        if (game.canvas.getContext){
          game.context = game.canvas.getContext('2d');
          game.setCanvas();
          
          game.setPondSize();
          game.title();
          
        }
      
      });
      
      //画面がリサイズされたら
      this.addEvent(window, 'resize', function(){
        game.setCanvas();
        if(!game.playing) game.title();
      });
      
      //pause
      this.addEvent(window,'blur', function(e){
        game.pause();
      });
      
      //キー押されたとき
      this.addEvent(document,'keydown', function(e){
      
    
        if(e.keyCode==32){
          game.pause();
        }
    
        //再開
        if(e.keyCode==13){
          
         ...