JavaScript 打字游戏

最新推荐文章于 2023-01-28 14:13:12 发布

豆皮没有豆

最新推荐文章于 2023-01-28 14:13:12 发布

阅读量803

点赞数

分类专栏： JavaScript 文章标签： javascript html css

原文链接：https://www.sucaihuo.com/js/4626.html

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

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 = `
        <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();
        }
    }
}

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
	 	<div id="game">
	        <div class="letter-container"></div>
	        <div class="board">
	            <div id="score"></div>
	        </div>
	        <div class="over">
	            <p id="jieshu" onclick="jieshu()">游戏结束</p>
	        </div>
	    </div>
	    <script type="text/javascript" src="js/script.js" ></script>
	    <script>
	    	function jieshu(){
	    		window.location.reload();
	    	}
	    </script>
	</body>
</html>

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

bg.jpg:

board.png:

letter文件夹

豆皮没有豆

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
4
评论
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
复制链接

扫一扫

专栏目录