canvas键盘打字练习功能

2018-7-17 18:28| 作者: admin| 查看: 1381| 评论: 0|来自: 蚂蚁部落

分享一段代码实例,它实现了键盘打字练习的功能。

比较简单的一个功能,代码实例如下:

[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>

鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部