教你玩一组奇妙的打字游戏

最新推荐文章于 2024-08-31 15:41:55 发布

fanyuenan

最新推荐文章于 2024-08-31 15:41:55 发布

阅读量440

点赞数

分类专栏：前端学习

前端学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

玩一组奇妙的打字游戏

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

fanyuenan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
教你玩一组奇妙的打字游戏

玩一组奇妙的打字游戏花小柒--> html, body { height: 100%; } body { background-color: #333; } div {
复制链接

扫一扫

专栏目录