JavaScript 打字游戏

style.css代码：

#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%);
}

script.css代码：

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";
    letterContainer.appendChild(this.dom);
    letters.push(this);
    this.show();
}

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 = `
        
得分：${score}
        
丢失：${failNumber} / ${maxFailNumber}
    `;
}

/**
 * 创建一个随机字母，生成可移动的元素，然后将其添加到数组中
 */
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();
        }
    }
}

HTML代码：

	
		
		
		
	
	
	 	

	        

	        

	            

	        
	        

	            
游戏结束
	        
	    
	    
	    
	

img文件夹下两张图片：bg.jpg和board.png，一个文件夹letter

bg.jpg:

board.png:

letter文件夹