html网页做一个打字小游戏,原生js实现的金山打字小游戏(实例代码详解)
首先先来看一下效果图
如果感兴趣的就来看一下Js源码吧
//计分板
var board = {
dom: document.getElementById("score"),
maxLost: 3, //最大丢失量
lost: 0, //当前丢失了多少个
score: 0, //当前分数
render: function() {
//显示
this.dom.innerHTML =
"
得分:" +
this.score +
"
丢失:" +
this.lost +
" / " +
this.maxLost +
"
";
},
//增加一个丢失数
addLost: function() {
if (this.lost === this.maxLost) {
return; //游戏已经结束了
}
this.lost++;
if (this.lost === this.maxLost) {
//丢失量达到最大
game.gameOver();
}
this.render();
},
reset: function() {
this.lost = 0;
this.score = 0;
this.render();
},
//增加得分
addScore: function(number) {
if (this.lost === this.maxLost) {
//已经结束了
return;
}
this.score += number;
this.render();
}
};
board.render();
var letters = []; //目前的所有字母,一个字母就是一个对象
//字母的容器
var divContainer = document.getElementById("letter-container");
/**
* 产生一个字母对象,并将其加入到数组中
*/
function createLetter() {
//创建img元素
var img = document.createElement("img");
img.className = "letter";
divContainer.appendChild(img);
//设置src路径
var charNumber = getRandom(65, 65 + 26); //字母的随机ASCII码
var char = String.fromCharCode(charNumber);
img.src = "img/letter/" + char + ".png";
//left随机
var left = getRandom(0, divContainer.clientWidth - img.width);
img.style.left = left + "px";
var letter = {
dom: img,
char: char,
left: left,
top: -img.height, //初始的top值
speed: getRandom(100, 500), //速度: 像素/秒
render: function() {
this.dom.style.top = this.top + "px";
},
// 每调用一次该方法,字母移动一段距离
// duration是经过的时间: 秒
move: function(duration) {
var dis = duration * this.speed; //计算距离
this.top += dis;
this.render();
},
kill: function() {
//自杀
// 从数组中移除
var index = letters.indexOf(this); //找到字母在数组中的下标
if (index >= 0) {
letters.splice(index, 1);
}
// 移除dom元素
this.dom.remove();
}
};
letter.render();
letters.push(letter);
}
// 根据最小值和最大值产生一个随机整数(不包含最大值)
function getRandom(min, max) {
// Math.random() 0~1
// Math.random() * (max - min) 0 ~ (max - min)
// Math.random() * (max - min) + min min ~ max
return Math.floor(Math.random() * (max - min) + min);
}
//游戏对象,统筹规划
var game = {
timerProduce: null, //自动产生字母的timerid
timerMove: null, //自动移动的timerid
isOver: false,
//自动的,不断的,产生字母
startProduce: function() {
if (this.timerProduce) {
return; //正在产生中,什么也不做
}
this.timerProduce = setInterval(createLetter, 500);
},
//停止自动产生字母
stopProduce: function() {
clearInterval(this.timerProduce);
this.timerProduce = null;
},
//开始不断的移动所有字母
startMove: function() {
if (this.timerMove) {
return;
}
var duration = 0.016; //间隔时间,秒
this.timerMove = setInterval(function() {
for (var i = 0; i < letters.length; i++) {
var letter = letters[i]; //要移动的字母
letter.move(duration);
//判断该字母是不是可以消除了
if (letter.top >= divContainer.clientHeight) {
letter.kill();
i--;
//丢失
board.addLost();
}
}
}, duration * 1000);
},
//停止移动所有字母
stopMove: function() {
clearInterval(this.timerMove);
this.timerMove = null;
},
gameOver: function() {
this.stopMove();
this.stopProduce();
document.getElementById("over").style.display = "block";
this.isOver = true;
},
restart: function() {
//清空字母
for (var i = 0; i < letters.length; i++) {
var letter = letters[i];
letter.kill();
i--;
}
this.startMove();
this.startProduce();
board.reset();
this.isOver = false;
document.getElementById("over").style.display = "none";
}
};
game.startProduce();
game.startMove();
//注册事件
window.onkeydown = function(e) {
if (game.isOver) {
return;
}
var key = e.key.toUpperCase();
//匹配
for (var i = 0; i < letters.length; i++) {
var letter = letters[i];
if (letter.char === key) {
letter.kill();
board.addScore(10);
return; //只移除一个
}
}
};
仅仅使用js的面向对象编程,可爱的金山打字小游戏就实现了
总结
到此这篇关于原生js实现的金山打字小游戏的文章就介绍到这了,更多相关js金山打字游戏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
html网页做一个打字小游戏,原生js实现的金山打字小游戏(实例代码详解)相关推荐
- pos请求 微信小程序_微信小程序蓝牙连接小票打印机实例代码详解
1.连接蓝牙 (第一次发表博客) 第一步打开蓝牙并搜索附近打印机设备// startSearch: function() { var that = this wx.openBluetoothAdapt ...
- php跳一跳小游戏,原生JS实现的跳一跳小游戏完整实例
本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成 ...
- html实现跳跳棋游戏,原生JS实现的跳一跳小游戏完整实例
本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成 ...
- 原生js实现的金山打字小游戏
首先先来看一下效果图 如果感兴趣的就来看一下Js源码吧 //计分板 var board = {dom: document.getElementById("score"),maxLo ...
- Cocos 2d-X Lua 游戏添加苹果内购(二) OC和Lua交互代码详解
这是第二篇 Cocos 2d-X Lua 游戏添加苹果内购(一) 图文详解准备流程 这是前面的第一篇,详细的说明了怎样添加内购项目以及填写银行信息提交以及沙盒测试员的添加使用以及需要我们注意的东西,结 ...
- 打砖块小游戏php程序,利用原生js实现html5打砖块小游戏(代码示例)
本篇文章给大家通过代码示例介绍一下利用原生js实现html5打砖块小游戏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前言 PS:本次项目中使用了大量 es6 语法,故对于 ...
- 原生js实现轮播图——小肉包
使用原生js实现轮播图--小肉包 今天分享一个使用原生JS实现轮播图的案例,并且配上比较详细的过程讲解,欢迎小伙伴的浏览和批评指正.静态效果图如下: 核心思想 将一些图片在一行中平铺,然后计算偏移量再 ...
- [新手必备]Unity推箱子小游戏C#代码详解(第一篇-代码部分)
完整项目请参考博客:https://blog.csdn.net/qq_41676090/article/details/96300302 本文为推箱子小游戏C#代码详解第一篇的代码部分,主要讲解 Sy ...
- 简单跑酷java代码_如何实现一个简单的跑酷游戏?(代码详解)
本篇文章给大家带来的内容是介绍如何实现一个简单的跑酷游戏?(代码详解).有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 采用的物理引擎是:Phaser.js 官网地址:http:// ...
- 微信小程序系列(7)如何用微信小程序写一个论坛?贴心代码详解(五)删帖页【完结篇】
源代码已开源,如果对你有帮助可以点个星:https://github.com/linkaimin/xdzs 写论坛不难,重点是各页面之间的信息传递! 先放成品图,虽然有点单调....但是麻雀虽小五脏俱 ...
最新文章
- 使用 IDEA 开发工具(版本为 IntelliJ IDEA 14.1.4)打可执行jar包的操作步骤
- 总结ThinkPHP使用技巧经验分享(四)
- 多个项目共享一个app.config 的解决办法 (转)
- java8-接口新特性
- CCPC-Wannafly Winter Camp Day8 (Div2, onsite) A 题 Aqours (精巧的树形DP)
- Arturia Prophet Mac音频插件:将Prophet 5,Prophet VS,Prophet Hybrid三种不同音乐合成器于一体
- 万物皆可爬系列查看翻页翻到最后是什么
- oracle-审计3
- Linux 中的 20 大网络监控工具
- 下载速度15MB/s,度盘新版本?
- 电脑控制android手机神器,scrcpy
- 网易游戏策划笔试2019春招题解
- 采用Matlab解决最小曼哈顿图问题
- 【seaborn】jointplot 改变图片长宽比,非方形
- 物联网模块选择注意事项
- VMware Workstation 15 Pro 安装centos7
- 数字孪生快速建模研究案例
- tradingview教程 charting_library
- vue打包后如何区分开发、测试和生产等不同的开发环境
- [原]领带打法-半温莎结
热门文章
- navicat for MySQl破解版下载与安装
- java 性能问题排查与性能优化
- 本来都对象棋失去兴趣了, 是特殊的原因让我又开始从侧面搞象棋方面的擦边的游戏...
- Android TextView 跑马灯效果和 EditText 冲突解决办法
- 软件项目与产品的区别与联系_软件产品和软件过程之间的区别和关系
- sql服务器密码如何显示,如何查看sql数据库密码
- P2P终结者 操作用法(如何限速)
- 基于android的订餐系统 答辩ppt,外卖订餐系统答辩PPT
- 高一数学计算机教材,高一数学的教学计划
- linux ghost漏洞,危险!GHOST(幽灵)漏洞曝光