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

63
历届学生/18课程/class18_2/课程/2020-12-23/game.html Normal file
View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background: #98d8fe url("./img/back.png");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
}
.people {
position: absolute;
left: 0;
bottom: 0;
width: 100px;
}
span {
}
.leftPeople {
transform: rotateY(180deg) !important;
}
.apple {
width: 40px;
height: 40px;
transition: top 0.1s ease;
}
.boom {
width: 60px;
transition: top 0.1s ease;
}
.fraction {
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
}
</style>
</head>
<body>
<!--得分-->
<div class="fraction">0分</div>
<!--爆炸音效-->
<audio class="bombAudio" src="img/bomb.mp3" hidden></audio>
<audio class="appleAudio" src="img/apple.mp3" hidden></audio>
<!--人物-->
<img class="people" src="./img/pepop.png"/>
</body>
<script src="./game.js"></script>
</html>

157
历届学生/18课程/class18_2/课程/2020-12-23/game.js Normal file
View File

@@ -0,0 +1,157 @@
var body = document.querySelector("body");
var people = document.querySelector(".people");
var bombAudio = document.querySelector(".bombAudio");
var appleAudio = document.querySelector(".appleAudio");
// 屏幕的宽度
var screenWidth = document.body.clientWidth;
var screenHeight = document.body.clientHeight;
var fraction = 0;
var gameProbability = 0.4;
var bmobSpeed = 80;
var appleOffset = 20;
function createdEle(type) {
var Img = document.createElement("img");
Img.src = type == 1 ? './img/apple.png' : './img/boom.png';
Img.className = type == 1 ? 'apple' : 'boom';
// 56 84
// 元素的宽度
var SpanWidth = type == 1 ? 40 : 60;
var SpanLeft = Math.random() * (screenWidth - SpanWidth)
if (SpanLeft <= SpanWidth) {
SpanLeft = 0
}
Img.style = `
position: absolute;
left: ${SpanLeft}px;
top: ${type == 1 ? -56 : -84}px;
`;
body.appendChild(Img);
animation(type, Img)
}
function animation(type, span) {
// 苹果🍎
if (type == 1) {
var appleInterval = setInterval(function (){
span.style.top = `${parseInt(span.style.top) + appleOffset}px`;
// 判断苹果是否超过苹果最大高度，如果超过，删除苹果并清除定时器
if (parseInt(span.style.top) > screenHeight) {
body.removeChild(span)
clearInterval(appleInterval)
} else {
JudgingCollision(span, appleInterval)
}
},60)
// 炸弹💣
} else {
var boomInterval = setInterval(function (){
span.style.top = `${parseInt(span.style.top) + 20}px`;
//判断炸弹是否超过苹果最大高度，如果超过，删除炸弹并清除定时器
if (parseInt(span.style.top) > screenHeight) {
body.removeChild(span)
clearInterval(boomInterval)
} else {
JudgingCollision(span, boomInterval)
}
},bmobSpeed)
}
}
/**
* 判断是否碰撞
* @constructor
*/
function JudgingCollision(span, timeout) {
var people = document.querySelector(".people");
var peopleX1 = parseInt(people.style.left);
var peopleX2 = parseInt(people.style.left) + people.clientWidth;
var peopleX3 = people.offsetTop;
var peopleX4 = people.offsetTop + people.clientHeight;
var spanX1 = parseInt(span.style.left);
var spanX2 = parseInt(span.style.left) + span.clientWidth;
var spanX3 = parseInt(span.style.top);
var spanX4 = parseInt(span.style.top) + span.clientHeight;
// 碰撞检测
if(peopleX4<spanX3 || peopleX1>spanX2 || peopleX3>spanX4 || peopleX2<spanX1){
// 没碰上
}else{
if (span.className == "apple") {
fraction += 10;
// 如果分数超过100分，
if (fraction >= 100) {
// 降低苹果出现的概率，也就是提高炸弹数量
gameProbability = 0.2;
// 并且加快炸弹的速度
bmobSpeed = 80;
appleOffset = 40;
}
document.querySelector(".fraction").innerText = `${fraction}分`;
appleAudio.play()
body.removeChild(span)
clearInterval(timeout)
} else {
fraction -= 20;
document.querySelector(".fraction").innerText = `${fraction}分`;
bombAudio.play();
if (fraction <= 0) {
clearInterval(timeout)
confirm("游戏失败")
location.reload()
} else {
span.src = "./img/bombimg.png"
clearInterval(timeout)
setTimeout(function (){
body.removeChild(span)
},100)
}
}
}
}
function init () {
var probability = Number(Math.random().toFixed(1))
if (probability <= gameProbability) {
createdEle(1)
} else {
createdEle(2)
}
}
setInterval(function (){
init();
},200)
body.onmousemove = function (e) {
if (e.x <= 100) {
people.style.left = `0px`;
} else {
people.style.left = `${e.x - 100}px`;
}
// 判断人物向右移动
if (parseInt(people.style.left) > screenWidth / 2) {
people.className = 'people'
// 判断人物向左移动 添加类名 leftPeople，使用css3的水平镜像翻转人物
} else {
people.className = 'people leftPeople'
}
}
// 接到一个苹果加10分
// 接到炸弹减20
// 默认0分
// 结束条件：分数 < 0
// 任务
// 分数 >100 的时候 炸弹速度加快（），炸弹的数量变多（概率）
//

BIN
历届学生/18课程/class18_2/课程/2020-12-23/img/apple.mp3 Normal file
View File

Binary file not shown.

BIN
历届学生/18课程/class18_2/课程/2020-12-23/img/apple.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 711 KiB

BIN
历届学生/18课程/class18_2/课程/2020-12-23/img/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 272 KiB

BIN
历届学生/18课程/class18_2/课程/2020-12-23/img/bomb.mp3 Normal file
View File

Binary file not shown.

BIN
历届学生/18课程/class18_2/课程/2020-12-23/img/bombimg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 171 KiB

BIN
历届学生/18课程/class18_2/课程/2020-12-23/img/boom.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
历届学生/18课程/class18_2/课程/2020-12-23/img/pepop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 631 KiB

120
历届学生/18课程/class18_2/课程/2020-12-23/index.html Normal file
View File

@@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body, ul,li{
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
overflow: hidden;
}
.tabs_title li {
float: left;
margin-right: 10px;
}
.title_active {
color: red;
}
.tabs_content li{
display: none;
}
.content_active {
display: block !important;
}
</style>
</head>
<body>
<ul class="tabs_title">
</ul>
<ul class="tabs_content">
</ul>
</body>
<script>
var TabsList = [
{
title: '全部',
content: [
{ text: '全部的内容1', id: 1 },
{ text: '全部的内容2', id: 2 },
{ text: '全部的内容3', id: 3 }
]
},
{
title: '安全',
content: [
{ text: '安全的内容1', id: 3 },
{ text: '安全的内容2', id: 4 }
]
},
{
title: '论坛',
content: [
{ text: '论坛的内容1', id: 5 },
{ text: '论坛的内容2', id: 6 }
]
}
];
var tabsTitle = document.querySelector(".tabs_title");
var tabsContent = document.querySelector(".tabs_content");
function RenderTitle() {
TabsList.forEach(function (v,i){
console.log(tabsTitle)
tabsTitle.innerHTML += `<li class="${i == 0 ? 'title_active' : '' }">${v.title}</li>`
});
RenderContent()
}
function RenderContent() {
TabsList.forEach(function (v,i){
tabsContent.innerHTML +=
`
<li class="${i == 0 ? 'content_active' : ''}">
${
v.content.map(function (val,index){
return ` <div class="item">
<a href="./info.html?id=${val.id}">${val.text}</a>
</div>`
}).toString().replace(/,/ig, "")
}
</li>
`
});
TabsInit()
}
function TabsInit() {
var li = document.querySelectorAll(".tabs_title li");
var contentLi = document.querySelectorAll(".tabs_content li")
li.forEach(function (v,i){
v.onclick = function () {
li.forEach(function (val,index){
val.className = "";
contentLi[index].className = ""
})
v.className = "title_active";
contentLi[i].className = "content_active"
}
})
}
RenderTitle()
</script>
</html>

63
历届学生/18课程/class18_2/课程/2020-12-23/search.html Normal file
View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入搜索关键词">
<ul>
</ul>
</body>
<script>
var JianYi = ['html学习', '今天第一个学html', 'js编程入门', '实际案例学习js和html', '垃圾js', 'typescript学习'];
var UserInput = document.querySelector("input");
var Ul = document.querySelector("ul");
var NewArr = [];
UserInput.oninput = function () {
NewArr = []
if (UserInput.value.length != 0) {
JianYi.forEach(function (v) {
if (v.indexOf(UserInput.value) != -1) {
var startIndex = v.indexOf(UserInput.value);
var length = UserInput.value.length;
var str = `<span style="color: red;">${v.substr(startIndex,length)}</span>`;
NewArr.push(v.replace(UserInput.value, str))
console.log(NewArr);
}
});
if (NewArr.length == 0) {
Ul.innerHTML = "<li>没有搜索建议</li>"
} else {
Ul.innerHTML = ""
NewArr.forEach(function (v) {
Ul.innerHTML += `<li>${v}</li>`
})
var Li = document.querySelectorAll("ul li");
Li.forEach(function (v) {
v.onclick = function () {
UserInput.value = v.innerText;
Ul.innerHTML = ""
}
})
}
} else {
Ul.innerHTML = ""
}
}
</script>
</html>

61
历届学生/18课程/class18_2/课程/2020-12-23/test.html Normal file
View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width:100px ;height: 100px;background: green;
position: absolute;
}
#div2{
width:100px ;height: 100px;background: yellow;
position: absolute;left: 300px;top: 200px;z-index: -1;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var disX = 0;
var disY = 0;
oDiv.onmousedown = function (ev) {
var ev = ev|| window.event;
disX = ev.clientX - oDiv.offsetLeft;
disY = ev.clientY - oDiv.offsetTop;
document.onmousemove = function (ev) {
var ev = ev|| window.event;
var t1 = oDiv.offsetTop;
var l1 = oDiv.offsetLeft;
var r1 = oDiv.offsetLeft + oDiv.offsetWidth;
var b1 = oDiv.offsetTop + oDiv.offsetHeight;
var t2 = oDiv2.offsetTop;
var l2 = oDiv2.offsetLeft;
var r2 = oDiv2.offsetLeft + oDiv2.offsetWidth;
var b2 = oDiv2.offsetTop + oDiv2.offsetHeight;
if(b1<t2 || l1>r2 || t1>b2 || r1<l2){// 表示没碰上
}else{
oDiv2.style.background = 'blue';
}
oDiv.style.left = ev.clientX - disX +'px';
oDiv.style.top = ev.clientY - disY +'px';
}
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
}
</script>
</html>