关键词：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打字小游戏2.0</title>
<style>
/* 基础样式 */
.score
margin-top: 50px;
margin-left: 80px;
width: 80px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 28px;
font-weight: bold;
border: 1px solid black;
box-sizing: border-box;
button
margin-top: 10px;
margin-left: 80px;
width: 80px;
height: 40px;
</style>
</head>
<body>
<!-- 存放分数 -->
<div class="score">0</div>
<!-- 开始按钮 -->
<button>开始</button>
<!-- 存放字母的盒子 -->
<div class="box"></div>
<script>
class Word
constructor()
//设置下落距离,下落速度,字母生成速度的初始值
this.speed = 1;
this.timeout = 50;
this.timeout2 = 1000;
// 设置循环下落状态的初始值 false
this.flag = false;
// 调用生成字母的函数
this.btn = document.querySelector('button');
// 给按钮添加点击事件
this.btn.onclick = () =>
// 设置循环下落状态为true
this.flag = true;
this.create(this.speed);
// 设置按钮不可用
this.btn.disabled = true;
// 新建数组 用来存放字母标签
this.arr = [];
// 设置键盘按下事件
document.onkeydown = (eve) =>
let e = eve || window.event;
let keycode = e.keyCode || e.which;
//将按下的keyCode值转换成字母
let keyword = String.fromCharCode(keycode);
//遍历数组 判断keyword是否与数组内某个元素内容相等
for (var i = 0; i < this.arr.length; i++)
if (this.arr[i].innerHTML == keyword)
// 打掉一个 - 计分
// 获取原来的分
let score = document.querySelector('.score').innerText - 0; // -0 为了把字符串改成数字类型
// 让分数+1
score++;
// 加1以后的分数放进div中
document.querySelector('.score').innerText = score;
// 分数越高 速度越快
if (score % 10 == 0)
if (this.timeout2 <= 400)
this.timeout2 = 300;
if (this.timeout == 1)
this.timeout = 1;
if (score % 10 == 0)
this.speed += 1;
else this.timeout -= 7;
else this.timeout2 -= 200;
//从页面中删除这个元素
this.arr[i].remove();
//从数组内也删除这个元素
this.arr.splice(i, 1);
break; //终止循环
create(speed)
//新建span标签
let span = document.createElement('span');
//将标签添加到数组内
this.arr.push(span);
//给新创建的span标签添加样式
this.setStyle(span,
width: '50px',
height: '50px',
position: 'absolute',
top: '0',
left: this.getRandom(500, document.documentElement.clientWidth - 499) + 'px',
borderRadius: "50%",
lineHeight: '50px',
textAlign: 'center',
backgroundColor: this.getColor(),
color: "#fff",
fontWeight: "bold",
fontSize: "28px"
)
//获取box节点
let box = document.querySelector('.box');
//将标签节点追加到box里
box.appendChild(span);
//获取65~90的随机数 对应着A-Z的keyCode值
let randNum = this.getRandom(65, 91);
//将keyCode值转成字母
let word = String.fromCharCode(randNum);
//给新建的span标签添加字母
span.innerText = word;
//设置定时器 控制字母下落
let times = setInterval(() =>
//获取span距离顶部的距离
let t = span.offsetTop;
//加上每次运动的距离
t += speed;
//判断下落到底部时 游戏结束
if (t >= document.documentElement.clientHeight - 50)
//清空定时器&延时器
clearInterval(times);
clearTimeout(this.t2);
//输出游戏结束
alert('GAME OVER');
//清空页面&数组
this.arr = [];
box.innerHTML = '';
//恢复按钮可用状态
this.btn.disabled = false;
//清空计分板
document.querySelector('.score').innerText = 0;
//恢复初始每次下落的距离
this.speed = 1;
//恢复初始下落速度
this.timeout = 50;
//恢复初始字母生成速度
this.timeout2 = 1000;
//设置循环下落状态为false
this.flag = false;
//把运动后的距离值设置给span
span.style.top = t + "px"
, this.timeout);
//循环下落状态为true时 循环生成字母
if (this.flag)
clearTimeout(this.t2); //清除延时器 防止叠加
this.t2 = setTimeout(() =>
this.create(this.speed);
, this.timeout2);
//构造设置样式的函数
setStyle(tag, styleObj)
for (var attr in styleObj)
tag.style[attr] = styleObj[attr];
// 封装获取随机数的函数
getRandom(a, b = 0)
var max = Math.max(a, b);
var min = Math.min(a, b);
return Math.floor(Math.random() * (max - min)) + min;
//封装获取随机颜色的函数
getColor(hex = true)
if (hex)
var color = '#';
for (var i = 0; i < 3; i++)
var rgb = this.getRandom(256).toString(16);
rgb = rgb.length === 1 ? '0' + rgb : rgb;
color += rgb
return color;
return `rgb($this.getRandom(256),$this.getRandom(256),$this.getRandom(256))`
new Word;
</script>
</body>
</html>
原生js实现简易扫雷游戏(代码片段)
注：使用了FontAwesome 字体图标库，使用前请下载引入(下载地址）<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metana... 查看详情
原生js实现简易评论更新功能
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><styletype="text/css">#outside{width:1000px;margin:0auto;border:1pxsolid#E7EAEE;overflow:hidden; 查看详情
原生js实现简易转盘抽奖(代码片段)
...快乐。大家好，我是Counter。本章带大家来简单的了解下原生JS实现转盘抽奖。因为主要涉及到JS，在这里HTML和CSS起到的功能就没有那么重要，因此，没有过多的阐述HTML与CSS，而JS基本每行都有注释，但这里CSS也是起到了至关重要... 查看详情
原生js实现简易atm功能(代码片段)
简易ATM题目描述：里面现存100块钱。如果存钱，就用输入的钱数加上先群的钱，然后弹出余额。如果取钱，就减去取的钱，然后显示余额。如果显示余额，就显示余额。如果退出，就进行判断再退出。<script>varmoney=100;varmoneyS... 查看详情
利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表。效果如下所示 实现该效果，分三大块：html、javascript、csshtml部分html部分比较简单，定义一个clock的div，内部有原点、时分秒针、日期以及时间，至于钟表上的刻度、数字等元素，因为量比较多... 查看详情
html+css+js实现一个打字小游戏（建议收藏）(代码片段)
今天江哥手把手带大家实现一个打字小游戏，带你装X带你飞知识点：html+css+js游戏玩法：点击Play开始游戏，随机出现字母对象，按键盘字母，对应的悬浮物消失。废话不多说，先上效果图素材... 查看详情
一个简单用原生js实现的小游戏----flappybird
这是一个特别简单的用原生js实现的一个小鸟游戏，比较简单，适合新手练习这是html结构<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title></head><body><divid="game"><d 查看详情
js组件系列——还记得那些年玩过的游戏机吗？（slotmachine组件简易实现）
前言：前两天在网上找组件，无意中发现了我们儿时游戏机效果的“SlotMachine组件”，浏览一遍下来，勾起了博主小时候满满的回忆。于是下定决定要研究下这么一个东西，不得不再次叹息开源社区的强大，原来这些组件... 查看详情
jquery&原生js——实现剪刀石头布小游戏
前言jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“writeLess，DoMore”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提... 查看详情
ivx实现页面简易新闻应用
...不可避免的。要实现数据展现有很多方式，可以使用原生的js或者Vue，也可以使用后端的各种模板引擎。而今天我选择的是使用iVx语言来实现。iVX是一种基于云原生的全新开发体系（包括前端和后台），一种无... 查看详情
原生js实现飞机大战游戏超详细解析快来做一个自己玩吧(代码片段)
...素材的同学，在文章末尾有链接。 下面是另外两个原生JS的游戏和项目，大家可以选择阅读，都有详细解析：原生JS实现FlappyBird游戏：原生JS实现FlappyBird游戏超详细解析快来做一个自己玩吧原生JS实现本地存... 查看详情
原生js实现一个连连看小游戏-----------点击列表获取索引(代码片段)
需求：当点击一个列表时，我们要知道它在列表的第几项，即索引，代码实现如下：<!DOCTYPEhtml><html><head><title></title></head><body><ulid="myUl"><li>第1个li</li><li>第1个li</ 查看详情
原生js实现一个连连看小游戏-----------生成随机不重复数字(代码片段)
直接贴代码：<!DOCTYPEhtml><html><head><title>生成随机不重复数</title></head><body><scripttype="text/javascript">vararr=newArray();for(vari=0;i<10;i++)arr.push(i); 查看详情
js打字小游戏
<html><head><metacharset="utf-8"><style>#conatiner{width:400px;height:500px;border:1pxsolid#eee;position:relative;}</style></head><body><span>typing< 查看详情
javascript实现气球打字游戏
实现效果定义球的类气球类中我们需要对26个字符进行处理this.arr="abcdefghijklmnopqrstuvwxyz".split("");生成一个随机字母this.index=parseInt(Math.random()*this.arr.length);//定义随机字符this.str=this.arr[this.index];生成一个div标签并对图片进行处理//元... 查看详情
基于原生js+node.js+mysql打造的简易前后端分离用户登录系统
一、登录页面这个没什么说的，就放两张图二、服务器端用express（文档）搭建服务器，数据裤用mysql(基础语句），新建一个users，再新建一张users表，我们用这张表。服务器主要是编写一个简单的接口用来处理页面发过来的请求... 查看详情
《游戏学习》java实现的开心农场简易版源码以及素材(代码片段)
【游戏介绍】 该游戏是由java实现的开心农场简易版，主要功能包含播种、生长、开花、结果、收获五个功能操作。 项目代码有4个java类和图片素材实现 BackgroundPanel类背景面板对象 Crop类 处理图片 Farm... 查看详情
《游戏学习》java实现的开心农场简易版源码以及素材(代码片段)
【游戏介绍】 该游戏是由java实现的开心农场简易版，主要功能包含播种、生长、开花、结果、收获五个功能操作。 项目代码有4个java类和图片素材实现 BackgroundPanel类背景面板对象 Crop类 处理图片 Farm... 查看详情