cxk-ball
/
index.html

<!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>移动端可以点击屏幕左右控制 CXK 移动。</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：CXK 打篮球发布</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);
		} 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>