bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/hb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

64
历届学生/front-end-team-11/项目开发/上课项目/js案例/tabs.html Normal file
View File

@@ -0,0 +1,64 @@
<!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>tabs切换</title>
<style>
body,ul,li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 15px;
cursor: pointer;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block !important;
}
</style>
</head>
<body>
<ul class="title">
<li class="active">社会</li>
<li>经济</li>
<li>体育</li>
<li>科技</li>
</ul>
<ul class="content">
<li class="active">社会 的内容</li>
<li>经济 的内容</li>
<li>体育 的内容</li>
<li>科技 的内容</li>
</ul>
</body>
<script>
let titleLi = document.querySelectorAll(".title li");
let contentLi = document.querySelectorAll(".content li");
titleLi.forEach(function(v,i) {
v.onclick = function () {
titleLi.forEach(function(val,index) {
val.className = ""
contentLi[index].className = ""
})
v.className = "active"
contentLi[i].className = "active"
}
})
</script>
</html>

141
历届学生/front-end-team-11/项目开发/上课项目/js案例/tabsV2.html Normal file
View File

@@ -0,0 +1,141 @@
<!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>tabs切换 V2</title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.title {
display: flex;
}
.title li {
margin-right: 15px;
cursor: pointer;
}
.title .active {
color: red;
}
.content li {
display: none;
}
.content .active {
display: block !important;
}
</style>
</head>
<body>
<ul class="title"></ul>
<ul class="content"></ul>
</body>
<script>
// 发送ajax请求获取这个数组
let data = [
{
id: 1,
title: '社会',
content: [
{ text: '社会的内容1' },
{ text: '社会的内容2' },
{ text: '社会的内容3' }
]
},
{
id: 2,
title: '经济',
content: [
{ text: '经济 的内容1' },
{ text: '经济 的内容2' },
{ text: '经济 的内容3' },
{ text: '经济 的内容4' },
]
},
{
id: 3,
title: '体育',
content: [
{ text: '体育 的内容1' },
{ text: '体育 的内容2' }
]
},
{
id: 4,
title: '科技',
content: [
{ text: '科技 的内容1' },
{ text: '科技 的内容2' },
{ text: '科技 的内容3' },
]
}
];
let title = $(".title"), content = $(".content");
function renderPage() {
data.forEach(function (v, i) {
title.innerHTML += `<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`;
content.innerHTML +=
`<li class="${i == 0 ? 'active' : ''}">
${
v.content.map(function (item) {
return `<p>${item.text}</p>`
})
}
</li>`;
})
bindClcik();
}
function bindClcik() {
let titleLi = _(".title li"), contentLi = _(".content li");
titleLi.forEach(function (v, i) {
v.onclick = function () {
titleLi.forEach(function (val, index) {
val.className = ""
contentLi[index].className = ""
})
v.className = "active"
contentLi[i].className = "active"
}
})
}
Array.prototype.map = function (callback) {
let result = []
for (let index = 0; index < this.length; index++) {
result.push(callback(this[index], index, this))
}
return result.toString().replaceAll(",", "");
}
renderPage()
function $(className) {
return document.querySelector(className);
}
function _(className) {
return document.querySelectorAll(className);
}
</script>
</html>

200
历届学生/front-end-team-11/项目开发/上课项目/js案例/侧滑.html Normal file
View File

@@ -0,0 +1,200 @@
<!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>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
overflow: hidden;
}
li {
display: flex;
align-items: center;
height: 50px;
border-bottom: 1px solid #ebe8e8;
padding: 0 10px;
box-sizing: border-box;
font-size: 14px;
position: relative;
}
.action {
color: #fff;
font-size: 14px;
width: 165px;
display: flex;
height: 100%;
position: absolute;
right: -165px;
}
.action div {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.action .top {
background: #009bfe;
}
.action .read {
background: #fe8d3f;
}
.action .delt {
background: #ff5967;
}
</style>
</head>
<body>
<ul>
<li>
测试1
<div class="action">
<div class="top">置顶</div>
<div class="read">未读</div>
<div class="delt">删除</div>
</div>
</li>
<li>
测试2
<div class="action">
<div class="top">置顶</div>
<div class="read">未读</div>
<div class="delt">删除</div>
</div>
</li>
<li>
测试3
<div class="action">
<div class="top">置顶</div>
<div class="read">未读</div>
<div class="delt">删除</div>
</div>
</li>
</ul>
</body>
<script>
// 0 关闭状态 -165 打开状态
let startX = 0, leftXArr = [];
_("ul li").forEach(function (v, i) {
v.ontouchstart = function (e) {
startX = e.touches[0].clientX
_("ul li").forEach(function (item, j) {
if (i != j) {
item.style = `
transform: translateX(0px);
`
}
})
}
v.ontouchmove = function (e) {
let moveX = e.touches[0].clientX
// 左滑moveX 小于 startX， 右滑 大于
// 左滑
if (determineDirection(moveX, startX)) {
// console.log("左滑: ", moveX);
let currentX = v.style.transform.replace(/[^0-9]/ig, '')
if (-currentX != -165) {
console.log(222);
v.style = `
transform: translateX(-${startX - moveX > 165 ? '165' : startX - moveX}px);
`
} else {
leftXArr.push(moveX)
console.log("leftXArr: ", leftXArr);
if (leftXArr[leftXArr.length - 1] > leftXArr[leftXArr.length - 2]) {
leftXArr = []
console.log("左边的右滑动");
let x = -165 + (leftXArr[leftXArr.length - 1] - leftXArr[0]);
v.style = `
transform: translateX(${x}px);
`
} else {
console.log("左边的左滑动");
}
}
v.open = true
} else {
console.log("右滑");
if (v.open) {
let x = -165 + (moveX - startX);
v.style = `
transform: translateX(${x > 0 ? 0 : x}px);
`
}
}
}
v.ontouchend = function (e) {
let endX = e.changedTouches[0].clientX
if (determineDirection(endX, startX)) {
if ((startX - endX) < 55) {
v.style = `
transform: translateX(0px);
`;
v.open = false
} else {
v.style = `
transform: translateX(-165px);
`
}
} else {
if ((endX - startX) < 55 && endX != startX) {
v.style = `
transform: translateX(-165px);
`
} else {
v.style = `
transform: translateX(0px);
`
v.open = false
}
}
}
})
// x1 moveX x2 startX true 左滑 false 右滑
function determineDirection(x1, x2) {
return x1 < x2 ? true : false
}
function $(className) {
return document.querySelector(className);
}
function _(className) {
return document.querySelectorAll(className);
}
</script>
</html>

75
历届学生/front-end-team-11/项目开发/上课项目/js案例/富强明主.html Normal file
View File

@@ -0,0 +1,75 @@
<!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 {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
span {
position: fixed;
user-select: none;
transition: all 1s;
}
</style>
</head>
<body>
</body>
<script>
let text = ['富强','民主','文明','和谐','自由','平等','公正','法治','爱国','敬业','诚信','友善'],
index = 0;
$("body").onclick = function(e) {
// let x = e.x, y = e.y;
let { x,y } = e;
let span = document.createElement("span");
span.innerText = text[index]
span.style = `
left: ${x}px;
top: ${y}px;
color: hsl(${Math.random() * 360}, 100%, 50%);
`;
// span.style.position = `fixed`;
// span.style.left = `${x}px`;
// span.style.top = `${y}px`;
$("body").appendChild(span);
motion(span ,y)
index+=1;
if (index > 11) {
index = 0
}
}
function motion(el, top) {
setTimeout(function() {
el.style.top = `${top - 200}px`;
}, 300)
setTimeout(function() {
$("body").removeChild(el);
}, 1300)
}
function $(className) {
return document.querySelector(className);
}
function _(className) {
return document.querySelectorAll(className);
}
</script>
</html>

63
历届学生/front-end-team-11/项目开发/上课项目/js案例/搜索建议.html Normal file
View File

@@ -0,0 +1,63 @@
<!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>
span {
color: red;
font-weight: 700;
}
</style>
</head>
<body>
<input type="text" placeholder="输入关键字">
<ul>
</ul>
</body>
<script>
var SearchList = [
'你好', '我不好', '今天天气不好', '明天吃什么', '你说什么', '你不想学习？'
];
var newList = []
$("input").oninput = function () {
newList = []
if ($("input").value.length != 0) {
SearchList.forEach(function (v) {
if (v.includes($("input").value)) {
let newText = v.replaceAll($("input").value, `<span>${$("input").value}</span>`)
newList.push(newText)
}
})
renderList()
} else {
$("ul").innerHTML = ""
}
}
function renderList() {
$("ul").innerHTML = ""
newList.forEach(function (item) {
$("ul").innerHTML += `<li>${item}</li>`
})
}
function $(className) {
return document.querySelector(className);
}
function _(className) {
return document.querySelectorAll(className);
}
</script>
</html>

12
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/css/clear.css Normal file
View File

@@ -0,0 +1,12 @@
body,ul,p,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
html {
/* font-size: 50px; */
}
body {
font-size: 0;
}

148
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/css/index.css Normal file
View File

@@ -0,0 +1,148 @@
body {
height: 100vh;
background: url("../img/back.png");
background-size: contain;
user-select: none;
}
.diban {
position: fixed;
width: 100%;
height: 112px;
left: 0;
bottom: 0;
background: red;
}
.diban img {
position: absolute;
width: 100%;
height: 100%;
}
.bird {
position: fixed;
left: 100px;
width: 34px;
height: 24px;
transition: all linear 0.15s;
z-index: 999;
}
.pipe {
position: fixed;
width: 55px;
z-index: 998;
transition: all linear 0.1s;
}
.pause {
position: fixed;
top: 30px;
left: 30px;
cursor: pointer;
z-index: 999;
}
.score {
position: fixed;
top: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 999;
}
.up {
transform: rotate(-38deg);
}
.down {
transform: rotate(90deg);
}
/* .birdDefault {
animation: birdDefault 0.4s linear infinite reverse;
}
.birdBlue {
animation: birdBlue 0.4s linear infinite reverse;
}
.birdRed {
animation: birdRed 0.4s linear infinite reverse;
} */
@keyframes birdShake {
0% {
transform: translateY(0px);
}
33% {
transform: translateY(15px);
}
100% {
transform: translateY(0px);
}
}
@keyframes birdDefault {
0% {
background: url("../img/hn1.png");
}
33% {
background: url("../img/hn2.png");
}
100% {
background: url("../img/hn3.png");
}
}
@keyframes birdBlue {
0% {
background: url("../img/hn_blue_1.png");
}
33% {
background: url("../img/hn_blue_2.png");
}
100% {
background: url("../img/hn_blue_3.png");
}
}
@keyframes birdRed {
0% {
background: url("../img/hn_red_1.png");
}
33% {
background: url("../img/hn_red_2.png");
}
100% {
background: url("../img/hn_red_3.png");
}
}
.bird_title {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -40%);
text-align: center;
z-index: 999;
}
.bird_list {
display: flex;
align-items: center;
justify-content: space-between;
}
.bird_list img {
cursor: pointer;
}

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/back_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/diban.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/gameover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/hn1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/hn2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/hn3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/hn_blue_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/hn_blue_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/hn_blue_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/hn_red_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/hn_red_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/hn_red_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/pause.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/sg_b.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/sg_t.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/start.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/img/title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

43
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/index.html Normal file
View File

@@ -0,0 +1,43 @@
<!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/clear.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="bird" style="animation: birdDefault 0.4s linear infinite reverse, birdShake 0.4s linear infinite reverse;"></div>
<img style="display: none;" class="pause" src="./img/pause.png" alt="">
<div class="score" style="display: none;">
<img src="./img/0.png" alt="">
</div>
<div class="bird_title">
<img class="bird_logo" src="./img/title.png" alt="">
<div class="bird_list">
<img src="./img/hn1.png" alt="">
<img src="./img/hn_blue_1.png" alt="">
<img src="./img/hn_red_1.png" alt="">
</div>
<div></div>
<img class="start" src="./img/start.png" alt="">
<img style="display: none;" class="gameover" src="./img/gameover.png" alt="">
<img style="display: none;" class="restart" src="./img/start.png" alt="">
<img style="display: none;" class="reload" src="./img/start.png" alt="">
</div>
<div class="diban">
<img class="di_one" src="./img/diban.png" alt="">
<img class="di_two" src="./img/diban.png" alt="">
</div>
</body>
<script src="./js/utils.js"></script>
<script src="./js/index.js"></script>
</html>

265
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/js/index.js Normal file
View File

@@ -0,0 +1,265 @@
class WaterPipeBird {
innerWidth = window.innerWidth;
innerHeight = window.innerHeight;
totalScore = 0;
// 地板的运动速度
dibanMotionSpeed = 10;
// 鸟的默认皮肤
birdTheme = "birdDefault"
// 游戏状态 true 开始， false 未开始
gameStatus = false;
// 每次点击鸟，鸟的上移动距离
birdClickTop = 40
// 下移距离
birdClickDown = 10
// 创建到第几个水管
PipeIndex = 0;
// 上下水管的通过间隙（距离）
PipeGap = 150;
// 水管左右的间距
XPipeWidth = 300
// 水管移动速度
PipeSpeed = 10
IntervalList = []
constructor() {
console.log("构造函数: ");
this.dibanMotion()
this.initBird()
this.startGame()
this.stopGame()
}
dibanMotion() {
$(".di_one").style.left = `0px`;
$(".di_two").style.left = `${this.innerWidth}px`;
// 定义变量提前保存this
// =>
// call bind apply
// 箭头函数因为没有关键词 function，所以this会被解绑
setInterval(() => {
$(".di_one").style.left = `${parseInt(($(".di_one").style.left)) - this.dibanMotionSpeed}px`;
$(".di_two").style.left = `${parseInt(($(".di_two").style.left)) - this.dibanMotionSpeed}px`;
if (parseInt(($(".di_one").style.left)) <= -this.innerWidth) {
$(".di_one").style.left = `${this.innerWidth}px`;
}
if (parseInt(($(".di_two").style.left)) <= -this.innerWidth) {
$(".di_two").style.left = `${this.innerWidth}px`;
}
}, 100)
}
// birdShake 0.4s linear infinite reverse
initBird() {
$(".bird").style.top = `${(this.innerHeight - 112) / 2 - 14}px`;
// 点击切换小鸟的主题
_(".bird_list img").forEach((v, i) => {
v.onclick = () => {
switch (i) {
case 0:
this.birdTheme = "birdDefault"
$(".bird").style.animationName = "birdDefault,birdShake"
break;
case 1:
this.birdTheme = "birdBlue"
$(".bird").style.animationName = "birdBlue,birdShake"
break;
case 2:
this.birdTheme = "birdRed"
$(".bird").style.animationName = "birdRed,birdShake"
break;
default:
break;
}
}
})
}
startGame() {
e(".start", () => {
let clickTime = null;
this.gameStatus = true;
$(".pause").show();
$(".score").show();
$(".bird_title").none();
$(".bird").style.animationName = this.birdTheme
// 下落
this.IntervalList[0] = setInterval(() => {
if (this.gameStatus) {
$(".bird").style.top = `${parseInt($(".bird").style.top) + this.birdClickDown}px`
this.collision($(".bird"), $(".diban"))
}
}, 1000 / 16)
// 点击开始游戏和控制鸟的上移
e("body", (e) => {
if (this.gameStatus) {
clickTime = new Date().getTime();
$(".bird").style.top = `${parseInt($(".bird").style.top) - this.birdClickTop}px`
$(".bird").remove("down")
$(".bird").add("up")
}
})
// 下落的样式
this.IntervalList[1] = setInterval(() => {
let currentTime = new Date().getTime();
if (currentTime - clickTime > 300) {
$(".bird").remove("up")
$(".bird").add("down")
}
}, 300)
this.IntervalList[2] = setInterval(() => {
this.CreatedPipe()
}, 500)
})
}
stopGame() {
e(".pause", (e) => {
this.gameStatus = false;
e?.stopPropagation();
this.IntervalList.forEach(v => {
clearInterval(v)
})
_(".pipe").forEach(v => {
clearInterval(v.IntervalId)
})
$(".bird_list").none()
$(".start").none()
$(".bird_title").show()
$(".restart").show()
})
e(".restart", (e) => {
$(".start").onclick()
this.PipeMove(_(".pipe"))
})
}
CreatedPipe() {
let PipeTotalHeight = this.innerHeight - 112 - this.PipeGap;
let TopImgHeight = getRandom(60, PipeTotalHeight - 60)
let BottomImgHeight = PipeTotalHeight - TopImgHeight
let createdImg = (t) => {
let img = document.createElement("img")
img.type = t
img.src = `./img/sg_${t}.png`
img.className = "pipe"
img.style = `
${t == "b" ? 'bottom: 110px;' : 'top: 0px;'}
left: ${this.innerWidth + 55 + (this.PipeIndex * this.XPipeWidth)}px;
height: ${t == "t" ? TopImgHeight : BottomImgHeight}px;
`;
return img
}
let topImg = createdImg("t");
let bottomImg = createdImg("b");
$("body").appendChild(topImg)
$("body").appendChild(bottomImg)
this.PipeMove([topImg, bottomImg])
// this.PipeMove(bottomImg)
this.PipeIndex += 1
}
PipeMove(arr) {
arr.forEach(img => {
img.IntervalId = setInterval(() => {
if (this.gameStatus) {
img.style.left = `${parseInt(img.style.left) - this.PipeSpeed}px`
if (parseInt(img.style.left) <= -55) {
clearInterval(img.IntervalId)
$("body").removeChild(img)
} else {
this.collision($(".bird"), img)
}
}
}, 100)
})
}
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
) {
$(".gameover").show()
$(".bird_logo").none();
$(".pause").onclick()
$(".restart").none();
$(".reload").show()
e(".reload", () => {
location.reload()
})
} else {
if (el2.type == "t") {
if (parseInt(el2.style.left) + el2.offsetWidth == 100) {
this.totalScore += 1
let sco = this.totalScore.toString().split("")
$(".score").innerHTML = ""
sco.forEach(v => {
$(".score").innerHTML += `<img src="./img/${v}.png" alt="">`
})
}
}
}
}
}
// var a = function (test) {
// console.log("1: ", test);
// }
// var a = test => console.log("1: ", test);
new WaterPipeBird()

57
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/js/utils.js Normal file
View File

@@ -0,0 +1,57 @@
class Utils {
$(className) {
return document.querySelector(className);
}
_(className) {
return document.querySelectorAll(className);
}
e(className, callback, type = "click",) {
$(`${className}`)[`on${type}`] = (event) => {
callback(event)
}
}
customMethods() {
Element.prototype.add = function(className) {
this.classList.add(className)
}
Element.prototype.remove = function(className) {
this.classList.remove(className)
}
Element.prototype.none = function() {
this.style.display = "none"
}
Element.prototype.show = function() {
this.style.display = "block"
}
Element.prototype.toggle = function() {
if (this.style.display == "none") {
this.style.display = "block"
} else {
this.style.display = "none"
}
}
}
getRandom(min, max) {
const floatRandom = Math.random()
const difference = max - min
const random = Math.round(difference * floatRandom)
const randomWithinRange = random + min
return randomWithinRange
}
}
let { $, _, e, customMethods, getRandom } = new Utils()
customMethods()
// let utils = new Utils()

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/sounds/sfx_die.ogg Normal file
View File

Binary file not shown.

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/sounds/sfx_hit.ogg Normal file
View File

Binary file not shown.

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/sounds/sfx_point.ogg Normal file
View File

Binary file not shown.

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/sounds/sfx_swooshing.ogg Normal file
View File

Binary file not shown.

BIN
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/sounds/sfx_wing.ogg Normal file
View File

Binary file not shown.

37
历届学生/front-end-team-11/项目开发/上课项目/js案例/水管鸟/test.html Normal file
View File

@@ -0,0 +1,37 @@
<!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>
<div class="main">
<div class="test">
<button>点我</button>
</div>
</div>
</body>
<script src="./js/utils.js"></script>
<script src="./js/index.js"></script>
<script>
e(".main", () => {
alert(2)
})
e(".test", (e) => {
e.stopPropagation();
alert(3)
})
e("button", (e) => {
alert(1)
})
</script>
</html>

175
历届学生/front-end-team-11/项目开发/上课项目/js案例/红包.html Normal file
View File

@@ -0,0 +1,175 @@
<!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 {
margin: 0;
padding: 0;
}
img {
height: 85px;
width: 70px;
position: fixed;
}
.dialog {
position: fixed;
width: 100%;
height: 100%;
background: #000000ba;
z-index: 999;
}
.dialog .center {
width: 400px;
height: 300px;
background: #fff;
border-radius: 10px;
box-sizing: border-box;
padding: 10px;
display: flex;
flex-direction: column;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.dialog .center .dialog_title {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
border-bottom: 1px solid #e0e0e0;
}
.dialog_title .close {
font-size: 30px;
cursor: pointer;
}
.dialog .center .dialog_content {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
</style>
</head>
<body>
<div style="display: none;" class="dialog">
<div class="center">
<div class="dialog_title">
<div class="text">恭喜中奖</div>
<div class="close">x</div>
</div>
<div class="dialog_content">
恭喜中的三等奖
</div>
</div>
</div>
</body>
<script>
let { innerWidth, innerHeight } = window, createdId = null, gImg = null;
// 生成随机x轴红包
function createdHb() {
let img = document.createElement("img");
let left = Math.random() * (innerWidth - 70);
img.src = "./hb.png";
img.style = `
left: ${left}px;
top: -85px;
`
img.onclick = function () {
gImg = img;
clearInterval(createdId)
_("img").forEach(function (img) {
clearInterval(img.IntervalId)
})
random()
$(".dialog").style.display = "block"
}
$("body").appendChild(img);
motion(img)
}
function motion(img) {
img.IntervalId = setInterval(function () {
let newTop = parseInt(img.style.top);
if (newTop >= innerHeight) {
$("body").removeChild(img);
clearInterval(img.IntervalId)
} else {
img.style.top = `${newTop + 10}px`;
}
}, 80)
}
$(".dialog_title .close").onclick = function () {
$(".dialog").style.display = "none"
$("body").removeChild(gImg);
clearInterval(gImg.IntervalId)
_("img").forEach(function (img) {
motion(img)
})
auto()
}
function random() {
let leavel = Math.random()
console.log(leavel);
if (leavel < 0.01) {
$(".dialog_content").innerText = "一等奖"
} else if (0.01< leavel && leavel <= 0.1) {
$(".dialog_content").innerText = "二等奖"
} else {
$(".dialog_content").innerText = "三等奖"
}
}
// createdHb()
function auto() {
createdId = setInterval(function () {
createdHb()
}, 300)
}
auto()
// 让红包运动
// 拆红包的所有功能
// 让被点击的红包停止运动，生成新红包的也停止运动，已有红包也要停止运动
// 一等奖(1) 二等奖(10) 三等奖(89)
function $(className) {
return document.querySelector(className);
}
function _(className) {
return document.querySelectorAll(className);
}
</script>
</html>