最近学习了前端三大件,写了一个小项目来巩固一下学到的知识,在这里分享给大家
网页实现了登录页面和游戏页面
资源准备
使用 ps 将四张图片先合成在一个画面中,然后分图层导出
关于如何制作图片我在 B 站上出了一个教程:贴图制作教程
这里将我做的图片以及我的源文件分享给大家,大家使用打开 main.html 文件即可浏览我做的页面
链接:https://pan.baidu.com/s/1GPcSt2DAifYNvqmmymwRIw?pwd=h3yj
提取码:h3yj
登录页面
登录页面加入了一些贴图,这些贴图可以根据鼠标滚轮产生移动
然后登录界面实现了登录功能
登录界面的 html 代码如下:
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>坤坤酷跑-登录</title>
<!-- 连接css文件 -->
<link rel = "stylesheet" type = "text/css" href = "style.css">
</head>
<body>
<!-- 导入所有图片 -->
<section>
<img src = "bg.png" id = "bg">
<img src = "moon.png" id = "lanqiu">
<img src = "mountain.png" id = "tietu">
<img src = "beidai.png" id = "qianjin">
<h2 id = "text">一个真正的man</h2>
</section>
<script type="text/javascript">
//先拿到所有图片的 document 对象
let bg = document.getElementById("bg");
let lanqiu = document.getElementById("lanqiu");
let tietu = document.getElementById("tietu");
let qianjin = document.getElementById("qianjin");
let text = document.getElementById("text");
//给图片增加滚动操作
window.addEventListener('scroll',function(){
var value = window.scrollY;
bg.style.top = value * 1 + 'px';//参数控制滑动速度大小
lanqiu.style.left = value * 1 + 'px';
// tietu.style.top = -value * 0.3 + 'px';
// qianjin.style.top = value * 1 + 'px';
text.style.top = value * 0.5 + 'px';
});
</script>
<!-- 添加登录表单 -->
<div class="form-container">
<h2 class="form-title">点击登录开始游戏 (游客用户名:ikun 游客密码:ni~gan~ma~)</h2>
<form action="#" method="POST">
<input type="text" name="username" class="form-input" placeholder="用户名" required>
<input type="password" name="password" class="form-input" placeholder="密码" required>
<button type="button" class="form-submit" onclick="login()">登录</button>
</form>
</div>
<script>
function login() {
//获取用户名和用户密码
var username = document.getElementsByName('username')[0].value;
var password = document.getElementsByName('password')[0].value;
// 登录验证操作
var correctUsername = "ikun";
var correctPassword = "ni~gan~ma~";
if (username === correctUsername && password === correctPassword) {
// 登录成功,跳转到指定链接(在新标签页中打开)
window.open('game.html', '_blank');
} else {
// 登录失败,弹出警告框
alert("你不是真爱粉,你个小黑子,举豹了!");
}
}
</script>
<hr>
<br>
<h3 id = "maker">
页面制作:花下的晚风
</h3>
</body>
</html>
登录界面的 css 代码如下:
/* 导入Google Fonts中的Poppins字体,包括多种粗细 */
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
/* 应用到所有元素的通用样式 */
* {
margin: 0; /* 设置外边距为0 */
padding: 0; /* 设置内边距为0 */
font-family: 'Poppins', sans-serif; /* 使用Poppins字体,如果无法加载则使用sans-serif备用字体 */
}
/* 设置整个页面的背景颜色 */
body {
background: rgb(156, 143, 143);
min-height: 1200px; /* 确保页面至少有1500像素高度 */
}
/* 段落部分的样式 */
section {
position: relative;
width: 100%;
height: 100vh; /* 占据整个视口的高度 */
overflow: hidden; /* 隐藏溢出内容 */
display: flex; /* 使用flex布局 */
justify-self: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
/* 伪元素:before,用于段落内容之前 */
section:before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
/* 应用从底部到顶部的渐变背景 */
background: linear-gradient(to top, rgb(156, 143, 143), transparent);
z-index: 10000; /* 确保在其他内容之上 */
}
/* 伪元素:after,用于段落内容之后 */
section:after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 100%; /* 固定高度在底部 */
background: rgb(156, 143, 143); /* 背景颜色 */
z-index: 10000; /* 确保在其他内容之上 */
mix-blend-mode: color; /* 颜色混合模式效果 */
}
/* 段落中的图片样式 */
section img {
position: absolute;
top: 0;
left: 0;
height: 100%; /* 占据整个段落高度 */
width: 100%; /* 占据整个段落宽度 */
object-fit: cover; /* 图片填充方式,覆盖整个空间 */
pointer-events: none; /* 图片不接受指针事件 */
}
/* 段落中文本的样式 */
#text {
position: relative;
color: #fff; /* 白色文本颜色 */
font-size: 10em; /* 非常大的字体大小 */
z-index: 1; /* 确保在其他内容之上 */
}
/* 背带裤的样式 */
#qianjin{
z-index: 2;
}
/* 登录表单的样式 */
/* 表单容器 */
.form-container {
margin: 0px auto;
margin-top: 100px;
width: 80%;
padding: 5%;
background-color: #222; /* 表单背景颜色 */
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* 阴影效果 */
display: block;
}
/* 表单标题 */
.form-title {
text-align: center;
color: #fff;
font-size: 24px;
margin-bottom: 20px;
}
/* 输入框样式 */
.form-input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
background-color: #333; /* 输入框背景颜色 */
border: none;
border-radius: 5px;
color: #fff;
outline: none;
transition: all 0.3s ease; /* 过渡效果 */
}
/* 输入框激活时样式 */
.form-input:focus {
border: 2px solid #4CAF50; /* 激活时的边框颜色 */
background-color: hsl(0, 0%, 27%); /* 激活时的背景颜色 */
}
/* 提交按钮样式 */
.form-submit {
width: 100%;
padding: 10px;
background-color: #4CAF50; /* 按钮背景颜色 */
border: none;
border-radius: 5px;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease; /* 过渡效果 */
}
/* 提交按钮悬停样式 */
.form-submit:hover {
background-color: #366138; /* 按钮悬停时的背景颜色 */
}
#maker{
text-align: center;
bottom: 0px;
color: white;
}
游戏界面
游戏界面实现了键盘事件监听,以及动画和碰撞
当敌人碰到玩家时,游戏结束
游戏界面的 html 代码:
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>坤坤酷跑主游戏界面</title>
<link rel = "stylesheet" type = "text/css" href = "game.css">
</head>
<body>
<div id = "game">
<div id = "ikun">
<img src = "ikun.png">
</div>
<div id = "blacker">
<img src = "enemy.png">
</div>
</div>
<hr>
<h2>按任意键跳跃,小黑子随时可能发起攻击,注意躲避!!!</h2>
<br>
<h3>游戏架构:花下的晚风</h3>
<h3>美术:花下的晚风</h3>
<h3>开发:花下的晚风</h3>
<h3>测试:花下的晚风</h3>
<script>
const ikun = document.querySelector("#ikun")
const blacker = document.querySelector("#blacker")
//开启跳跃动画和结束跳跃动画
window.addEventListener('keydown',event => {
// console.log("a");
ikun.classList.add("jumpclass")
setTimeout(() => {
ikun.classList.remove("jumpclass");
}, 300);
});
//设置碰撞
setInterval(()=>{
const ikunBottom = parseFloat(
getComputedStyle(ikun).getPropertyValue("bottom")
);
const blackerLeft = parseFloat(
getComputedStyle(blacker).getPropertyValue("left")
);
if(blackerLeft < 20 && blackerLeft > -20 && ikunBottom <= 20){
alert("你干嘛~~~~~~嗨嗨哎哟~~~~~~!");
}
},10);
</script>
<!-- 随机出现敌人 -->
<script>
var blacker2 = document.getElementById('blacker'); // 修改为 blacker2
function playAnimation() {
// 移除动画
blacker2.style.animation = 'none';
// 重新设置 left 到起始位置
blacker2.style.left = '850px';
// 重新添加动画
setTimeout(function() {
blacker2.style.animation = 'blacker 1s linear forwards';/*将时间调小可以增加难度*/
}, getRandomWaitTime());
}
// 随机等待时间函数,返回一个随机的毫秒值
function getRandomWaitTime() {
return Math.floor(Math.random() * 5000) + 1000; // 1000ms 到 6000ms 之间的随机值
}
// 监听动画结束事件
blacker2.addEventListener('animationend', function() {
playAnimation();
});
// 初始播放动画
playAnimation();
var blacker2 = document.getElementById('blacker');
</script>
</body>
</html>
游戏界面的 css 代码:
/* 整体设置 */
body{
padding: 20px;
background-color: white;
}
/* 标题设置 */
h2{
text-align: center;
}
/* 游戏边框*/
#game{
width: 75%;
height: 300px;
border: 1px solid black;
margin: 0 auto;
display: block;
position: relative;
}
/* 玩家 */
#ikun{
width: 85px;
height: 160px;
background-color: rebeccapurple;
position: absolute;
bottom: 0px;
}
/* 将跳跃动画放到类中方便接入监听 */
.jumpclass{
animation: jump 0.3s infinite;
}
/* 给坤坤添加动作 */
@keyframes jump{
0%{
bottom: 0px;
}
30%{
bottom: 150px;
}
70%{
bottom: 150px;
}
100%{
bottom: 0px;
}
}
/* 敌人 */
#blacker{
position: absolute;
width: 80px;
height: 80px;
background-color: black;
bottom: 0px;
left: 850px;
animation: blacker 1s linear infinite;/*将时间调小可以增加难度*/
}
/* 给小黑子添加移动 */
@keyframes blacker{
0%{
left: 850px;
}
100%{
left: -20px;
}
}