实现canvas键盘打字练习功能
分类：实例代码
canvas键盘打字练习功能属于前端实例代码，有关更多实例代码大家可以查看。
分享一段代码实例，它实现了键盘打字练习的功能。
比较简单的一个功能，代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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>
canvas键盘打字练习功能，这样的场景在实际项目中还是用的比较多的，关于canvas键盘打字练习功能就介绍到这了。