JavaScript实现简单的打字游戏
完整项目下载：https://download.csdn.net/download/weixin_44893902/13131694
演示地址：https://url_777.gitee.io/typing-games/
效果图：
实现代码：
目录结构：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>打字游戏</title>
<link rel="stylesheet" href="css/new_file.css" />
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 背景音乐 -->
<audio id="mus">
<source src="music/music_bg.mp3"></source>
</audio>
<!-- 主体部分 -->
<div id="box">
<div id="">
</div>
<!-- 左右的生命和音量图标 -->
<img src="./img/生命.png" style="float: left; margin: 45px;" width="45" height="38" id="life" />
<img src="./img/volume.png" style="float: right; margin: 45px;" width="45" height="38" id="volume" />
<!-- 计分模块 -->
<div class="score"><font>0</font></div>
<div id="game"></div>
<!-- 重新开始界面 -->
<div class="reload">
<input type="button" class="btn squick" value="重新开始" />
<a href="http://www.baidu.com"> <input type="button" class=" btn tu" value="退出游戏" /></a>
</div>
<!-- 按钮 -->
<input type="button" class=" btn start" value="开 始 游 戏" />
<input type="button" class=" btn stop" value="暂 停 游 戏" />
<input type="button" class=" btn quick" value="增 加 难 度" />
</div>
</html>
CSS
*{
margin: 0;
padding: 0;
}
.btn{
width: 170px;
height: 70px;
border-radius: 20px;
border: 1px solid greenyellow;
outline: medium;
background: url(../img/background.jpg) no-repeat;
background-size:170px 70px;
float: left;
margin-left: 20px;
margin-top: 300px;
text-align: center;
/* cursor: pointer; */
/* user-select: none; */
font-weight: bold;
font-size: 30px;
color:white;
}
.btn:hover{
border: 3px solid greenyellow;
}
#box{
width: 100%;
height: 100vh;
background:url(../img/background.jpg) no-repeat;
background-size:100% 100%;
overflow: hidden;
}
.score{
width: 250px;
height: 355px;
background: url(../img/score.png) no-repeat;
background-size:100% 100%;
position: absolute;
right:10px;
/* bottom: -80px; */
font-size: 60px;
text-align: center;
line-height: 280px;
color: white;
cursor: pointer;
user-select: none;
margin-top: 395px;
}
.startorstop{
width: 100%;
height: 50px;
position: absolute;
bottom: 20px;
}
.reload{
width: 500px;
height: 350px;
background: url(../img/reload.gif) no-repeat;
background-size:350px 270px;
margin: 0 auto;
position: relative;
top: -650px;
}
.squick{
width: 130px;
height: 50px;
margin-top: 280px;
margin-left: 40px;
}
.tu{
width: 130px;
height: 50px;
margin-top: -49px;
margin-left: 210px;
}
#game img{
position: absolute;
}
#music_btn{
width: 70px;
height: 70px;
position: absolute;
left: 10px;
top: 20px;
cursor: pointer;
user-select: none;
}
.play-tips{
width: 500px;
height: 400px;
margin: 0 auto;
margin-top: 150px;
border: 1px solid red;
}
#buttons1{
width: 700px;
height: 200px;
margin-bottom: 100px;
}
JavaScript
$(function(){
var chars =['A','B','C','D','E','F','G','H','T','J','K','L','M','N','O','P','Q','R','S','G','U','V','W','X','Y','Z'];
//积分
var score = 0;
//默认游戏的状态
var flag = true;
//声明刚开始游戏的状态
var f = true;
//开始游戏的标识
var speed = 1;
var start = $(".start");
var createImgInterval;
var downImgInterval;
//默认游戏的状态
//点击开始游戏按钮所执行的函数
start.click(function(){
play(speed);
var music=document.getElementById("mus");
music.play();
flag = true;
if(f){
f = false;
}
});
//点击暂停按钮所执行的函数
$(".stop").click(function(){
if(flag){
flag = false;
$(this).val("继 续 游 戏")
var music=document.getElementById("mus");
music.pause();
}else{
flag = true;
$(this).val("暂 停 游 戏")
var music=document.getElementById("mus");
music.play();
}
});
//增加难度
$(".quick").click(function(){
if(!f){
speed += 0.5;
play(speed);
}
});
//重新开始游戏
$(".reload").click(function(){
$(this).animate({top:"-350px"});
$("#game").children().remove();
score = 0;
$(".score").html(score);
flag = true;
f = true;
speed = 1;
play(speed);
console.log(speed)
});
//创建图片
function createImg(){
if(flag){
//随机创建
var random = randomScope(0,25);
var img = chars[random];
var Dwidth = $(document).width();//获取浏览器的宽度
var left = randomScope(Dwidth-100,100);
$("#game").append("<img src='img/"+img+".png' width='80' height='100' style='left:"+left+"px; top:-100px;' />");
}
}
//加载图片
function downImg(){
if(flag){
var imgs = $("#game").children();//获取生成的所有字母
for(var i=0;i<imgs.length;i++){
var img = imgs[i];
//当前字母
var Top = parseInt(img.style.top);
//当前字母距离顶部的值
var Height = $("#box").height()-200;
if(Top<=Height){
img.style.top=(Top+2)+"px";
}else{
img.remove();
// error.play();
if(score==0){
score=0
}else{
score -= 10;
}
$(".score").html(score);
if(score <= 0){
flag = false;
$(".reload").animate({"top":"30px"});
// gameOver.play();
window.clearInterval(createImgInterval);
window.clearInterval(downImgInterval);
return ;
}
}
}
}
}
$(window).keyup(function(e){
var eve = window.event || e;//获取事件对象
var imgs = $("#game").children();//获取所生成的字母
var code = eve.keyCode;//获取用户按下的键
if(flag){
for(var i =0;i<imgs.length;i++){
var img = imgs[i];
var imgSrc = img.src.split("/");
var name = imgSrc[imgSrc.length-1].split(".")[0];
if(name == chars[code-65]){
img.remove();
score+=10;
$(".score").html(score);
if(score <= 0){
// $(".tupian").animate({"bottom":"0px"});
window.clearInterval(createImgInterval);
window.clearInterval(downImgInterval);
}
return;
}
}
}
});
//定时器
function play(speed){
console.log(speed)
createImgInterval = window.setInterval(createImg,1000-speed*50);
downImgInterval = window.setInterval(downImg,20-speed/2);
}
//随机范围方法
function randomScope(minScope,maxScope){
return Math.floor(Math.random()*(maxScope-minScope+1)+minScope);
}
var music=document.getElementById("volume");
music.onclick = function(){
var i = true;
var mus=document.getElementById("mus");
if (mus.paused) {
mus.play();
// 暂停中
} else {
// 播放中
mus.pause();
}
}
});JavaScript实现简单的打字游戏的更多相关文章
- 使用JavaScript实现简单的小游戏-贪吃蛇
最近初学JavaScript,在这里分享贪吃蛇小游戏的实现过程, 希望能看到的前辈们能指出这个程序的不足之处. 大致思路 首先要解决的问题 随着蛇头的前进,尾巴也要前进. 用键盘控制蛇的运动方向. 初 ...
- jQuery 写的简单打字游戏
var off_x; //横坐标 var count=0; //总分 var speed=5000; //速度,默认是5秒. var keyErro=0; //输入错误次数 var keyRight= ...
- 用JS写了一个打字游戏，反正我是通不了关
今天想写个简单的游戏, 打字游戏好像都没写过, 那么就写打字游戏吧, gamePad包含了关卡的信息, 可以用来调整给个关卡字符下落的速度: getRandom函数会返回一个字符对象, 这个对象包含了 ...
- java打字游戏
小记:老早之前写的程序,今天发现之前在 csdn上写的东西的图片不显示了,搞得人好郁闷,所以把之前零星的几篇文章搬个家 游戏运行截图: 字母实体类 package com.git.game; impo ...
- 用javascript实现2048的小游戏
前段时间,看了一个视频,用javascript实现的2048小游戏,发现不难,都是一些基出的语法和简单逻辑. 整个2048游戏没有很多的数据,所有,实现起来还是很有成就感的. 先上图,简直就和原版游戏 ...
- JavaScript+HTML5 实现打地鼠小游戏
一．游戏简介 打地鼠这个游戏相信大家都不陌生,也是童年时候一款经典的游戏.本次游戏的编写是以html文件形式完成的,并且使用HBulider软件进行编写,使用谷歌浏览器展示效果,游戏将会采用JavaS ...
- 无聊的人用JS实现了一个简单的打地鼠游戏
直入正题,用JS实现一个简单的打地鼠游戏 因为功能比较简单就直接裸奔JS了,先看看效果图,或者 在线玩玩 吧 如果点击颜色比较深的那个(俗称坏老鼠),将扣分50:如果点击颜色比较浅的那个(俗称好老鼠) ...
- Java之线程———GUI线程（包含打字游戏和计时器俩个GUI实列）
当java程序包含图形用户界面(GUI)时,Java虚拟机在运行应用程序时会自动启动更多的线程,其中有两个重要的线程:AWT-EventQuecue 和 AWT-Windows. AWT-EventQ ...
- 最少javascript代码完成一个2048游戏
原生javascript代码写的2048游戏.建议在谷歌浏览器下跑.'WASD'控制方向.演示地址请移步:http://runjs.cn/detail/bp8baf8b 直接贴代码~ html: &l ...
随机推荐
- 应用springMVC时如果配置URL映射时如下配置
应用springMVC时如果配置URL映射时如下配置 [html] view plaincopy<servlet> <servlet-name>appServlet</s ...
- NSURLSessionDownloadTask实现大文件下载
- 4.1 涉及知识点(1)使用NSURLSession和NSURLSessionDownload可以很方便的实现文件下载操作 第一个参数:要下载文件的url路径 第二个参数:当接收完服务器返回的数据 ...
- 【面试】【Linux】【Web】基础概念
1. HTTP https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol 2. TCP handshake https://en.wikipe ...
- idea如何在git上将分支代码合并到主干
1.首先将idea中的代码分支切换到master分支,可以看到我们在dev上提交的代码 在master上是没有的 2.如图所示,在remote branch 上选择分支,点击后面的三角图标,展开之后选 ...
- MySQL批量数据脚本示例
一.建表 # 新建库 create database bigData; use bigData; #1 建表dept CREATE TABLE dept( id INT UNSIGNED PRIMAR ...
- MFC入门示例之水平滚动条和垂直滚动条(CScroll Bar)
初始化滚动条 1 //初始化滚动条 2 SCROLLINFO si = { 0 }; 3 si.cbSize = sizeof(si); 4 si.fMask = SIF_RANGE | SIF_PA ...
- Lock 锁的实现
锁的种类 自旋锁(spinlock):无法获得锁,就一直循环获取,适合短时间的加锁 睡眠锁(sleeplock):为了防止长时间的循环等待,在获取不到锁时,进程陷入睡眠,当锁释放时对睡眠进程进行唤醒 ...
- C++内存管理：new / delete 和 cookie
new 和 delete C++的内存申请和释放是通过 new 和 delete 实现的, 而new 和 delete 其实就是通过 malloc 和 free 实现的. new 申请内存分为三个步骤 ...
- 培训班输出的大量学员，会对IT行业产生哪些影响？
先说下会有哪些影响呢? 1 可能也就是些大城市的,规模比较大的,口碑比较好的培训学校输出的码农才能入行,而且能做长久.一些线上的所谓培训机构,或者小城市的培训学校,输出的能入行的码农,其实规模很有 ...
- Mysql状态信息查询
目录 一.连接相关 二.show status 三.其它 一.连接相关 查看连接线程相关的系统变量的设置值 show variables like 'thread%'; 查看系统被连接的次数 show ...