JQ俄罗斯方块儿
时间:2022-07-26
本文章向大家介绍JQ俄罗斯方块儿，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
jquery方便简单，下载后受益无穷，今天翻了翻官方网站，发现 Download 页面没有一个能打开的，我想上传一个 jquery 文件，没想到也被人捷足先登了，要31块钱才能下一次。我找了两天，终于找到了一个v3.5.1 的网络地址，大家老方法，拷贝下直接打开就能玩了。 不会拷贝点这里
学会的同学直接考走源码，引入运行即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>精致俄罗斯方块</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<style>
.bg {
width: 530px;
border: 1px solid #aaa;
border-radius: 5px;
padding: 20px;
margin: 0px auto;
box-shadow: 0 0 5px #999;
background: #f5f5f5;
font-size: 0;
display: flex;
}
#gameBoxBg {
width: 330px;
padding: 8px;
background: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2155687689,2910082000&fm=26&gp=0.jpg);
background-size: auto 100%;
background-position-x: 580px;
}
#gameBox {
width: 330px;
height: 450px;
overflow: hidden;
position: relative;
}
.mask {
width: 100%;
height: 100%;
background: url(https://img-blog.csdnimg.cn/20200926230056268.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTgyMDQ0NA==,size_16,color_FFFFFF,t_70#pic_center) no-repeat center top;
background-size:200px;
/*background-position:center;*/
position: absolute;
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
}
.mask button {
width: 100px;
height: 40px;
opacity: 0.7;
}
.wangge {
width: 30px;
height: 30px;
display: inline-block;
border: 1px solid #f0f0f0;
border-radius: 5px;
box-sizing: border-box;
position: absolute;
background: #f9f9f9;
opacity: 0.8;
}
.block {
display: inline-block;
width: 30px;
height: 30px;
font-size: 14px;
color: #fff;
border: 2px solid #fff;
background: #ff9000;
box-sizing: border-box;
border-radius: 5px;
position: absolute;
}
#rigth {
width: 180px;
height: 450px;
padding: 11px 10px;
box-sizing: border-box;
}
#rigth .next {
width: 100%;
height: 160px;
position: relative;
}
#rigth #score,
#rigth #level {
width: 100%;
height: 40px;
margin: 10px 0;
font-size: 16px;
color: #888;
box-sizing: border-box;
display: flex;
align-items: center;
}
#rigth #level .level,
#rigth #score .score {
font-size: 16px;
color: #555;
margin-left: 5px;
margin-top: 0px;
transition: 0.3;
}
#rigth #pause {
width: 100%;
height: 40px;
margin: 10px 0;
color: #333;
font-size: 16px;
}
#rigth p {
margin: 0;
font-size: 13px;
color: #555;
}
</style>
</head>
<body>
<div class="bg">
<div id="gameBoxBg">
<div id="gameBox">
<div class="mask">
<button id="start">开始游戏</button>
</div>
</div>
</div>
<div id="rigth">
<div class="next"></div>
<div id="level"><span>Level:</span><span class="level">1</span></div>
<div id="score"><span>Score:</span><span class="score">0</span></div>
<button id="pause">暂停</button>
<p>控制：</p>
<p>← 向左移动</p>
<p>→ 向右移动</p>
<p>↑ 旋转</p>
<p>↓ 加速下落</p>
</div>
</div>
<script>
function Game() {
this.speed = 600
this.remove = false
this.gameover = false
this.pause = false
this.timer = null
this.score = 0
this.blockArea = []
this.x = 150
this.y = 0
this.r1 = null
this.r2 = null
this.r3 = null
this.r4 = null
this.map = [
// T 0 ----ok
[
[
[this.x, this.y - 30],
[this.x - 30, this.y],
[this.x, this.y],
[this.x + 30, this.y]
], //ok
[
[this.x, this.y - 60],
[this.x, this.y - 30],
[this.x - 30, this.y - 30],
[this.x, this.y]
], //ok
[
[this.x - 30, this.y - 30],
[this.x, this.y - 30],
[this.x + 30, this.y - 30],
[this.x, this.y]
], //ok
[
[this.x, this.y - 60],
[this.x, this.y - 30],
[this.x + 30, this.y - 30],
[this.x, this.y]
] //ok
],
// L 1 ----ok
[
[
[this.x, this.y - 60],
[this.x, this.y - 30],
[this.x, this.y],
[this.x + 30, this.y]
], //ok
[
[this.x + 30, this.y - 30],
[this.x - 30, this.y],
[this.x, this.y],
[this.x + 30, this.y]
], //ok
[
[this.x - 30, this.y - 60],
[this.x, this.y - 60],
[this.x, this.y - 30],
[this.x, this.y]
], //ok
[
[this.x - 30, this.y - 30],
[this.x, this.y - 30],
[this.x + 30, this.y - 30],
[this.x - 30, this.y]
] //ok
],
// J 2 ----ok
[
[
[this.x, this.y - 60],
[this.x, this.y - 30],
[this.x, this.y],
[this.x - 30, this.y]
], //ok
[
[this.x - 30, this.y - 30],
[this.x - 30, this.y],
[this.x, this.y],
[this.x + 30, this.y]
], //ok
[
[this.x + 30, this.y - 60],
[this.x, this.y - 60],
[this.x, this.y - 30],
[this.x, this.y]
], //ok
[
[this.x - 30, this.y - 30],
[this.x, this.y - 30],
[this.x + 30, this.y - 30],
[this.x + 30, this.y]
] //ok
],
// O 3 ----ok
[
[
[this.x - 30, this.y - 30],
[this.x, this.y - 30],
[this.x - 30, this.y],
[this.x, this.y]
], //ok
[
[this.x - 30, this.y - 30],
[this.x, this.y - 30],
[this.x - 30, this.y],
[this.x, this.y]
], //ok
[
[this.x - 30, this.y - 30],
[this.x, this.y - 30],
[this.x - 30, this.y],
[this.x, this.y]
], //ok
[
[this.x - 30, this.y - 30],
[this.x, this.y - 30],
[this.x - 30, this.y],
[this.x, this.y]
] //ok
],
// | 4 ----
[
[
[this.x, this.y - 90],
[this.x, this.y - 60],
[this.x, this.y - 30],
[this.x, this.y]
], //ok
[
[this.x - 60, this.y],
[this.x - 30, this.y],
[this.x, this.y],
[this.x + 30, this.y]
], //ok
[
[this.x, this.y - 90],
[this.x, this.y - 60],
[this.x, this.y - 30],
[this.x, this.y]
], //ok
[
[this.x - 60, this.y],
[this.x - 30, this.y],
[this.x, this.y],
[this.x + 30, this.y]
] //ok
],
// Z 5 ----
[
[
[this.x - 30, this.y - 30],
[this.x, this.y - 30],
[this.x, this.y],
[this.x + 30, this.y]
], //ok
[
[this.x, this.y - 60],
[this.x, this.y - 30],
[this.x - 30, this.y - 30],
[this.x - 30, this.y]
], //ok
[
[this.x - 30, this.y - 30],
[this.x, this.y - 30],
[this.x, this.y],
[this.x + 30, this.y]
], //ok
[
[this.x, this.y - 60],
[this.x, this.y - 30],
[this.x - 30, this.y - 30],
[this.x - 30, this.y]
] //ok
]
]
this.startGame()
}
Game.prototype.wangge = function() {
for(var i = 0; i < 15; i++) {
for(var k = 0; k < 11; k++) {
$('<div class="wangge"></div>').css({
'top': i * 30 + 'px',
'left': k * 30 + 'px'
}).appendTo('#gameBox')
}
}
}
Game.prototype.getRandom = function() {
this.r3 = Math.floor(Math.random() * 6)
this.r4 = Math.floor(Math.random() * 4)
}
Game.prototype.yulan = function() {
for(var i = 0; i < 4; i++) {
$('<span class="block"></span>').css({
'top': this.map[this.r3][this.r4][i][1] + 90 + 'px',
'left': this.map[this.r3][this.r4][i][0] - 90 + 'px'
}).attr('next', true).appendTo('.next')
}
}
Game.prototype.createBlock = function() {
this.r1 = this.r3
this.r2 = this.r4
for(var i = 0; i < 4; i++) {
$('<span class="block"></span>').css({
'top': this.map[this.r1][this.r2][i][1] + 'px',
'left': this.map[this.r1][this.r2][i][0] + 'px'
}).attr('move', true).appendTo('#gameBox')
}
}
Game.prototype.autoMove = function() {
var that = this;
return $.Deferred(function(stop) {
function move() {
that.timer = setTimeout(function() {
var dD0 = that.shifouMoveDown(0, 30)
var dD1 = that.shifouMoveDown(1, 30)
var dD2 = that.shifouMoveDown(2, 30)
var dD3 = that.shifouMoveDown(3, 30)
if(that.gameover == true) {
alert('Game Over!');
$('.mask').css({
'display': 'flex'
}).find('button').text('重玩')
$('#gameBox').find('span').remove()
$('.next').find('span').remove()
$('.score').text('0')
} else {
$.when(dD0, dD1, dD2, dD3).then(function() {
that.y += 30
that.updateMap()
$('.block[move=true]').each(function(i) {
$(this).css({
'top': that.map[that.r1][that.r2][i][1] + 'px'
})
})
move()
}).catch(function() {
that.y = 0
that.x = 150
that.updateMap()
that.shifouxiaochu()
setTimeout(function() {
if(that.remove == true) {
that.remove = false
setTimeout(function() {
$('.score').animate({
'font-size': '26px'
}, 100).animate({
'font-size': '26px'
}, 500).animate({
'font-size': '16px'
}, 100)
stop.resolve()
}, 1000)
} else {
setTimeout(function() {
stop.resolve()
}, 100)
}
}, 10)
})
}
}, that.speed)
// 你可以把that.speed换成具体的数值比如：
// 1000、 2000、 3000，
// 这样可以延长方块下落周期，但我会让 ↓
// 方向键实效，请按照自己的喜好确定是否更改
}
move()
$('#pause').click(function() {
if(that.gameover == false) {
if(that.pause == false) {
clearTimeout(that.timer)
that.pause = true
console.log(that.pause)
$(this).text('开始')
} else {
that.pause = false
console.log(that.pause)
move()
$(this).text('暂停')
}
}
})
})
}
Game.prototype.shifouxiaochu = function() {
var that = this
$('.block[move=true]').each(function() {
var top = $(this).position().top
var left = $(this).position().left
that.blockArea.push(top + '' + left)
$(this).attr('top', top)
$(this).attr('move', false)
if($('.block[top=' + top + ']').length == 11) {
that.score += 100
that.remove = true
var r0 = that.removes(0, top)
var r1 = that.removes(1, top)
var r2 = that.removes(2, top)
var r3 = that.removes(3, top)
var r4 = that.removes(4, top)
var r5 = that.removes(5, top)
var r6 = that.removes(6, top)
var r7 = that.removes(7, top)
var r8 = that.removes(8, top)
var r9 = that.removes(9, top)
var r10 = that.removes(10, top)
$.when(r0, r1, r2, r3, r4, r5, r6, r7, r5, r6, r10).then(function() {
$('.score').text(that.score)
$('.block[move=false]').each(function() {
if($(this).position().top < top) {
var top1 = $(this).position().top
var left1 = $(this).position().left
var index = that.blockArea.indexOf(top1 + '' + left1)
that.blockArea.splice(index, 1)
$(this).css({
'top': top1 + 30 + 'px'
})
that.blockArea.push($(this).position().top + '' + $(this).position().left)
$(this).attr('top', $(this).position().top)
}
})
})
}
})
}
Game.prototype.removes = function(i, t) {
var that = this
return $.Deferred(function(remove) {
var top2 = $('.block[top=' + t + ']').eq(i).position().top
var left2 = $('.block[top=' + t + ']').eq(i).position().left
var index = that.blockArea.indexOf(top2 + '' + left2)
that.blockArea.splice(index, 1)
$('.block[top=' + t + ']').eq(i).animate({
'opacity': '0'
}, 100).animate({
'opacity': '1'
}, 100).animate({
'opacity': '0'
}, 100).animate({
'opacity': '1'
}, 100).animate({
'opacity': '0'
}, 500, function() {
$(this).remove()
remove.resolve()
})
})
}
Game.prototype.shifouMoveDown = function(i, y) {
var that = this
return $.Deferred(function(moveDown) {
var top = that.map[that.r1][that.r2][i][1] + y
var left = that.map[that.r1][that.r2][i][0]
var blockPosition = top + '' + left
if(top <= 420) {
if(that.blockArea.indexOf(blockPosition) == -1) {
moveDown.resolve()
} else {
if(top <= 30) {
that.gameover = true
} else {
moveDown.reject()
}
}
} else {
moveDown.reject()
}
})
}
Game.prototype.shifouMoveLR = function(i, x) {
var that = this
return new Promise(function(resolve, reject) {
var top = that.map[that.r1][that.r2][i][1]
var left = that.map[that.r1][that.r2][i][0] + x
var blockPosition = top + '' + left
if(left >= 0 && left <= 300) {
if(that.blockArea.indexOf(blockPosition) == -1) {
resolve()
} else {
reject()
}
} else {
reject()
}
})
}
Game.prototype.moveLeft = function() {
var that = this
if(this.pause == false) {
this.x -= 30
var pL0 = this.shifouMoveLR(0, -30)
var pL1 = this.shifouMoveLR(1, -30)
var pL2 = this.shifouMoveLR(2, -30)
var pL3 = this.shifouMoveLR(3, -30)
Promise.all([pL0, pL1, pL2, pL3]).then(function() {
that.updateMap()
$('.block[move=true]').each(function(i) {
$(this).css({
'left': that.map[that.r1][that.r2][i][0] + 'px'
})
})
}).catch(function() {
that.x += 30
})
}
}
Game.prototype.moveRight = function() {
var that = this
if(this.pause == false) {
this.x += 30
var pR0 = this.shifouMoveLR(0, 30)
var pR1 = this.shifouMoveLR(1, 30)
var pR2 = this.shifouMoveLR(2, 30)
var pR3 = this.shifouMoveLR(3, 30)
Promise.all([pR0, pR1, pR2, pR3]).then(function() {
that.updateMap()
$('.block[move=true]').each(function(i) {
$(this).css({
'left': that.map[that.r1][that.r2][i][0] + 'px'
})
})
}).catch(function() {
that.x -= 30
})
}
}
Game.prototype.fasterMoveDown = function() {
this.speed = 50
}
Game.prototype.rotates = function() {
var that = this
if(this.pause == false) {
that.r2 -= 1
if(that.r2 < 0) {
that.r2 = 3
}
var p0 = that.shifouRotate(0)
var p1 = that.shifouRotate(1)
var p2 = that.shifouRotate(2)
var p3 = that.shifouRotate(3)
Promise.all([p0, p1, p2, p3]).then(function() {
$('.block[move=true]').each(function(i) {
$(this).css({
'top': that.map[that.r1][that.r2][i][1] + 'px',
'left': that.map[that.r1][that.r2][i][0] + 'px'
})
})
}).catch(function() {
that.r2 += 1
if(that.r2 > 3) {
that.r2 = 0
}
})
}
}
Game.prototype.shifouRotate = function(i) {
var that = this
return new Promise(function(resolve, reject) {
var top = that.map[that.r1][that.r2][i][1]
var left = that.map[that.r1][that.r2][i][0]
var blockPosition = top + '' + left
if(left >= 0 && left <= 300 && top <= 420) {
if(that.blockArea.indexOf(blockPosition) == -1) {
resolve()
} else {
reject()
}
} else {
reject()
}
})
}
Game.prototype.controller = function() {
var that = this
window.onkeydown = function(e) {
if(e.keyCode == 37) {
that.moveLeft()
} else if(e.keyCode == 39) {
that.moveRight()
} else if(e.keyCode == 40) {
that.fasterMoveDown()
} else if(e.keyCode == 38) {
that.rotates()
}
}
window.onkeyup = function(e) {
if(e.keyCode == 40) {
that.speed = 800
}
}
}
Game.prototype.startGame = function() {
var that = this
this.wangge()
this.getRandom()
function go() {
that.createBlock()
that.getRandom()
that.yulan()
that.controller()
var isDown = that.autoMove()
$.when(isDown).then(function() {
$('span[next=true]').remove()
go()
})
}
go()
}
Game.prototype.updateMap = function() {
this.map = [
// T 0 ----ok
[
[
[this.x, this.y - 30],
[this.x - 30, this.y],
[this.x, this.y],
[this.x + 30, this.y]
], //ok
[
[this.x, this.y - 60],
[this.x, this.y - 30],
[this.x - 30, this.y - 30],
[this.x, this.y]
], //ok
[
[this.x - 30, this.y - 30],
[this.x, this.y - 30],
[this.x + 30, this.y - 30],
[this.x, this.y]
], //ok
[
[this.x, this.y - 60],
[this.x, this.y - 30],
[this.x + 30, this.y - 30],
[this.x, this.y]
] //ok
],
// L 1 ----ok
[
[
[this.x, this.y - 60],
[this.x, this.y - 30],
[this.x, this.y],
[this.x + 30, this.y]
], //ok
[
[this.x + 30, this.y - 30],
[this.x - 30, this.y],
[this.x, this.y],
[this.x + 30, this.y]
], //ok
[
[this.x - 30, this.y - 60],
[this.x, this.y - 60],
[this.x, this.y - 30],
[this.x, this.y]
], //ok
[
[this.x - 30, this.y - 30],
[this.x, this.y - 30],
[this.x + 30, this.y - 30],
[this.x - 30, this.y]
] //ok
],
// J 2 ----ok
[
[
[this.x, this.y - 60],
[this.x, this.y - 30],
[this.x, this.y],
[this.x - 30, this.y]
], //ok
[
[this.x - 30, this.y - 30],
[this.x - 30, this.y],
[this.x, this.y],
[this.x + 30, this.y]
], //ok
[
[this.x + 30, this.y - 60],
[this.x, this.y - 60],
[this.x, this.y - 30],
[this.x, this.y]
], //ok
[
[this.x - 30, this.y - 30],
[this.x, this.y - 30],
[this.x + 30, this.y - 30],
[this.x + 30, this.y]
] //ok
],
// O 3 ----ok
[
[
[this.x - 30, this.y - 30],
[this.x, this.y - 30],
[this.x - 30, this.y],
[this.x, this.y]
], //ok
[
[this.x - 30, this.y - 30],
[this.x, this.y - 30],
[this.x - 30, this.y],
[this.x, this.y]
], //ok
[
[this.x - 30, this.y - 30],
[this.x, this.y - 30],
[this.x - 30, this.y],
[this.x, this.y]
], //ok
[
[this.x - 30, this.y - 30],
[this.x, this.y - 30],
[this.x - 30, this.y],
[this.x, this.y]
] //ok
],
// | 4 ----
[
[
[this.x, this.y - 90],
[this.x, this.y - 60],
[this.x, this.y - 30],
[this.x, this.y]
], //ok
[
[this.x - 60, this.y],
[this.x - 30, this.y],
[this.x, this.y],
[this.x + 30, this.y]
], //ok
[
[this.x, this.y - 90],
[this.x, this.y - 60],
[this.x, this.y - 30],
[this.x, this.y]
], //ok
[
[this.x - 60, this.y],
[this.x - 30, this.y],
[this.x, this.y],
[this.x + 30, this.y]
] //ok
],
// Z 5 ----
[
[
[this.x - 30, this.y - 30],
[this.x, this.y - 30],
[this.x, this.y],
[this.x + 30, this.y]
], //ok
[
[this.x, this.y - 60],
[this.x, this.y - 30],
[this.x - 30, this.y - 30],
[this.x - 30, this.y]
], //ok
[
[this.x - 30, this.y - 30],
[this.x, this.y - 30],
[this.x, this.y],
[this.x + 30, this.y]
], //ok
[
[this.x, this.y - 60],
[this.x, this.y - 30],
[this.x - 30, this.y - 30],
[this.x - 30, this.y]
] //ok
]
]
}
$('#start').click(function() {
$('.mask').css({
'display': 'none'
})
new Game()
})
</script>
</body>
</html>前端的学习不是一蹴而就，不积跬步无以至千里，不积小流无以成江海。持续不断的努力才能让你我有所收获。我是一个每天熬夜到很晚码字的人，我是一个为了生活甘愿活成狗的人，我付出了很多经常得不到回报，但博友的鼓励，领导同事的认可，让我很愉快的坚持到现在。
- 一种实用的表格行鼠标点击高亮效果
- Lucene：QueryParser中操作符的疑惑
- 利用Boost影响Lucene查询结果的排序
- 利用Boost影响Lucene查询结果的排序
- linq to sql取出随机记录/多表查询/将查询出的结果生成xml
- [原创]Func〈T, TResult〉 泛型委托 以及演变历程(整理自MSDN)
- 上市企业4位数秒下的域名 如今9.9万元出售
- 黑客横行，全球安全系统集成市场将破百亿美元
- 有好东西融资2000万美金：官网启用四拼域名
- 全球首个农业全产业链智能工程“农业大脑”入选ECI
- 大数据说消费正从炫耀转向体验
- 这真是看脸的时代！刷脸购物！
- 苹果公司也瞄准了无人驾驶汽车行业
- 儿童智能手表存在安全漏洞而引发的思考
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- php解决约瑟夫环算法实例分析
- 浅谈laravel-admin的sortable和orderby使用问题
- 使用composer安装使用thinkphp6.0框架问题【视频教程】
- 基于laravel-admin 后台 列表标签背景的使用方法
- 解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
- laravel-admin 中列表筛选方法
- Laravel框架控制器的middleware中间件用法分析
- laravel-admin的图片删除实例
- 在laravel-admin中列表中禁止某行编辑、删除的方法
- Laravel的Auth验证Token验证使用自定义Redis的例子
- laravel-admin解决表单select联动时,编辑默认没选上的问题
- laravel-admin 后台表格筛选设置默认的查询日期方法
- Laravel框架控制器的request与response用法示例
- laravel 字段格式化 modle 字段类型转换方法
- laravel-admin 在列表页添加自定义按钮的例子