玩一组奇妙的打字游戏

来源：互联网发布：lol能换肤的软件编辑：程序博客网时间：2024/04/30 16:47

玩一组奇妙的打字游戏

<!DOCTYPE html>

<html>

<head>

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>

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和其他老师还有众多的小伙伴们进行沟通交流哦，群里还有不少技术大拿、行业大牛可以一起探讨问题，我们也会安排专业的技术老师为大家答疑解惑呢！

0 0