This repository has been archived by the owner on Mar 11, 2020. It is now read-only.
forked from yangyunhe369/h5-game-blockBreaker
/
index.html
executable file
·147 lines (145 loc) · 6.36 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
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=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 开发的 CXK 打篮球小游戏，无聊的时候玩玩吧！">
<meta name="keywords" content="CXK,打篮球,游戏,弹球,篮球,HTML5,开源,caixukun,CXK出来打球,你打篮球像CXK">
<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>CXK 打篮球 - CXK，出来打球！CXK游戏_你打游戏像CXK_篮球打CXK</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>CXK 打篮球</h2>
<p>CXK，出来打球！</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>使用方向键控制 CXK 左右移动，使用回车让 CXK 发球，按 P 暂停游戏，通关后按 N 进入下一关</p>
<p>特殊技能：W 发起虚鲲鬼步，5 秒内能 100% 接住球，每次消耗 1000 积分。</p>
<p>移动端可以点击屏幕左右控制 CXK 移动。</p>
<p>如果出现显示不正常的情况请截图并通过 Issues 反馈。</p>
<hr>
<h3>更新记录</h3>
<details>
<summary style="cursor: pointer;">点击查看更新内容</summary>
<div style="margin-top: 8px;">
<p>1.6：增加接球动作，修复球落地判定问题</p>
<p>1.5：增加更多的特效</p>
<p>1.4：增加难度设定功能</p>
<p>1.3：修复移动端操作问题</p>
<p>1.2：修复图片显示问题</p>
<p>1.1：将显示方式改为 background</p>
<p>1.0：CXK 打篮球发布</p>
</div>
</details>
<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;" />
<img src="images/paddle4_1.png" style="width: 0px;height: 0px;" />
<img src="images/paddle4_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/skills.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);
} 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 if(cxk_body == 4){
_main.paddle.image.src = "images/paddle4_" + move_way + ".png";
cxk_body = 3;
} else {
_main.paddle.image.src = "images/paddle_" + move_way + ".png";
cxk_body = 1;
}
}, 150);
setInterval(function() {
_main.ballshadow.y = 545;
_main.ballshadow.x = _main.ball.x;
}, 10);
}
</script>
</html>