forked from kasuganosoras/cxk-ball
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·140 lines (139 loc) · 5.97 KB
/
index.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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=11">
<meta name="description" content="这是一款 HTML5 开发的蔡徐坤打篮球小游戏，无聊的时候玩玩吧！">
<meta name="keywords" content="蔡徐坤,打篮球,游戏,弹球,篮球,HTML5,开源,caixukun,蔡徐坤出来打球,你打篮球像蔡徐坤">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css?s=2">
<title>蔡徐坤打篮球 - 蔡徐坤，出来打球！蔡徐坤游戏_你打游戏像蔡徐坤_篮球打蔡徐坤</title>
<!--<link rel="stylesheet" href="css/common.css">-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script type="text/javascript">
// 百度统计代码
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?5adedb455da362ba577abe2fd8e1095d";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>蔡徐坤打篮球</h2>
<p>蔡徐坤，出来打球！</p>
<hr>
<center>
<p>
<div class="input-group">
<span class="input-group-addon">难度</span>
<select class="form-control" id="ballspeedset">
<option value="2">简单难度（Speed 2）</option>
<option value="3" selected>普通难度（Speed 3）</option>
<option value="5">困难模式（Speed 5）</option>
<option value="7">极限模式（Speed 7）</option>
<option value="9">非人类（Speed 9）</option>
</select>
<div class="input-group-btn">
<button type="button" class="btn btn-danger" onclick="window.startGame()">开始游戏</button>
<button type="button" class="btn btn-warning" onclick="window.pauseGame()">暂停游戏</button>
<button type="button" class="btn btn-success" onclick="window.nextGame()">下个关卡</button>
</div>
</div>
</p>
</center>
<center id="cdiv" style="width: 100%;">
<p><canvas id="canvas" style="width: 100%;height: 563px;"></canvas></p>
</center>
<hr>
<h3>游戏说明</h3>
<p>使用方向键控制蔡徐坤左右移动，使用回车让蔡徐坤发球，按 P 暂停游戏，通关后按 N 进入下一关，按 M 可以暂停音乐</p>
<p>移动端可以点击屏幕左右控制蔡徐坤移动。</p>
<p>如果出现显示不正常的情况请截图并通过 Issues 反馈。</p>
<hr>
<h3>更新记录</h3>
<p>1.5：增加更多的特效</p>
<p>1.4：增加难度设定功能</p>
<p>1.3：修复移动端操作问题</p>
<p>1.2：修复图片显示问题</p>
<p>1.1：将显示方式改为 background</p>
<p>1.0：蔡徐坤打篮球发布</p>
<hr>
<p>Github 开源项目：<a href="https://github.com/kasuganosoras/cxk-ball" target="_blank">https://github.com/kasuganosoras/cxk-ball</a>（原作者：<a href="https://github.com/yangyunhe369" target="_blank">yangyunhe369</a>）</p>
<p>喜欢的话欢迎点个 Star~</p>
</div>
</div>
</div>
</body>
<!-- 图片预缓存 -->
<img src="images/ball.png" style="width: 0px;height: 0px;" />
<img src="images/ballshadow.png" style="width: 0px;height: 0px;" />
<img src="images/paddle_1.png" style="width: 0px;height: 0px;" />
<img src="images/paddle_2.png" style="width: 0px;height: 0px;" />
<img src="images/paddle2_1.png" style="width: 0px;height: 0px;" />
<img src="images/paddle2_2.png" style="width: 0px;height: 0px;" />
<img src="images/paddle3_1.png" style="width: 0px;height: 0px;" />
<img src="images/paddle3_2.png" style="width: 0px;height: 0px;" />
<!-- 背景音乐 -->
<audio src="" style="width: 0px;height: 0px;border: 0px;" id="audio" loop="-1"></audio>
<script src="js/common.js?s=4"></script>
<script src="js/scene.js?s=4"></script>
<script src="js/game.js?s=4"></script>
<script src="js/main.js?s=4"></script>
<script>
var clientWidth = document.body.clientWidth;
var cxk_body = 1;
var move_way = 1;
canvas.width = canvas.clientWidth;
canvas.style.width = canvas.clientWidth + "px";
cdiv.style.width = cdiv.clientWidth + "px";
canvas.height = canvas.clientWidth / 1000 * 563;
canvas.style.height = canvas.clientWidth / 1000 * 563 + "px";
cdiv.style.height = cdiv.clientWidth / 1000 * 563 + "px";
if(canvas.width < 936) {
canvas.width = 936;
canvas.height = 936 / 1000 * 563;
canvas.setAttribute("style", "");
canvas.style.zoom = (cdiv.clientWidth / 936);
canvas.style
} else {
}
window.startGame = function() {
$("#audio").attr("src", "media/jntm.m4a");
audio.play();
window.cacheBallSpeed = parseInt($("#ballspeedset").val());
$("#ballspeedset").attr("disabled", "disabled");
_main.start();
setInterval(function() {
if(cxk_body == 1) {
_main.paddle.image.src = "images/paddle2_" + move_way + ".png";
cxk_body = 2;
} else if(cxk_body == 2) {
_main.paddle.image.src = "images/paddle3_" + move_way + ".png";
cxk_body = 3;
} else {
_main.paddle.image.src = "images/paddle_" + move_way + ".png";
cxk_body = 1;
}
}, 200);
_main.ballshadow.y = 545;
setInterval(function() {
if(_main.ball.y < 530) {
_main.ballshadow.x = _main.ball.x;
_main.ballshadow.y = 545;
} else {
_main.ballshadow.x = _main.ball.x;
_main.ballshadow.y = _main.ball.y + 20;
}
}, 10);
}
</script>
</html>