原生js实现的金山打字小游戏(实例代码详解)


Posted in Javascript onMarch 16, 2020

首先先来看一下效果图

原生js实现的金山打字小游戏(实例代码详解)原生js实现的金山打字小游戏(实例代码详解)

如果感兴趣的就来看一下Js源码吧

//计分板
var board = {
 dom: document.getElementById("score"),
 maxLost: 3, //最大丢失量
 lost: 0, //当前丢失了多少个
 score: 0, //当前分数
 render: function() {
 //显示
 this.dom.innerHTML =
  "<p>得分:" +
  this.score +
  "</p><p>丢失:" +
  this.lost +
  " / " +
  this.maxLost +
  "</p>";
 },
 //增加一个丢失数
 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金山打字游戏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
JavaScript创建对象的常用方式总结
Aug 10 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
js 动态校验开始结束时间的实现代码
May 25 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 Javascript
vue项目中微信登录的实现操作
Sep 08 Javascript
JavaScript实现拖拽效果
Mar 16 #Javascript
js实现点赞效果
Mar 16 #Javascript
Javascript Web Worker使用过程解析
Mar 16 #Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 #Javascript
JS手写一个自定义Promise操作示例
Mar 16 #Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 #Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 #Javascript
You might like
通过对php一些服务器端特性的配置加强php的安全
2006/10/09 PHP
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
《javascript少儿编程》location术语总结
2018/05/27 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
在Python中使用第三方模块的教程
2015/04/27 Python
Python OS模块常用函数说明
2015/05/23 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
Django model反向关联名称的方法
2018/12/15 Python
python实现批量文件重命名
2019/10/31 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
Pytorch之parameters的使用
2019/12/31 Python
Django中的AutoField字段使用
2020/05/18 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
python从PDF中提取数据的示例
2020/10/30 Python
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
办理暂住证介绍信
2014/01/11 职场文书
旅游节目策划方案
2014/05/26 职场文书
优质护理心得体会
2016/01/22 职场文书
Python WSGI 规范简介
2021/04/11 Python