原生js写的一个拼图小游戏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拼图游戏</title>
<style>
.game {
border: 2px solid black;
margin: 0 auto;
position: relative;
}
.kuai {
border: 1px solid black;
position: absolute;
}
</style>
</head>
<body>
<div class="game"></div>
<script>
class Game {
constructor() {
this.clear()
this.game()
}
clear() {
document.querySelector('.game').innerHTML = ''
}
game() {
let path = prompt('请输入图片的网络地址')
let kuai = 300
let game = document.querySelector('.game')
let lao = []
let xin = []
let context = null
let img = new Image()
img.src = path
img.onload = function () {
let hang = parseInt(this.height / kuai)
let lie = parseInt(this.width / kuai)
game.style.width = lie * kuai + 'px'
game.style.height = hang * kuai + 'px'
for (let i = 0; i < hang; i++) {
for (let j = 0; j < lie; j++) {
let kuaiEle = document.createElement('div')
kuaiEle.className = 'kuai'
kuaiEle.style.width = kuai + 'px'
kuaiEle.style.height = kuai + 'px'
kuaiEle.x = j * kuai + 'px'
kuaiEle.y = i * kuai + 'px'
kuaiEle.style.backgroundImage = "url(" + this.src + ")"
kuaiEle.style.backgroundPosition = "-" + j * kuai + "px -" + i * kuai + 'px'
kuaiEle.style.backgroundSize = lie * kuai + 'px ' + hang * kuai + 'px'
lao.push(kuaiEle)
xin.push(0)
}
}
for (let i = 0; i < lao.length; i++) {
let ran = myRandom(0, xin.length)
while (xin[ran] != 0) {
ran = myRandom(0, xin.length)
}
xin[ran] = lao[i]
}
for (let i = 0; i < xin.length; i++) {
let xin_hang = parseInt(i / lie)
let xin_lie = i % lie
xin[i].style.left = xin_lie * kuai + 'px'
xin[i].style.top = xin_hang * kuai + 'px'
xin[i].setAttribute('draggable', 'true')
xin[i].ondragstart = function () {
context = this
}
xin[i].ondragover = function () {
event.preventDefault()
}
xin[i].ondrop = function () {
let swap = {
x: 0,
y: 0
}
swap.x = this.style.left
swap.y = this.style.top
this.style.left = context.style.left
this.style.top = context.style.top
context.style.left = swap.x
context.style.top = swap.y
let isGameOver = true
for (let j = 0; j < xin.length; j++) {
let x = xin[j].style.left
let y = xin[j].style.top
if (!(x == xin[j].x && y == xin[j].y)) {
isGameOver = false
break
}
}
if (isGameOver) {
console.log('游戏结束!!');
new Game()
}
}
game.append(xin[i])
}
}
function myRandom(min, max) {
return parseInt(Math.random() * (max - min) + min)
}
}
}
new Game()
</script>
</body>
</html>