原生JS面向对象实现打字小游戏

本文实例为大家分享了JS面向对象实现打字小游戏的具体代码,供大家参考,具体内容如下

Demo介绍

通过键盘点击下落小球所显示的数字,小球刷新再任意位置重新掉落。并且,每五个球后掉落速度加快
小球刷新位置 大小,颜色随机。用面向对象class方法实现
该demo源码可直接使用。赋值到html文件 然后打开就可以使用,可用作学校课设使用

源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .title{
        width: 1200px;
        height: 80px;
        margin:400px auto;
        color: darkblue;
        text-shadow: 3px 3px 3px black;
        font-size: 80px;
        font-weight: bolder;
        text-align: center;
        font-family: "楷体";

    }
    .name{
        width: 1000px;
        height: 40px;
        margin:0 auto;
        color: skyblue;
        text-shadow: 3px 3px 3px black;
        font-size: 40px;
        font-weight: bolder;
        text-align: center;
        font-family: "楷体";
    }
</style>

<body>
    <div style="font-size: 40px;">当前分数<div class="score" >0</div></div>
    <div class="title">原生js小Demo:打字练习游戏</div>
    <div class="name">作者:lz</div>
</body>
<script>
    class TypingGame {
        constructor() {
            this.oSpan
            this.speed = 2;
            this.timer = "";
            this.word;
            this.colors = ["red", "orange", "purple", "black", "pink", "blue", "skyblue", "yellowgreen", "brown", "tomato", "indianred", "orchid", "peru", "aqua", "slateblue", "gray", "grey", "crimson","green"]//颜色集合
            this.createWord(this.speed);
            document.onkeydown = e => {
                var e = e || window.event;
                var keycode = e.keyCode || e.which;
                // TypingGame.oSpan=this.$$("span");
                var keyword = String.fromCharCode(keycode).
                    toLowerCase()
                if (this.word === keyword) {
                    // 打掉一个 - 计分
                    // 获取原来的分
                    var score = this.$('.score', false).innerText - 0
                    // 让分数+1
                    score++
                    // 加1以后的分数放进div中
                    document.querySelector('.score').innerText = score
                    if (score === 5) {
                        this.speed += 2//每过五个字母,下落速度加快
                    }
                    this.oSpan.parentElement.removeChild(this.oSpan)
                    this.createWord(this.speed)
                }
            }

        }
        createWord(speed) {
            let wh=this.getRandom(30,80);//随机大小
            this.oSpan = this.creEle('span');
            //    console.log(this.oSpan)
            this.setStyle(this.oSpan, {
                width: wh+"px",
                height: wh+"px",
                position: 'absolute',
                top: 0,
                left: this.getRandom(document.documentElement.clientWidth - 30) + "px",
                borderRadius: "50%",
                lineHeight: '30px',
                textAlign: 'center',
                backgroundColor: this.colors[this.getRandom(18)],
                color: "white",
                fontWeight: "bold",
                textAlign:"center",
                lineHeight:wh+"px"
            })

            document.body.appendChild(this.oSpan)
            // 随机字符:97~122
            var randomNum = this.getRandom(97, 123)
            this.word = String.fromCharCode(randomNum);

            this.oSpan.innerText = this.word
            // 这个标签要慢慢向下运动
            this.elementsMove(this.speed);
        }
        elementsMove() {
            // console.log(this.oSpan)
            // 定时器
            clearInterval(this.timer)
            this.timer = setInterval(() => {
                // 获取高度

                var t = this.oSpan.offsetTop;
                // 加大高度
                t += this.speed;
                console.log(this.speed)
                // 如果这个标签到了浏览器的最低端,GAME OVER
                if (t >= document.documentElement.clientHeight - 30) {
                    clearInterval(this.timer)
                    if (confirm("GAME OVER, 是否重玩?")) {
                        location.reload();//刷新重玩
                    }
                }
                // 加大后设置给标签的top
                this.oSpan.style.top = t + "px"
            }, 50)
        }
        setStyle(ele, styleObj) {
            for (var attr in styleObj) {
                ele.style[attr] = styleObj[attr]
            }
        }
        $(tag, all = false) {
            return all ? document.querySelectorAll(tag) : document.querySelector(tag);
        }
        creEle(tag) {
            return document.createElement(tag)
        }
        getRandom(a, b = 0) {
            var max = Math.max(a, b);
            var min = Math.min(a, b)
            return Math.floor(Math.random() * (max - min)) + min
        }
    }
    new TypingGame;
</script>

</html>

Demo截图

还可以改进的地方
可以自行改写
可以增加打错提示,且可以随机刷新的高度。可以进行一些速度优化。把动画改成requestAnimationFrame()效果更真实。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2021-09-11

js打字机效果代码

Type Writea{text-decoration:none} // please keep these lines on when you copy the source // made by: Nicolas - http://www.javascript-page.com var current = 0 var x = 0 var speed = 70 var speed2 = 2000 function initArray(n) { this.length = n; for (var

JS实现的打字机效果完整实例

本文实例讲述了JS实现的打字机效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the

JS实现简单的键盘打字的效果

以代码形式实现过程分析: <html> <head> <title>打字效果</title> <meta http-equiv="Content-Type" Content="text/html;charset=gb2312" /> <style type="text/css"> body{ font-size:14px; font-color:#purple; font-w

javascript 打字游戏实现代码

效果如图所示:下面是核心代码 复制代码 代码如下: GAME = { //随机产生字母 randLetter: function() { var arrLetter = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K&qu

Js 打字效果 逐一出现的文字

第一种:打印多个文字 逐个出现的文字 var layers =document.layers,style=document.all,both=layers||style,idme=908601; if(layers){layerRef='document.layers';styleRef ='';}if(style){layerRef='document.all';styleRef = '.style';} function writeOnText(obj,str){ if(layers)wit

JS实现的自动打字效果示例

本文实例讲述了JS实现的自动打字效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>js typing</title> </head> <body> <div id='divTyping'></div> <script> var str = 'js 实现的 打字效果,感

JavaScript打字小游戏代码

功能模块: 程序设计: 1.可选择游戏时间,显示倒计时 1.定义全局变量 2.可选择英文字母出现个数 2.控制游戏时间函数 3.统计得分 3.动画效果 4.菜单选项 4.设定字母图片出现的时间 5.判断函数 6.游戏菜单 7.游戏时间选项 8.显示游戏时间 9.游戏难度选项 10.游戏得分 先上效果图:(PS:美工是硬伤) 主要代码设计: 复制代码 代码如下: //-------全局变量------- var data={ "10":["<img src='images

JS模拟键盘打字效果的方法

本文实例讲述了JS模拟键盘打字效果的方法.分享给大家供大家参考.具体如下: 这里使用JS模拟实现软键盘及打字效果,点击软键盘年的字母键,文本框中即可显示文字,像是键盘打字的效果,美工不太好,没怎么美化,CSS高手可美化一下按钮,看上去还挺不错吧,我觉得. 先来看看运行效果图: 具体代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb23

javascript 打字效果的文字特效

本节代码主要使用了 onMousedown 事件和 event.button 属性,主要功能和用法如下. • setTimeout 方法,在执行时是在载入后延迟指定时间后,去执行一次表达式,仅执行一次. • charAt 方法返回一个字符值,该字符位于指定索引位置.字符串中的第一个字符的索引为0,第二个的索引为1,等等.超出有效范围的索引值返回空字符串. 打字效果的文字特效 var layers = document.layers; var style = document.all; var b

javascript实现自动输出文本(打字特效)

主要利用了setTimeout(),递归和String.substring(); 做出的效果就像是有一个打字员在打字. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name=&quo

用javascript实现自动输出网页文本

用javascript实现自动输出网页文本,用了setTimeout(),递归和String.substring();两个函数实现此功能,下面把实现代码分享给大家. 做出的效果就像是有一个打字员在打字. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content=&q

JavaScript实现自动生成网页元素功能(按钮、文本等)

创建元素的方法: 1.利用createTextNode()创建一个文本对象 2.利用createElement()创建一个标签对象 3.直接利用容器标签中的一个属性:innerHTML-----本质上改该标签容器中的"html代码",不是我们认为的对象树的操作 详解代码: <body> <input type="button" value="创建并添加节点1" onclick="addNode1()"/>

JavaScript实现简单的文本逐字打印效果示例

本文实例讲述了JavaScript实现简单的文本逐字打印效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE> <html> <head> <title>www.jb51.net js打字效果</title> <meta charset="utf-8"> </head> <style type="text/css"> div {

Delphi实现图像文本旋转特效完整实例代码

本文以实例讲述了Delphi实现图像文本旋转特效的解决方法,在本程序中利用的控件主要是Panel 控件.Image 控件.Edit 控件.Label 控件和Button 控件.本程序的关键是利用Delphi 的bmp_rotate()函数来实现旋转图像的功能.并巧妙地调用相关Windows API 函数来实现对文本的旋转特效. 完整的实例代码如下: unit Unit1; interface uses Windows, Messages, SysUtils, Classes, Graphics,

JavaScript实现自动对页面上敏感词进行屏蔽的方法

本文实例讲述了JavaScript实现自动对页面上敏感词进行屏蔽的方法.分享给大家供大家参考.具体如下: <html> <head> <title>Bad Words Example</title> <script type="text/javascript"> function filterText(sText) { var reBadWords = /badword|anotherbadword/gi; return sT

javascript模拟map输出与去除重复项的方法

本文实例讲述了javascript模拟map输出与去除重复项的方法.分享给大家供大家参考.具体方法如下: 1.Javascriptmap输出 function Map(){ // private var obj = {} ;// 空的对象容器,承装键值对 // put 方法 this.put = function(key , value){ obj[key] = value ;// 把键值对绑定到obj对象上 } // size 方法 获得map容器的个数 this.size = functio

JavaScript实战(原生range和自定义特效)简单实例

今天我又码了两个特效:一个是用原生input[type=range]的,另一个完全自定义的:下面是完整代码和演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #tip{ position: absolute; top: 30px; left: 0; ri

JavaScript实现自动切换图片代码

本文给大家分享一段js代码实现自动切换图片的实例代码,代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

纯javascript实现自动发送邮件

描述: 此JavaScript将帮助你的电子邮件的人.只要按一下电子邮件,有人!和JavaScript会要求的电子邮件地址,主题,等等然后你,新的邮件,是向你打开了. <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function mailsome1(){ who=prompt("Enter recipient's email address: ","antispammer@earthling.net