-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathpinball.html
89 lines (85 loc) · 4.05 KB
/
pinball.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YuanRetro-JS弹球</title>
<link rel="stylesheet" href="/style.css">
<script src="/jquery-3.7.1.min.js"></script>
<link rel="icon" href="/img/nahida.png" type="image/x-icon">
<style>
.difficulty-container {
display: flex;
flex-direction: row; /* 难度选项垂直排列 */
align-items: flex-start; /* 左对齐 */
}
/* 布局容器 */
.game-container {
display: flex;
flex-direction: column; /* 垂直布局 */
}
/* 按钮容器布局 */
.button-row {
display: flex;
justify-content: space-between; /* 左右两边对齐 */
width: 400px; /* 与画布宽度保持一致 */
margin-top: 20px; /* 与画布间距 */
}
#canvas {
width: 400px; /* 画布固定宽度 */
height: 400px; /* 画布固定高度 */
}
</style>
</head>
<body class="body" id="body">
<nav class="navi"></nav>
<h1>弹球游戏 V2.5
<del>更新时间2024.12.05</del>
</h1>
<div class="textbox-container">
<div class="textbox" style="width: 450px;">
<p>用纯JavaScript写的小小游戏，可以分别用键盘的“a”和“d”或者左右箭头键控制挡板左右移动，也可以使用
<del>（移动设备友好）</del>
的按钮哦~<br/>如果浏览器不支持或者屏蔽了JavaScript，游戏可（ken）能（ding）就不能运行了哦~<br/>每次接住弹球可以得到5分，但是如果没接住的话，就寄喽~
</p>
<p>感谢
<del>（n年前买的x）</del>
程晨的《JavaScript网页游戏制作轻松学》(ISBN 978-7-115-46238-1)，这里的算法和部分代码参考了书中的思路哦~
</p>
</div>
<div class="textbox">
<div class="difficulty-container">
<label for="easy">难度选择<br/></label>
<input type="checkbox" id="easy" onclick="clickCheckbox(this)"/>
<label for="easy">简单（EZ）<br/></label>
<input type="checkbox" id="hard" onclick="clickCheckbox(this)"/>
<label for="hard">困难（HD）<br/></label>
<input type="checkbox" id="insane" onclick="clickCheckbox(this)"/>
<label for="insane">疯狂（IN）<br/></label>
</div>
<input type="button" id="start" class="custom-button" value="开始游戏！" onclick="start()"/>
<!-- 进入游戏按钮 -->
<div class="game-container">
<!-- 画布 -->
<canvas id="canvas" width="400" height="400"></canvas>
<!-- 按钮容器 -->
<div class="button-row">
<input type="button" id="leftButton" class="custom-button" value="左"/> <!-- 向左按钮 -->
<input type="button" id="rightButton" class="custom-button" value="右"/> <!-- 向右按钮 -->
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/pinball.js"></script>
<footer class="site-footer"></footer>
<script>
$(document).ready(function () {
// 加载底边栏内容
$(".site-footer").load("/footer.html");
// 加载顶边栏内容
$(".navi").load("/navi.html");
});
</script>
<script type="text/javascript" src="/footer.js"></script>
</body>
</html>