canvas鍵盤打字練習功能

admin發表於2018-07-17
Canvas

分享一段程式碼例項，它實現了鍵盤打字練習的功能。

比較簡單的一個功能，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
html,
body {
  height: 100%;
}
body {
  background-color: #333;
}
div {
  color: white;
}
#content {
  position: absolute;
  width: 500px;
}
.game {
  position: absolute;
  left: 0;
  top: 0;
}
#start {
  background-color: white;
  border: 0;
  font-size: 25px;
  width: 80px;
  height: 30px;
  cursor: pointer;
}
</style>
</head>
<body>
<div id="content">
  <div class="game">
    <input type="button" name="start" id="start" value="開始" />
    <span>分數:</span><span id="score"></span>
    <span>倒數計時:</span><span id="times">30</span>
  </div>
</div>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var start = document.getElementById("start");
var times = document.getElementById("times");
var score = document.getElementById("score");
var canvas = document.getElementById("myCanvas");
var cxt = canvas.getContext("2d");
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
var letStr = "abcdefghijklmnopqrstuvwsyz";
//隨機數
function rand(min, max) {
  return parseInt(Math.random() * (max - min + 1) + min);
}
//建立字母物件
 
function Letter() {
  this.x = rand(0, canvas.width - 25);
  this.y = 0;
  this.speedY = rand(1, 6);
  this.val = letStr[rand(0, 25)];
  this.color = ["magenta", "golden", "yellow"]
}
//畫的方法
Letter.prototype.draw = function() {
    cxt.font = "Bold 25px verdana";
    cxt.fillStyle = this.color[rand(0, 2)];
    cxt.shadowColor = "darkblue";
    cxt.shadowBlur = 15;
    cxt.fillText(this.val, this.x, this.y);
  }
  //移動的方法
Letter.prototype.move = function() {
    this.y += this.speedY;
  }
  //刪除超除螢幕的物件
Letter.prototype.clear = function() {
    if (this.y >= canvas.height) {
      return true;
    } else {
      return false;
    }
  }
  //盛放物件的陣列
var letterArr = [];
//控制物件產生速度的數字
var index = 0;
var timer = null;
var game = null;
start.onclick = function() {
  clearInterval(timer);
  clearInterval(game);
  game = setInterval(function() {
    cxt.clearRect(0, 0, canvas.width, canvas.height);
    //先建立物件
    if (index % 20 == 0) {
      index++;
      var letter = new Letter();
      letterArr.push(letter);
    }
    for (var i = 0; i < letterArr.length; i++) {
      letterArr[i].move();
      if (letterArr[i].clear()) {
        letterArr.splice(i, 1);
        i--;
      } else {
        letterArr[i].draw();
      }
    }
    index++;
  }, 30);
  //倒數計時
 
  timer = setInterval(function() {
    times.innerHTML = times.innerHTML - 0 - 1;
    if (times.innerHTML == 0) {
      clearInterval(1);
      clearInterval(2);
      alert("分數是:" + score.innerHTML);
      location.reload();
    }
  }, 1000);
  document.onkeypress = function(ev) {
    var evObj = ev || window.event;
    //將對應的ASC轉成字元
    var str = String.fromCharCode(evObj.keyCode);
    for (var i = 0; i < letterArr.length; i++) {
      if (letterArr[i].val == str) {
        letterArr.splice(i, 1);
        i--;
        score.innerHTML = score.innerHTML - 0 + 1;
        break;
      }
    }
  }
}
</script>
</body>
</html>

相關文章