演示网站 HTML5 canvas俄罗斯方块2.0
编写代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 canvas俄罗斯方块2.0</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.black.css">
<link rel="stylesheet" type="text/css" href="css/4.css">
</head>
<body>
<div class="start-container">
<p>
<button class="btn btn-success btn-start" id="btn-start">开始游戏</button>
<button class="btn btn-info btn-set">游戏设置</button>
</p>
</div>
<div class="game-container">
<!-- 时间面板 -->
<div class="panel panel-default timer-panel">
<div class="panel-heading">
进行时间
</div>
<div class="panel-body">
<canvas id="timer">绘制时间</canvas>
</div>
</div>
<!-- 帮助面板 -->
<div class="panel panel-default help-panel">
<div class="panel-body">
<p>↑ 翻转方块</p>
<p>↓ 加速下落</p>
<p>→ 向右移动</p>
<p>← 向左移动</p>
</div>
</div>
<!-- 级别面板 -->
<div class="panel panel-default leval-panel">
<div class="panel-heading">
当前级别
</div>
<div class="panel-body">
<canvas id="leval">绘制级别</canvas>
</div>
</div>
<!-- 游戏主面板 -->
<div class="game-main-panel">
<canvas id="c_game_main">绘制游戏主体</canvas>
</div>
<!-- 显示下一块面板 -->
<div class="panel panel-default next-panel ">
<div class="panel-heading">
下一方块
</div>
<div class="panel-body">
<canvas id="nextshape">绘制下一方块</canvas>
</div>
</div>
<!-- 设置面板 -->
<div class="panel panel-default setting-panel">
<div class="panel-body">
<button class="btn btn-danger btn-game-pause" type="button">暂停</button>
<button class="btn btn-warning btn-game-setting " type="button">设置</button>
<button type="button" class="btn btn-primary btn-game-start">开始</button>
</div>
</div>
<!-- 得分面板 -->
<div class="panel panel-default score-panel">
<div class="panel-heading">
当前得分
</div>
<div class="panel-body">
<canvas id="score">绘制得分</canvas>
</div>
</div>
<!-- 最高得分面板 -->
<div class="panel panel-default high-score-panel">
<div class="panel-heading">
最高得分
</div>
<div class="panel-body">
<canvas id="highscore">绘制最高得分</canvas>
</div>
</div>
</div>
<!-- 弹出设置面板 -->
<div class="modal-dialog">
<div class="modal-body">
<label for="ck-sound">启用声音</label>
<input type="checkbox" id="ck-sound">
<br>
<br>
<button id="btn-dialog-close" class="btn">关闭</button>
</div>
</div>
<!-- <script src="js/jquery-3.1.1.min.js"></script> -->
<!-- <script src="app.js"></script> -->
<script src="js/app.js"></script>
<script src="js/Board.js"></script>
<!-- 主题面板绘图 -->
<script src="js/Canvas.js"></script>
<!-- 封装canvas对象 -->
<script src="js/ResourceManager.js"></script>
<!-- 加载资源 -->
<script src="js/Block.js"></script>
<!-- 单个方块 -->
<script src="js/Shape.js"></script>
<!-- 随机出现方块 -->
<script src="js/Tetris.js"></script>
<script src="js/Keyboard.js"></script>
<script src="js/config.js"></script>
<!-- 存储常用数据 -->
<script src="vendor/howler.min.js"></script>
<!-- 音频播放插件 -->
<script src="js/Score.js"></script>
<!-- 绘制得分 -->
<script src="js/Timer.js"></script>
<!-- 绘制计时 -->
<script src="js/Leval.js"></script>
<!-- 绘制级别 -->
<script src="js/Nextshape.js"></script>
<!-- 绘制下一个方块 -->
<script src="js/highscore.js"></script>
<!-- 绘制最高分 -->
<script type="text/javascript">
/*
$('.btn-success').click(function(){
$(".start-container").css({
'display':'none'
})
$(".game-container").css({
'display':'block'
})
})*/
</script>
</body>
</html>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
