用JS写了一个打字游戏，反正我是通不了关
今天想写个简单的游戏， 打字游戏好像都没写过， 那么就写打字游戏吧， gamePad包含了关卡的信息， 可以用来调整给个关卡字符下落的速度；
getRandom函数会返回一个字符对象， 这个对象包含了字符下落的速度和当前被定位的x，y值， 一整框代码比较有借鉴的地方就是， 只用了一个定时器， 而不是每一个字符都用一个定时器， 那样会严重影响性能；
没使用第三方的库， 纯手贱， 用原生的js写游戏
<html>
<head>
<meta charset="utf-8">
<style>
#conatiner{
width:400px;
height:500px;
border:1px solid #eee;
position: relative;
}
</style>
</head>
<body>
<span>typing</span>
<div>
<span id="score"></span>得分
</div>
<div id="conatiner"> </div>
<button id="start">开始游戏</button>
</body>
<script>
var gamePad = {
: {
speed :
},
: {
speed :
},
: {
speed :
},
: {
speed :
},
: {
speed :
}
}
var getRandom = function() {
//随即一个97到122的字符;
var charCode = +Math.floor(Math.random()*);
var speed = Math.ceil(Math.random()*);
return {
code : String.fromCharCode(charCode),
speed : speed,
y : ,
x : Math.floor(Math.random()*),
}
};
function game( n , score ) {
var eConatiner = document.getElementById("conatiner");
var eScore = document.getElementById("score");
var showArr = []; //字符对象的列表
var shoted = ;
//随机一个字符对象， 包含了字符的运动速度，字符的值
//让showArr这个数组的数据运动;
var run = function() {
//随机生成字符对象
if(Math.random()>0.9) {
var obj = getRandom();
showArr.push(obj);
}
//让元素运动
for(var i= ;i < showArr.length; i++) {
showArr[i].y+=showArr[i].speed;
if(showArr[i].y>) {
//showArr.splice(i,1);
clear();
alert("游戏失败");
location.reload();
}
}
eConatiner.innerHTML = "";
//让元素添加到界面中;
for(var i= ;i < showArr.length; i++) {
var eSpan = document.createElement("span");
eSpan.style.position = "absolute";
eSpan.innerHTML = showArr[i].code;
eSpan.style.left = showArr[i].x;
eSpan.style.top = showArr[i].y;
eConatiner.appendChild(eSpan);
}
}
var keyup = function(ev) {
for(var i= ;i < showArr.length; i++) {
if(showArr[i].code === ev.key || String.fromCharCode(ev.keyCode).toLowerCase() == showArr[i].code) {
showArr.splice(i,);
shoted++;
eScore.innerHTML = shoted;
if(shoted === score && gamePad[n+] === undefined) {
alert("少侠你好厉害， 你好快， 真的好快好快的");
}else if(shoted === score) {
clear();
alert("进入下一关");
game(n+, score+)
}
return;
}
}
}
var clear = function() {
clearInterval(game.timer);
window.removeEventListener("keyup", keyup);
}
window.addEventListener("keyup", keyup);
game.timer = setInterval(run,gamePad[n].speed);
}
document.getElementById("start").addEventListener("click", function() {
game(, );
});
</script>
</html>
重新整理代码， 修改成面向对象样子， 过程式的代码太乱了， 虽然说是面向对象， 只是JS看起来舒服多；
通过面向对象的思维把JS代码各个模块进行封装， 避免作用域的混乱不堪：
<html>
<head>
<meta charset="utf-8">
<style>
#conatiner{
width:400px;
height:500px;
border:1px solid #eee;
position: relative;
}
</style>
</head>
<body>
<span>typing</span>
<div>
<span id="score"></span>得分 ;
需要：<span id="need"></span>分；
</div>
<div id="conatiner"> </div>
<button id="start">开始游戏</button>
</body>
<script>
var eConatiner = document.getElementById("conatiner");
var eScore = document.getElementById("score");
var getRandom = function() {
//随即一个97到122的字符;
var charCode = +Math.floor(Math.random()*);
var speed = Math.ceil(Math.random()*);
return {
code : String.fromCharCode(charCode),
speed : speed,
y : ,
x : Math.floor(Math.random()*),
}
}; function Game( n , score , eConatiner, eScore ,need) {
this.need = need;
this.need.innerHTML = score;
this.showArr = []; //字符对象的列表
this.shoted = ;
this.n = n;
this.score = score;
this.eConatiner = eConatiner;
this.eScore = eScore;
this.events();
this.run();
this.timer = setInterval(this.run.bind(this), Game.gamePad[n].speed);
}
Game.gamePad = {
: {
speed :
},
: {
speed :
},
: {
speed :
},
: {
speed :
},
: {
speed :
}
}
Game.prototype.keyup = function(ev) {
showArr = this.showArr;
for(var i= ;i < showArr.length; i++) {
if(showArr[i].code === ev.key || String.fromCharCode(ev.keyCode).toLowerCase() == showArr[i].code) {
showArr.splice(i,);
this.shoted++;
this.eScore.innerHTML = this.shoted;
if(this.shoted === this.score && Game.gamePad[this.n+] === undefined) {
alert("少侠你好厉害， 你好快， 真的好快好快的");
}else if(this.shoted === this.score) {
this.unbind();
alert("进入下一关");
new Game(this.n+, this.score+, this.eConatiner, this.eScore, this.need);
}
return;
}
}
}
Game.prototype.events = function() {
this.keyup = this.keyup.bind(this);
window.addEventListener("keyup", this.keyup);
}
Game.prototype.unbind = function() {
clearInterval(this.timer);
window.removeEventListener("keyup", this.keyup);
}
//随机一个字符对象， 包含了字符的运动速度，字符的值
//让showArr这个数组的数据运动;
Game.prototype.run = function(){
showArr = this.showArr;
//随机生成字符对象
if(Math.random()>0.9) {
var obj = getRandom();
showArr.push(obj);
}
//让元素运动
for(var i= ;i < showArr.length; i++) {
showArr[i].y+=showArr[i].speed;
if(showArr[i].y>) {
alert("游戏失败");
location.reload();
}
}
this.eConatiner.innerHTML = "";
//让元素添加到界面中;
for(var i= ;i < showArr.length; i++) {
var eSpan = document.createElement("span");
eSpan.style.position = "absolute";
eSpan.innerHTML = showArr[i].code;
eSpan.style.left = showArr[i].x;
eSpan.style.top = showArr[i].y;
this.eConatiner.appendChild(eSpan);
}
}
document.getElementById("start").addEventListener("click", function() {
new Game(, , eConatiner, eScore, document.getElementById("need"));
});
</script>
</html>
作者： NONO
出处：http://www.cnblogs.com/diligenceday/
企业网站：http://www.idrwl.com/ 厦门点燃未来网络科技
开源博客：http://www.github.com/sqqihao
QQ：287101329
微信：18101055830
厦门点燃未来网络科技有限公司， 是厦门最好的微信应用， 小程序， 微信网站， 公众号开发公司
用JS写了一个打字游戏，反正我是通不了关的更多相关文章
- 用vue.js写的一个瀑布流的组件
用vue.js写的一个瀑布流的组件:https://segmentfault.com/a/1190000010741319 https://www.jianshu.com/p/db3cadc03402
- ajax简单手写了一个猜拳游戏
使用ajax简单写一个猜拳游戏 HTML代码 <!DOCTYPE HTML> <html lang="en-US"> <head> <me ...
- jQuery 写的简单打字游戏
var off_x; //横坐标 var count=0; //总分 var speed=5000; //速度,默认是5秒. var keyErro=0; //输入错误次数 var keyRight= ...
- 这个程序员有点牛，现场直接用JS写了个飞机游戏，半小时吸粉三千
程序员昨晚在b站直播的时用JavaScript代码写了一个飞机大战游戏,半小时不到粉丝关注就上千了. 今日就拿出来跟大家分享一下,对许多大佬来说做这个特效也不是很难,但是对于刚开始学习前端这方面还是有 ...
- 原生js写的一个弧形菜单插件
弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var d ...
- 用css3+js写了一个钟表
有一天看到css3旋转这个属性,突发奇想的写了一个钟表(没做浏览器兼容),来一起看看是怎么写的吧! 先给个成品图,最终结果是个样子的(动态的). 首先,思考了一下页面的布局,大致需要4层div,最底层 ...
- 【原创】使用JS封装的一个小型游戏引擎及源码分享
1 /** * @description: 引擎的设计与实现 * @user: xiugang * @time: 2018/10/01 */ /* * V1.0: 引擎实现的基本模块思路 * 1.创建 ...
- 使用纯js写的一个分页
上图晒效果: 网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了.其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用lim ...
- 用js写出一个漂亮的单选框选中效果
一般的input框比较简单,我们可以用JavaScript配合css背景图片定位让我们模拟写出一个点击选中效果 首先需要有个图片素材,当页面加载的时候是背景图片定位到左图,当我们点击图片的时候,背景图 ...
随机推荐
- C++实现Ping
这是一个老话题了,但是我刚学会... 我们的目的是实现这么个东西: 之所以用红框框一下是因为,从baidu.com到123.125.114.144的过程是DNS解析,我们暂时先实现ping的部分. 基 ...
- 第一课 ionic 日志输出
写程序的首要问题就是要打印日志,因为只有将日志输出才能真正了解程序的运行状态. 日志输出有两种方式 1.console输出 console.log("测试一下") console. ...
- php设计模式 装饰器模式
装饰器模式,可以动态地添加修改类的功能. 一个类提供了一项功能,如果要修改并添加额外的功能,传统的编程模式需要写一个子类继承它,并重新实现类的方法.使用装饰器模式,仅需要在运行时添加一个装饰器对象即可 ...
- Nginx反向代理和负载均衡部署指南
1. 安装 1) 从Nginx官网下载页面(http://nginx.org/en/download.html)下载Nginx最新版本(目前是1.5.13版本)安装包: ...
- Android：使用代理服务器安装SDKs
在使用Android SDK Manager来安装SDK时,因为google的ip被墙了,所以下载文件时,下载不到. 面对不能访问google的问题,通常有下列方案: 1)修改hosts文件,需要有正 ...
- FindBugs 入门——帮你减少代码中的bug数
FindBugs 入门 FindBugs 作用 开发人员在开发了一部分代码后,可以使用FindBugs进行代码缺陷的检查.提高代码的质量,同时也可以减少测试人员给你报的bug数. 代码缺陷分类 根据缺 ...
- sql server之ROW_NUMBER() OVER()取每组的第N行数据
先看个例子: document_id card_holder_id created_date document_type_id 1 1 2015-7-1 1 2 4 2015-7-2 1 3 4 20 ...
- thrift的lua实现
最近要进行系统升级,后台的数据是根据城市区分的.担心新系统的稳定性及新数据的准确性,计划部分城市采用新接口.接口的入参里没有城市信息,只有经纬度坐标,需要调用一个thrift接口来根据坐标获取城市信息 ...
- java中System.getenv和System.getProperties的区别
System.getenv获取的是系统的环境变量(就是用户在操作系统中设置的环境变量),windows和linux下环境变量的设置就不说了哦. System.getProperties获取的是系统的相 ...
- [原创]纯CSS3打造的3D翻页翻转特效
刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...