原地址,可以在线查看演示效果,要是下面的代码复制后运行有问题,可以从原地址去复制。
原生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>