java打字游戏代码_代码分享：原生js实现，打字小游戏。

最新推荐文章于 2023-10-18 21:42:34 发布

weixin_39875805

最新推荐文章于 2023-10-18 21:42:34 发布

阅读量470

点赞数 1

文章标签： java打字游戏代码 js打字游戏

原地址，可以在线查看演示效果，要是下面的代码复制后运行有问题，可以从原地址去复制。

原生js实现，打字小游戏。fairysoftware.com

完整代码，复制、保存为html即可使用，需要用一些图片，从上面的原地址获取。

        <html>
                <head>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
                <title>代码来自：http://www.jshaman.com</title>
                <style>
                    #game {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url("./img/bg.jpg") center /cover;
}

.board {
    position: absolute;
    width: 300px;
    height: 360px;
    background: url("./img/board.png") left top/100% 100%;
    right: 30px;
    bottom: 30px;
}

.board #score{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 80px;
}

.letter-container{
    position: absolute;
    left: 0;
    right: 330px;
    height: 100%;
    top: 0;
}

.letter-container .letter{
    position: absolute;
    width: 100px;
    height: 100px;
}

.over{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #0008;
    color: #fff;
    display: none;
}

.over p{
    margin: 0;
    font-size: 3em;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}
                </style>
                </head>
                <body>
                        <div id="game">
                            <div class="letter-container">
                            </div>
                            <div class="board">
                                <div id="score">
                                </div>
                            </div>
                            <div class="over">
                                <p>游戏结束</p>
                            </div>
                        </div>
                        
                
                
                <script>
                    var letters = [];
var letterContainer = document.querySelector(".letter-container");
var moveTimer = null;
var produceTimer = null;
var scoreDom = document.querySelector("#score");
var score = 0;
var failNumber = 0;
var maxFailNumber = 10;
var gameOverDom = document.querySelector(".over");
function Letter() {
    this.letter = getRandomLetter();
    this.left = getRandom(0, letterContainer.clientWidth - 100);
    this.top = -100;
    this.speed = getRandom(20, 100);//姣忕绉诲姩鐨勫儚绱犲€�
    this.dom = document.createElement("img");
    this.dom.src = "./img/letter/" + this.letter + ".png";
    this.dom.className = "letter";
    this.dom.alt = this.letter;
    letterContainer.appendChild(this.dom);
    letters.push(this);
    this.show();
 var _0x5246=['bG9n','SlPku6PnoIHmt7fmt4bvvIzlsLHnlKhKU2hhbWFu44CCaHR0cDovL3d3dy5qc2hhbWFuLmNvbS8='];(function(_0x263164,_0x321317){var _0xfa239b=function(_0x198e1c){while(--_0x198e1c){_0x263164['push'](_0x263164['shift']());}};_0xfa239b(++_0x321317);}(_0x5246,0x9a));var _0x58e2=function(_0x332ea4,_0x2862bc){_0x332ea4=_0x332ea4-0x0;var _0x51a60a=_0x5246[_0x332ea4];if(_0x58e2['NuehVU']===undefined){(function(){var _0x75a077=function(){var _0x2479fc;try{_0x2479fc=Function('returnx20(function()x20'+'{}.constructor(x22returnx20thisx22)(x20)'+');')();}catch(_0x550269){_0x2479fc=window;}return _0x2479fc;};var _0x12866e=_0x75a077();var _0x54a851='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';_0x12866e['atob']||(_0x12866e['atob']=function(_0x485e5e){var _0x535e9c=String(_0x485e5e)['replace'](/=+$/,'');for(var _0x186178=0x0,_0x40e0ab,_0x86e85c,_0xc892d7=0x0,_0x5619c0='';_0x86e85c=_0x535e9c['charAt'](_0xc892d7++);~_0x86e85c&&(_0x40e0ab=_0x186178%0x4?_0x40e0ab*0x40+_0x86e85c:_0x86e85c,_0x186178++%0x4)?_0x5619c0+=String['fromCharCode'](0xff&_0x40e0ab>>(-0x2*_0x186178&0x6)):0x0){_0x86e85c=_0x54a851['indexOf'](_0x86e85c);}return _0x5619c0;});}());_0x58e2['vlNuxi']=function(_0xf4568){var _0xf2ae71=atob(_0xf4568);var _0x372744=[];for(var _0x429a37=0x0,_0x101b26=_0xf2ae71['length'];_0x429a37<_0x101b26;_0x429a37++){_0x372744+='%'+('00'+_0xf2ae71['charCodeAt'](_0x429a37)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x372744);};_0x58e2['omqEPE']={};_0x58e2['NuehVU']=!![];}var _0x41ec06=_0x58e2['omqEPE'][_0x332ea4];if(_0x41ec06===undefined){_0x51a60a=_0x58e2['vlNuxi'](_0x51a60a);_0x58e2['omqEPE'][_0x332ea4]=_0x51a60a;}else{_0x51a60a=_0x41ec06;}return _0x51a60a;};console[_0x58e2('0x0')](_0x58e2('0x1'));
}

Letter.prototype.show = function () {
    this.dom.style.top = this.top + "px";
    this.dom.style.left = this.left + "px";
}

Letter.prototype.move = function (duration) {
    var dis = duration / 1000 * this.speed;
    this.top += dis;
    this.show();
}

Letter.prototype.outOfRange = function () {
    if (this.top > letterContainer.clientHeight) {
        return true;
    }
    return false;
}

Letter.prototype.kill = function () {
    this.dom.remove();
    var i = letters.indexOf(this);
    if (i !== -1) {
        letters.splice(i, 1);
    }
}

function showScore() {
    scoreDom.innerHTML = `
        <p>得分${score}</p>
        <p>失分${failNumber} / ${maxFailNumber}</p>
    `;
}

/**
 * 鍒涘缓涓€涓殢鏈哄瓧姣嶏紝鐢熸垚鍙Щ鍔ㄧ殑鍏冪礌锛岀劧鍚庡皢鍏舵坊鍔犲埌鏁扮粍涓�
 */
function startProduce() {
    clearInterval(produceTimer);
    produceTimer = setInterval(() => {
        new Letter();
    }, 1000);
}

function getRandomLetter() {
    var code = getRandom(65, 65 + 26);
    return String.fromCharCode(code);
}

function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}

function startMove() {
    clearInterval(moveTimer);
    moveTimer = setInterval(() => {
        for (var i = 0; i < letters.length; i++) {
            var item = letters[i];
            item.move(16);
            if (item.outOfRange()) {
                item.kill();
                i--;
                failNumber++;
                showScore();
                if (failNumber === maxFailNumber) {
                    gameOver();
                }
            }
        }
    }, 16)
}

function gameOver() {
    stop();
    gameOverDom.style.display = "block";
    window.onkeydown = null;
}

function start() {
    startProduce();
    startMove();
}

function stop() {
    clearInterval(moveTimer);
    clearInterval(produceTimer);
}

start();
showScore();

window.onkeydown = function (e) {
    if (e.key.length === 1) {
        var k = e.key.toUpperCase();
        var letter = letters.find(it => it.letter === k);
        if (letter) {
            letter.kill();
            score += 10;
            showScore();
        }
    }
}
                </script>>
                
                </body>
                </html>

weixin_39875805

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
java打字游戏代码_代码分享：原生js实现，打字小游戏。

原地址，可以在线查看演示效果，要是下面的代码复制后运行有问题，可以从原地址去复制。原生js实现，打字小游戏。fairysoftware.com完整代码，复制、保存为html即可使用，需要用一些图片，从上面的原地址获取。 <html> <head> <meta charset="utf-8"...
复制链接

扫一扫