first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

View File

@@ -0,0 +1,38 @@
<!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>Document</title>
<style>
body {
height: 100%;
}
img {
width: 40px;
display: flex;
align-items: center;
height: 100%;
margin: auto;
}
.aaa {
width: 100vw;
}
</style>
</head>
<body>
<div class="aaa">
<img src="./shuaxin.png" alt="">
</div>
</body>
<script>
var startY = 0;
</script>
</html>

View File

@@ -0,0 +1,128 @@
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
width: 100%;
height: 100vh;
background-image: url("../img/back.png");
background-size: contain;
position: relative;
overflow: hidden;
user-select: none;
}
.ground{
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 7rem;
z-index: 50;
}
.ground img{
position: absolute;
width: 100%;
height: 100%;
}
.start{
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%,-50%);
/* 开启弹性盒子,上下排列,水平对齐 */
display: flex;
flex-direction: column;
align-items: center;
z-index: 999;
}
.play{
width: 60px;
margin-top: 24px;
cursor: pointer;
}
.back img {
width: 100%;
height: 100vh;
background-size: contain;
}
.color {
width: 100%;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px;
box-sizing: border-box;
}
.color div {
cursor: pointer
}
.nandu{
cursor: pointer;
color: red;
}
.result{
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.875rem;
z-index: 555;
}
.pause{
position: absolute;
left: 3.75rem;
top: 3.75rem;
}
.sg{
width: 3.4375rem;
position: absolute;
}
.up{
transform: rotate(-40deg);
}
.down{
transform: rotate(90deg);
}
.bird{
width: 2.125rem;
height: 1.5rem;
position: absolute;
left: 120px;
transition: top linear 0.15s;
}
.bird_yellow{
background-image: url("../img/hn1.png");
}
@keyframes birdShake {
0% {transform: translateY(0rem);}
50% {transform: translateY(10px);}
100% {transform: translateY(0rem);}
}
@keyframes birdMotionYellow {
0% {background: url("../img/hn1.png");}
50% {background: url("../img/hn2.png");}
100% {background: url("../img/hn3.png");}
}
@keyframes birdMotionBlue {
0% {background: url("../img/bn1.png");}
50% {background: url("../img/bn2.png");}
100% {background: url("../img/bn3.png");}
}
@keyframes birdMotionRed {
0% {background: url("../img/rn1.png");}
50% {background: url("../img/rn2.png");}
100% {background: url("../img/rn3.png");}
}
.show{
display: block;
}
.hidden{
display: none;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@@ -0,0 +1,292 @@
class bird {
gameStatus = false
innerHeight = window.innerHeight
innerWidth = window.innerWidth;
//鸟的下落速度
birdDownSpeed = 5;
//鸟点一次上的速度
birdUpSpeed = 40
//地板移动速度
groundSpeed = 5
//水管上下间隙
WaterPipeClearance = 100
//水管水平间隔
WaterPipeLeftRightClearance = 500
// 生成水管的X轴位置
WaterPipeX = 0
// 一秒创建多少个水管
createdWaterPipeXTime = 500
// 总分
TotalScore = 0
constructor() {
this.birdEvent();
this.birdAction();
this.groundAction();
this.resultAction();
this.ChangeColor()
setInterval(() => {
if (this.gameStatus) {
this.createdWaterPipe();
}
}, this.createdWaterPipeXTime);
}
birdEvent() {
click(".play", () => {
this.changeGameStatus()
_(".sg").forEach(v => {
this.WaterPipeMove(v)
})
})
click(".pause", () => {
this.changeGameStatus()
_(".sg").forEach(v => clearInterval(v.time))
})
}
//运动状态
changeGameStatus() {
if (this.gameStatus) {
$(".start").remove("hidden")
$(".pause").add("hidden")
$(".music").pause()
this.gameStatus = false
} else {
this.ChangeColor()
$(".result").remove("hidden")
$(".bird").style.animation = 'birdMotion 0.48s linear infinite'
$(".start").add("hidden")
$(".pause").remove("hidden")
$(".music").play()
this.gameStatus = true
}
}
//分数
resultAction() {
var TotalScoreArr = String(this.TotalScore).split("")
$(".result").innerHTML = ""
TotalScoreArr.forEach(v => {
$(".result").innerHTML += `<img src="./img/${v}.png" alt="">`
})
}
//鸟的移动
birdAction() {
var clickTime = 0, currentTime = 0;
//鸟的初始位置
$(".bird").style.top = `${this.innerHeight / 2 - 12}px`;
$(".bird").style.animation += ',birdShake 0.48s linear infinite'
setInterval(() => {
if (this.gameStatus) {
$(".bird").style.top = `${parseInt($(".bird").style.top) + this.birdDownSpeed}px`;
}
}, 1000 / 16)
click("body", () => {
if (this.gameStatus) {
clickTime = (new Date()).getTime()
$(".bird").add("up")
$(".bird").remove("down")
$(".bird").style.top = `${parseInt($(".bird").style.top) - this.birdUpSpeed}px`;
}
})
setInterval(() => {
if (this.gameStatus) {
var currentTime = (new Date()).getTime()
if (currentTime - clickTime > 400) {
$(".bird").remove("up")
$(".bird").add("down")
}
}
}, 300);
}
//地板的移动
groundAction() {
$(".groundOne").style.left = '0px';
$(".groundTwo").style.left = `${this.innerWidth}px`;
setInterval(() => {
$(".groundOne").style.left = `${parseInt($(".groundOne").style.left) - this.groundSpeed}px`
$(".groundTwo").style.left = `${parseInt($(".groundTwo").style.left) - this.groundSpeed}px`
if (parseInt($(".groundOne").style.left) <= -this.innerWidth) {
$(".groundOne").style.left = `${this.innerWidth}px`
}
if (parseInt($(".groundTwo").style.left) <= -this.innerWidth) {
$(".groundTwo").style.left = `${this.innerWidth}px`
}
this.collisionground($(".bird"), $(".ground"))
}, 1000 / 20);
}
collisionground(el1, el2) {
if (el1.offsetLeft < el2.offsetLeft + el2.offsetWidth &&
el1.offsetLeft + el1.offsetWidth > el2.offsetLeft &&
el1.offsetTop < el2.offsetTop + el2.offsetHeight &&
el1.offsetHeight + el1.offsetTop > el2.offsetTop
) {
this.gameOver()
console.log('碰撞成功')
}
}
//水管的图片生成
createdWaterPipe() {
var totalWaterPipeHeight = this.innerHeight - 112 - this.WaterPipeClearance;
var TopWaterPipeHeight = Math.random() * totalWaterPipeHeight;
if (TopWaterPipeHeight) {
TopWaterPipeHeight = Math.random() * (totalWaterPipeHeight * 0.667)
}
var BottomWaterPipeHeight = totalWaterPipeHeight - TopWaterPipeHeight;
if (this.WaterPipeX == 0) {
this.WaterPipeX = this.innerWidth
} else {
this.WaterPipeX += this.WaterPipeLeftRightClearance
}
var cretedImg = (type) => {
var img = document.createElement("img");
img.src = `../水管鸟/img/${type == "top" ? 'sg_t' : 'sg_b'}.png`;
img.className = "sg"
img.style = `
${type}: ${type == "top" ? 0 : 112}px;
height: ${type == "top" ? TopWaterPipeHeight : BottomWaterPipeHeight}px;
left: ${this.WaterPipeX}px
`;
return img
}
var TopWaterPipe = cretedImg("top")
var BottomWaterPipe = cretedImg("bottom")
$("body").appendChild(TopWaterPipe)
$("body").appendChild(BottomWaterPipe)
this.WaterPipeMove(TopWaterPipe)
this.WaterPipeMove(BottomWaterPipe)
}
//水管移动
WaterPipeMove(img) {
img.time = setInterval(() => {
img.style.left = `${parseInt(img.style.left) - this.groundSpeed}px`
if (parseInt(img.style.left) <= -55) {
try {
clearInterval(img.time)
$("body").removeChild(img)
} catch (error) { }
} else {
this.collision($(".bird"), img)
}
}, 1000 / 30)
}
/**
* 碰撞检测
* @param {*} el1 鸟
* @param {*} el2 水管
*/
collision(el1, el2) {
if (el1.offsetLeft < el2.offsetLeft + el2.offsetWidth &&
el1.offsetLeft + el1.offsetWidth > el2.offsetLeft &&
el1.offsetTop < el2.offsetTop + el2.offsetHeight &&
el1.offsetHeight + el1.offsetTop > el2.offsetTop
) {
console.log('碰撞成功')
this.gameOver()
} else {
console.log('111');
if ( (el2.offsetLeft + el2.offsetWidth) == 107 ) {
this.TotalScore += 0.5
if (!String(this.TotalScore).includes(".")) {
console.log("==========分数=======: ", this.TotalScore);
$(".point").play()
this.resultAction()
}
//换背景图
if (this.TotalScore > 3) {
var night = document.createElement("img")
night.src = "../水管鸟/img/night.png"
$(".back").replaceChild(night, $(".morring"))
function ResumeError() {
return true;
}
window.onerror = ResumeError;
console.log("xixi");
}
}
}
}
//游戏结束
gameOver() {
$(".die").play()
this.changeGameStatus()
_(".sg").forEach(v => {
clearInterval(v.time)
})
var gameOvers = document.createElement("img")
gameOvers.src = "./img/gameover.png"
$(".start").replaceChild(gameOvers, $(".logo"))
click(".play", () => location.reload())
$(".start").removeChild($(".nandu"))
$(".start").removeChild($(".color"))
// $(".nandu").remove("hidden")
}
ChangeColor() {
click(".yellow", () => {
$(".bird").style.animation = "birdMotionYellow 0.4s linear infinite,birdShake 0.48s linear infinite"
})
click(".blue", () => {
$(".bird").style.animation = "birdMotionBlue 0.4s linear infinite,birdShake 0.48s linear infinite"
console.log(2);
})
click(".red", () => {
$(".bird").style.animation = "birdMotionRed 0.4s linear infinite,birdShake 0.48s linear infinite"
console.log(3);
})
}
}
new bird()

View File

@@ -0,0 +1,31 @@
class Util{
inject() {
Element.prototype.remove = function (removeClassName) {
this.classList.remove(removeClassName);
}
Element.prototype.add = function (addClassName) {
this.classList.add(addClassName);
}
}
click(className,callback) {
$(className).onclick = () => {
callback()
}
}
$(className) {
return document.querySelector(className)
}
_(className) {
return document.querySelectorAll(className)
}
}
var { $, _, click, inject } = new Util()
inject()

View File

@@ -0,0 +1,57 @@
<!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>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<audio class="music" src="./sounds/LBI利比 - 小城夏天.flac" loop></audio>
<audio class="point" src="./sounds/sfx_point.ogg"></audio>
<audio class="die" src="./sounds/sfx_die.ogg"></audio>
<div class="back">
<img class="morring" src="../水管鸟/img/back.png" alt="">
</div>
<div class="result hidden">
</div>
<img class="pause hidden" src="../水管鸟/img/pause.png" alt="">
<div class="start">
<img class="logo" src="../水管鸟/img/title.png" alt="">
<img class="again hidden" src="./img/start.png" alt="">
<div class="nandu">
<div class="play">普通</div>
<div class="difficulty">困难</div>
</div>
<div class="color">
<div class="yellow">
<img src="./img/hn2.png" alt="">
</div>
<div class="blue">
<img src="./img/bn2.png" alt="">
</div>
<div class="red">
<img src="./img/rn2.png" alt="">
</div>
</div>
</div>
<div class="bird bird_yellow" style="top: 0px;animation: birdMotionYellow 0.48s linear infinite"></div>
<div class="ground">
<img class="groundOne" src="../水管鸟/img/diban.png" alt="">
<img class="groundTwo" src="../水管鸟/img/diban.png" alt="">
</div>
</body>
<script src="./js/utils.js"></script>
<script src="./js/index.js"></script>
</html>

View File

@@ -0,0 +1,26 @@
<!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>Document</title>
</head>
<body>
</body>
<SCript>
function al(callback){
var num = 1
setTimeout(function(){
num += 100;
callback(num)
},3000)
}
al( function(aaa){
console.log("res",aaa);
})
</SCript>
</html>