玩一组奇妙的打字游戏
<!DOCTYPE html>
<html>
<!--made in 花小柒-->
<head>
<meta charset="UTF-8">
<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>
对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿、行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家答疑解惑呢!