打砖块 | Sanstyle

style在北京实训的时候，跟着培训老师做的一个小游戏，有不足之处请指教！

先放上index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>打砖块游戏</title>
		<link rel="stylesheet" href="css/new_file.css" />
	</head>
	<body>
		<!--
        	作者：sunstady@gmail.com
        	时间：2017-07-12
        	描述：创建一个画布
        -->
        <canvas id="gameCanvas" width="1024px" height="768px"></canvas>
        <audio id="bgmp3" src="img/happy.mp3" autoplay="autoplay"></audio>
		<audio id="breakermp3" src="img/bucket1.mp3"></audio>
		
		<!--
        	作者：sunstady@gmail.com
        	时间：2017-07-13
        	描述：得分
        -->
		<span id="kuangjia"><p id="p_number">得分:0</p></span>
		<img id="start_game" src="img/image/4.png" onclick="Start_game()" />
		<!--
        	作者：sunstady@gmail.com
        	时间：2017-07-12
        	描述：导入js文件
        -->
		<script type="text/javascript" src="js/game_style.js" ></script>
		
	</body>
</html>

/img目录下的的图片和音频在github

/js目录下的game_style.js

window.onload = init;//小括号写不写都行
//window.onload = init();
window.onmousemove = mouseMoveHandler;//获取鼠标移动的属性
//画板设置成全局变量
var canvas;
//画笔设置成全局变量
var context;
var gamebg;//背景
var board;//挡板
var ball;//小球
//挡板的坐标
var boardY = 650;
var boardX = 0;
var it = 0;
//定义画布的宽高
var cW = 1024;
var cH = 768;
//设置小球的初始化坐标
var ballX = 400;
var ballY = 500;
//定义小球XY轴的速度
var vx = 8;
var vy = -8;
//定义一个数组用于存储砖块
var Breaders;
var breakermp3;
//得分
var score = 0;
var p;
var Tick;
//游戏入口
function init(){
	//方法的调用
	log("进入游戏中...");	
	//找到画布
	canvas = document.getElementById("gameCanvas");
	//找到声音控件
	breakermp3 = document.getElementById("breakermp3");
	//找到得分文字
	p = document.getElementById("p_number");
	//相当于画笔
	context = canvas.getContext("2d");
//	gamebg = new Image();//创建一个image对象，用于加载图片
//	gamebg.src="img/image/bg.png";
//	//三个参数：第一个绘制的对象；第二个第三个绘制的起始坐标；
//	context.drawImage(gamebg,0,0);
	gamebg = AddImg("img/image/bg.png");
	board = AddImg("img/image/board.png");
	ball = AddImg("img/image/ball.png");
	createrBreaders();//创建砖块
	//删除数组中的参数
	//Breaders.splice(0,1);
	//调用刷新机制
	Tick = setInterval(gameTick,1000/60);//一秒刷新60次,1000毫秒等于1秒
}
//创建一个刷新界面的方法
function gameTick(){
	log("刷新次数:"+(it++));
	//清空当前屏幕
	cleanScreen();//调用清空屏幕的方法
	//绘制背景
	context.drawImage(gamebg,0,0);
	//绘制的挡板
	context.drawImage(board,boardX,boardY);
	//刷新砖块
	updateBreaker();
	//调用刷新小球位置
	updateBall();
	//调用检查碰撞
	TextBallandBoread();
	//调用检查小球与砖块碰撞
	TextBallandBreaker();
}
//检查小球跟砖块的碰撞
function TextBallandBreaker(){
	for(var i = Breaders.length-1;i>=0 ;i--){
		var item = Breaders[i];//先提取最后一个
		var hit = hitTextpoint(item.x,item.y,200,66,(ballX+ball.width/2),ballY);
		if(hit){
			breakermp3.play();
			Breaders.splice(i,1);
			vy *= -1;		
			p.innerText = "得分:"+(++score);
			if(score>=25){
				RestartandClean();
			}
		}
		
	}
}
//重新开始游戏的方法
function Start_game(){
	window.location.reload();//让界面重新刷新
}
//游戏结束，清空屏幕
function RestartandClean(){
	clearInterval(Tick);
	cleanScreen();
	context.drawImage(gamebg,0,0);
	var gamestart = document.getElementById("start_game");
	gamestart.style.display = "block";//游戏结束，出现砖块
}
//检查小球跟挡板的碰撞
function TextBallandBoread(){
	var hit = hitTextpoint(boardX-ball.width,boardY-ball.height,board.width+ball.width,board.height+ball.height,ballX,ballY);
	if(hit){
		ballY = boardY-ball.height;
		vy *= -1;//取反
	}else{
		
	}
}
//碰撞满足的条件
//x1、y1障碍物的坐标
//w1、h1障碍物的宽高
//x2、y2小球的坐标
function hitTextpoint(x1,y1,w1,h1,x2,y2){
	if(x2>=x1&&x2<=x1+w1&&y2>y1&&y2<=y1+h1){
		return true;
	}else{
		return false;
	}
}
//刷新砖块
function updateBreaker(){
	
	//循环提取数组中的砖块
	for(var i = 0; i< Breaders.length; i++){
		var items = Breaders[i];
		context.drawImage(items.bimg,items.x,items.y);
	}
}
//创建砖块
function createrBreaders(){
	Breaders = new Array();
	for(var j=0; j<5; j++){
		for(var i = 0; i < 5; i++){
			var item = AddImg("img/image/"+(4+j)+".png");
			//item.x = 20+200*i;
			//item.y = 100+70*j;
			Breaders.push({
				bimg:item,
				x: 20 + 200 * i,
				y: 100 + 72 * j
			});
		}
	}
	
}
//小球位置刷新的方法
function updateBall(){
	ballX += vx;
	ballY += vy;
	
	log("小球的坐标为:X"+ballX+",Y轴坐标:"+ballY);
	//上边
	if(ballY<=80){
		ballY = 80;
		vy *= -1;
	}
	//下方
	if(ballY>=cH){
//		ballY = cH - ball.height;
//		vy *= -1;
		log("游戏结束。。。");
		RestartandClean();
	}
	//右边
	if(ballX>=cW - ball.width){
		ballX = cW -ball.width;
		vx *= -1;
	}
	//左边
	if(ballX<=0){
		ballX = 0;
		vx *= -1;
	}
	
	
	
	//绘制小球
	context.drawImage(ball,ballX,ballY);
}
//鼠标滑动触发的事件
function mouseMoveHandler(e){
	//获取鼠标的X轴的数值
	//将中心点设置为挡板的中心
	boardX = e.x - board.width/2;
	//判断挡板不超出左边屏幕
	if(e.x<=0+board.width/2){
		boardX = 0;
	}
	//判断挡板不超出右边屏幕
	if(e.x>cW - board.width/2){
		boardX = cW - board.width;
	}
}
//创建一个清空屏幕的方法
function cleanScreen(){
	/*
	 * 第一个参数：X 坐标
	 * 第二个参数：Y 坐标
	 * 第三个参数：画板的宽度
	 * 第四个参数：画板的高度
	 * */
	context.clearRect(0,0,cW,cH);
}
//加载图片的方法  url 图片的路径
function AddImg(url){
	var img = new Image();//创建一个Image对象
	img.src = url;
	return img;
}
//后台控制面板游戏进度数据输出
function log(msg){
	//打印到控制台
	console.log(msg);
}

/css目录下的new_file.css

#p_number{
	/*设置绝对定位*/
	position: absolute;
	left: 10px;
	top: -15px;
	font-size: 20px;
	padding: 5px;
	border-radius:5px;
}
#kuangjia{
	position: absolute;
	left: 100px;
	top: 20px;
	background: orange;
	width: 100px;
	height: 50px;
	border-radius:5px;
}
#start_game{
	position: absolute;
	top: 400px;
	left:300px;
	display: none;
}