用javascript编写的打字小游戏
最近在学ExtJs,看了蔡世友老师的视频课程,在第十课中留了一个小作业,就是用javascript写一个打字小游戏,于是按照前几课所讲的知识自己编写了一个。
一、需求:网页上在随机位置会出现字母,字母会不停的掉落,键盘输入字母,如果输入的字母屏幕上有,就将字母消除,否则字母落到底部自动销毁。
二、我的思路:首先先创建一个生成字母的函数,通过setInterval函数来使它周期性的运行。然后创建一个改变所有包含字母DIV的style的top属性的函数,当top属性达到某个值的时候,销毁当前DIV。也通过setInterval函数使它周期性的运行。通过以上步骤可以实现字母的产生和消失。最后编写一个监听键盘事件的函数,输入值时,将输入的值和屏幕上的DIV中的值比较,如果有,则消除当前DIV,返回。
二、编写步骤:
1、先编写一个能动态生成包含字母的DIV的函数
function create() {//随机生成字符编码var number = Math.floor(Math.random() * 26 + 65);//随机生成字母出现在屏幕上的位置var px = Math.random() * screen.availWidth + "px";//将字符编码转换为字母var letter = String.fromCharCode(number);//生成divvar oDiv = document.createElement("div");oDiv.setAttribute("name", "letter");//生成一个总数加一,为了记录一共输出了多少字母total++;//设置div的属性oDiv.setAttribute("style","position:absolute; width:10px; height:10px; left:20px; top:40px");oDiv.style.left = px.toString();var oText = document.createTextNode(letter);oDiv.appendChild(oText);var root = document.documentElement;var oBody = root.lastChild;oBody.appendChild(oDiv);
}
2、编写改变div属性的函数
function changeStyle() {//获得所有包含字母的DIVvar oLetters = document.getElementsByName("letter");//改变记录行的内容var total=document.getElementById("total");total.innerHTML="共出现"+(window.total-1)+"个字母,您一共打了"+test+"个字母,打对"+score+"个,打错"+error+"个,遗漏"+miss+"个";//判断DIV是否超出边界,如果超出,删除DIV,如果没超出,继续向下走for(var i=0;i<oLetters.length;i++){;var oldTop=parseInt(oLetters[i].style.top);if(oldTop>=screen.availHeight-240){document.body.removeChild(oLetters[i]);window.miss+=1;}else{var newTop = 40+oldTop+"px";oLetters[i].style.top=newTop;}}
}
3、编写键盘事件相应函数
function input(event){window.totalInput+=1;//获得键盘输入的字母var key =String.fromCharCode(event.keyCode);//比较输入也屏幕上的字母是否有相同的,如果有删除该DIV,如果没有错误+1var oLetters = document.getElementsByName("letter");for(var i=0;i<oLetters.length;i++){if(oLetters[i].textContent == key){document.body.removeChild(oLetters[i]);window.score+=1;return 1;} }window.error+=1;}
4、设置周期性执行前两个函数
function start(){window.addEventListener("keydown",input);createTimer=setInterval(create,500);changeTimer=setInterval(changeStyle,500);
}
5、编写停止运行的函数
function stop(){clearInterval(createTimer);clearInterval(changeTimer);
}
6、html界面
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="game.js"></script>
</head>
<body>
<div id="total">共出现0个字母,您打对了0个,正确率是0%</div>
<div οnclick="start();">开始游戏</div>
<div οnclick="stop();">停止游戏</div>
</body>
</html>
注意: 编写的不够规范,而且并没有编写在IE上运行的判断。
用javascript编写的打字小游戏相关推荐
- javascript编写的网页小游戏,很给力
这是游戏界面 以下为游戏代码: 1 <html> 2 <HEAD> 3 4 <SCRIPT LANGUAGE="JavaScript"> 5 & ...
- html5 网页游戏论文,JavaScript编写的网页小游戏,很给力
以下为游戏代码: var timerID = null; var INT = 40; var loadFLG = 0; var gameFLG = 0; var missFLG = 0; var ti ...
- JavaScript打字小游戏
上半年自学了JavaScript,然后就做了个打字小游戏玩玩. 功能模块: 程序设计: 1.可选择游戏时间,显示倒计时 ...
- java实验2总结心得,打字小游戏JAVA实验总结及心得体会
篇一:扫雷游戏实验报告 课程设计 班 级: 姓 名: 学 号: 指导教师: 成 绩: 电子与信息工程学院信息与通信工程系 目录 1.任务概述------------------------------ ...
- JavaScript-事件和事件对象、实现键盘打字小游戏
JavaScript-事件和事件对象 一.事件介绍 事件一般是用于浏览器和用户操作进行交互.最早是IE和Netscape Navigator中出现,作为分担服务器端运算负载的一种手段.直到几乎所有的浏 ...
- 原生JavaScript抒写——贪吃蛇小游戏
原生JavaScript抒写--贪吃蛇小游戏 文章目录 原生JavaScript抒写--贪吃蛇小游戏 前言 一.需求分析 二.效果展示 三.具体逻辑代码分析 1.首先创建一个html文件,然后我们利用 ...
- 原生JS实现一个简单的打字小游戏
原生JS实现一个简单的打字小游戏 利用javascript制作一个简单的打字小游戏 之前写了一个贪吃蛇小游戏好像反响不错 今天我来写一个比贪吃蛇更low更简单的打字小游戏 打字小游戏原理 接下来咋们直 ...
- python 贪吃蛇小游戏代码_10分钟再用Python编写贪吃蛇小游戏
Python编写贪吃蛇 前不久我们公众号发布了一篇C++编写贪吃蛇小游戏的推文,反响空前.看来大家对这类简单易上手小游戏还是很喜爱的. 恰逢2018年IEEE Spectrum编程语言排行榜新鲜出炉, ...
- python小游戏代码大全-Python编写的点灯小游戏代码
Python语言编写的点灯小游戏代码及思路如下: 点灯游戏及其求解的方法, 点灯游戏的游戏规则: (1)有个N行N列的灯板,当你开关其中一盏灯: (2)它和上下左右的灯的状态全部反转,目标是将全部的灯 ...
最新文章
- 云服务器基础运维与管理
- 关于equals与hashcode的重写
- lucene python_Python下的Lucene,PyLucene
- 第四章:Java_面向对象编程(二)
- java项目内存使用率过高排查_项目内存或者 cpu 占用率过高如何排查
- 多个key作为参数进行删除_作为开发人员这些Redis基础应该掌握
- QT中中文乱码的解决
- 华为 AP 3010 SSH 配置
- 用java编写一个故事的程序_使用Java怎么编写一个递归程序
- expdp,impdp实现oracle备份及导入(一)
- CentOS配置history记录每个用户执行过的命令
- php批量百万微信模板消息,PHP实现快速推送微信模板消息
- dos命令move 移动文件
- 51单片机实现流水灯
- 华为鸿蒙研究多久了,鸿蒙华为研发了多少年_华为鸿蒙意义
- 省考计算机专业课考什么,计算机考研专业课考什么
- android12适配机型,安卓12支持机型有哪些?安卓12系统为什么有的软件用不了?...
- Linux capability详解
- 不止谷歌,微软也有自己的眼镜计划?!
- Cisco ❀ ICMP-互联网控制报文协议