原生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金山打字游戏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • javascript+css3开发打气球小游戏完整代码

    效果知识点: css3画气球, 自定义属性运用,随机阵列, DOM元素操作,高级回调函数与参数复传,动态布局,鼠标事件,定时器运用,CSS3新增样式等. css代码如下: <style> {margin:0;padding:0;} body{background:#434343;overflow:hidden} .balloon{ position:absolute; left:0; top:0; margin:auto; width:160px; height:160px; 圆角: 左上 右

  • 利用原生js实现html5小游戏之打砖块(附源码)

    前言 PS:本次项目中使用了大量 es6 语法,故对于 es6 语法不太熟悉的小伙伴最好能先了解一些基本的原理再继续阅读. 首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语法,个人认为以后 es6 语法会越来越普及,所以算是提前熟悉语法使用技巧.小游戏的实现逻辑上可能并不完善,也许会有一些 bug ,但是毕竟只是为了提升编程能力与技巧,希望大家不要太较

  • JavaScript实现单英文金山打字通

    单英文的金山打字通的具体实现代码,供大家参考,具体内容如下 1.页面的布局代码如下: <div> <div id="char">A</div> <div id="result">请在按键上按下屏幕上显示的字</div> </div> 2.页面布局的样式代码如下: body{ margin: 0; /*开启弹性布局,并让弹性布局中的子元素 水平居中对齐,垂直居中对齐*/ display: flex

  • JavaScript编写的网页小游戏,很给力

    以下为游戏界面: 以下为游戏代码: <html> <head> <script language="JavaScript"> <!-- Original: Nick Young () --> <!-- recompose: Pakchoi () --> var timerID = null; var INT = 40; var loadFLG = 0; var gameFLG = 0; var missFLG = 0; var

  • 基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)

    随着html5的兴起,那些公司对大型游戏的开发正在慢慢疏远,一.开发周期长:二.运营花费高:他们正找一些能够克服这些缺点的替代品.正好,html5的出现可以改变这些现状,在淘宝.京东等一些大型电商网站.QQ.微信等聊天软件都出现了html5的小游戏,这说明html5越来越受到大家的青睐.接下来我用javascript实现一个小型游戏---打地鼠. 一.游戏简介 打地鼠这个游戏相信大家都不陌生,也是童年时候一款经典的游戏.本次游戏的编写是以html文件形式完成的,并且使用HBulider软件进行编

  • js推箱子小游戏步骤代码解析

    推箱子小游戏大家肯定都玩过,之所以写这篇文章,是觉得这个小游戏足够简单好理解 demo: 步骤解析: 本文代码已经放在了github上面了,里面也进行了很详细的代码注释,可以copy下来,在本地运行一下看看. 1. 渲染地图 html结构: html结构十分简单,只要弄一堆div,来放置地图的class就可以了,我这里初始化了12*9个div,地图里最多九行高度. 这些div都是同样大小,地图渲染出来区别的只是颜色的不同. 地图函数: var box=$('.box div'); //地图使用的

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

    首先先来看一下效果图 如果感兴趣的就来看一下Js源码吧 //计分板 var board = { dom: document.getElementById("score"), maxLost: 3, //最大丢失量 lost: 0, //当前丢失了多少个 score: 0, //当前分数 render: function() { //显示 this.dom.innerHTML = "<p>得分:" + this.score + "</p&g

  • JS动画实现回调地狱promise的实例代码详解

    1. js实现动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animate</title> <style> .ball { width: 40px; height: 40px; margin-bottom: 5px; border-radius: 20px; } .ball1 { ba

  • 原生JS实现的跳一跳小游戏完整实例

    本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成动作并进行判断: 首先po一下代码: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie

  • 原生js实现贪食蛇小游戏的思路详解

    先不多说先上图 下面是代码部分(这里你可以根据需要改变蛇头和身体还有食物的图片,然后默认的样式是使用纯颜色的如果没有更改我的背景图片的话------改这些图开始是想搞笑一下朋友哈哈哈,请不要在意哈),还有操作键是使用 ↑ ↓ ← → ) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>贪食蛇</title>

  • 利用原生JS实现欢乐水果机小游戏

    简介: 玩家点击某个押注物品则在该物品上下注.点击开始则游戏开始,如果没有下注则不能开始游戏. 游戏中的物品有八中,分别为:苹果.西瓜.柠檬.橙子.铃铛.77.双星.BAR. 在放行游戏区左右方为押注区,每种物品下方有加减号按钮,每次点 击加号增加一个筹码注金,反之减号就减少一个筹码注金 开始: 开始键 奖励:GOOD LUCK 由于这个时低配版的,我就没有按照原版的写进去,就是中了GOOD LUCK直接获得15分. 出于好耍,本人想起了小时候玩过的水果机,js也学了一会儿了,就想用它写一个简单

  • 用原生JS对AJAX做简单封装的实例代码

    首先,我们需要xhr对象.这对我们来说不难,封装成一个函数. var createAjax = function() { var xhr = null; try { //IE系列浏览器 xhr = new ActiveXObject("microsoft.xmlhttp"); } catch (e1) { try { //非IE浏览器 xhr = new XMLHttpRequest(); } catch (e2) { window.alert("您的浏览器不支持ajax,请

  • JQuery手速测试小游戏实现思路详解

    (-1)写在前面 我用的chrome49,jquery3.0,我得到过399分,信不信由你. (1)设计思路 两个p元素放在div里,每个p元素的高度和宽度都和div一样,当鼠标放在div上时,第一个p向上移动(更改marginTop值),当鼠标离开div上时,第一个p向下移动. (2)知识储备 a. :nth-child #lol p:nth-child(1),当前元素p相对于他的父元素的所有子元素,如果第一个元素是p则匹配成功. #lol :nth-child(1) 相当于#lol *:nt

  • 纯JavaScript 实现flappy bird小游戏实例代码

    前言: <flappy bird>是一款由来自越南的独立游戏开发者Dong Nguyen所开发的作品,游戏于2013年5月24日上线,并在2014年2月突然暴红.2014年2月,<Flappy Bird>被开发者本人从苹果及谷歌应用商店撤下.2014年8月份正式回归APP STORE,正式加入Flappy迷们期待已久的多人对战模式.游戏中玩家必须控制一只小鸟,跨越由各种不同长度水管所组成的障碍. 正文: 接下来就是一步一步来实现它 步骤1:页面布局,这儿就不多说了,页面内容如下:

  • Python实现Pig Latin小游戏实例代码

    前言: 本文研究的主要是Python实现pig Latin小游戏的简单代码,具体介绍如下. Pig Latin是一个语言游戏. 步骤: 1.让用户输入一个英文单词 2.确保用户输入一个有效单词 3.将单词转换成Pig Latin 4.显示转换结果 一.Input 函数:raw_input()用于输出一个字符串并等待键盘输入某字符串,最后以Enter(或Return)结束输入 original = raw_input("Enter a word:") print original 上述中

  • python实现逢七拍腿小游戏的思路详解

    逢七拍腿游戏 几个小朋友在一起玩逢七拍腿的游戏,从1开始数数,当数到7的倍数或者尾号是7时,拍一下腿.现在从1数到99,假设每个人都没有错,计算一下共要拍腿几次? 第一种实现思路:通过在for循环语句中使用continue语句来实现计算拍腿次数.首先假设可拍腿次数为最高次数99,每触发满足的条件的时候就直接跳转到下一次循环当中,最后的total减1则不执行,不满足条件时total则减1.因此实际上total减去的是不满足条件的数字,代码如下: total = 99 #记录拍腿次数的变量 for

随机推荐