今天學習了jQuery的一個小案例：
運作效果：
小球碰撞運作效果
首先是對頁面的布局
HTML檔案index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>撞球遊戲</title>
<link rel="stylesheet" href="main.css" target="_blank" rel="external nofollow" >
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="title">撞球遊戲</div>
<canvas id="bricksCanvas" width="480" height="460"></canvas>
<div class="start" flage="flage">開始遊戲</div>
<strong>空格暫停</strong>
<script src="main.js"></script>
</body>
</html>
CSS檔案main.css
*{
margin: 0;
padding: 0;
list-style: none;
outline: none;
background-color: #81aa52;
}
canvas{
background-color: antiquewhite;
display: block;
margin: 0 auto;
padding: 20px auto;
border: 1px solid #8f63cc;
margin-top: 10px;
}
.title{
color: #00c;
text-align: center;
margin-top: 20px;
font-size: 2em;
background: #cfc;
width: 480px;
margin: 0 auto;
margin-top: 20px;
}
.start{
color: #00c;
text-align: center;
margin-top: 20px;
font-size: 1em;
background: #8f63cc;
width: 100px;
margin: 0 auto;
margin-top: 20px;
cursor: pointer;
}
strong{
display: block;
color: #00c;
text-align: center;
font-size: 1em;
background: #8f63cc;
width: 100px;
margin: 0 auto;
margin-top: 20px;
}
JavaScript檔案main.js
var canvas = $("#bricksCanvas")[0];
var ctx = canvas.getContext("2d");//建立畫布上的繪圖環境
var stop_ststus = true;//停止鍵是否有效
var stop;
var canvas_status = true;
var ballRadius = 10;
var ballColor = "#f44";
//小球位置
var x = canvas.width/2;
var y = canvas.height-25;
//球移動速度
var dx = -2;
var dy = -2;
var paddleHeight = 15;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;
//磚塊
var brickRowCount = 5;
var brickColumnCount = 6;
var brickWidth = 70;
var brickHeight = 20;//磚塊高度
var brickPadding = 6;
var brickOffsetTop = 35;
var brickOffsetLeft = 15;
var score = 0;
var lives = 3;
//初始化二維數組，存儲磚塊資訊 status ：1表示磚塊顯示，0 表示消失
var bricks = [];
for(c=0;c<brickColumnCount;c++){
bricks[c] = [];
for(r=0;r<brickRowCount;r++){
bricks[c][r] = {x:0,y:0,status:1};//磚塊顯示
}
}
//畫球
function drawBall(){
ctx.beginPath();
ctx.arc(x,y,ballRadius,0,Math.PI*2);//畫一個圓，底部居中
ctx.fillStyle = ballColor;
ctx.fill();
ctx.closePath();
}
//滑盤
function drawPalle(){
ctx.beginPath();
ctx.rect(paddleX,canvas.height-paddleHeight,paddleWidth,paddleHeight);
ctx.fill();
ctx.closePath();
}
//畫磚塊
function drawBricks(){
for(c=0;c<brickColumnCount;c++){
for(r=0;r<brickRowCount;r++){
if(bricks[c][r].status == 1){
var brickX = (c*(brickWidth + brickPadding))+brickOffsetLeft;
var brickY = (r*(brickHeight + brickPadding))+brickOffsetTop;
bricks[c][r].x = brickX;
bricks[c][r].y = brickY;
ctx.beginPath();
ctx.rect(brickX,brickY,brickWidth,brickHeight);
ctx.fillStyle = "#8f63cc";
ctx.fill();
ctx.closePath();
}
}
}
}
//份數
function drawScore(){
ctx.font = "16px Arial";
ctx.fillStyle = "#f44280";
ctx.fillText("Score:" + score,15,20)
}
//生命值
function drawLives(){
ctx.font = "16px Arial";
ctx.fillStyle = "#f44280";
ctx.fillText("Lives:" + lives,canvas.width-70,20)
}
//game over
function drawGo(){
ctx.font = "30px Arial";
ctx.fillStyle = "#f44280";
ctx.fillText("GAME OVER！！" ,150,200)
}
//磚塊消失和小球碰撞磚塊條件
function collisionDatection(){
for(c=0;c<brickColumnCount;c++){
for(r=0;r<brickRowCount;r++){
var b = bricks[c][r];
if(b.status == 1){
if(x>b.x && x<b.x+brickWidth && y>b.y && y<b.y+brickHeight){
dy = -dy;
b.status = 0;
score++;
if(score == brickColumnCount*brickRowCount){
document.location.reload();
x = canvas.width/2;
y = canvas.height-30;
dx = 3;
dy = -3;
paddleX = (canvas.width-paddleWidth)/2;
}
}
}
}
}
}
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
drawBall();
drawPalle();
drawBricks();
drawScore();
drawLives();
collisionDatection();
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius){
dx = -dx;//碰壁反向運動
}
if(y + dy < ballRadius){
dy = -dy;
}
else if(y + dy > canvas.height -(ballRadius + paddleHeight)){
if(x > paddleX && x< paddleX + paddleWidth){
dy = -dy;
}
else{
lives --;
if(lives == 0){
drawGo();
$(".start").attr("flage","flage");
lives = 4;
score = 0;
stop_ststus = false;
return;
}
else{
x = canvas.width/2;
y = canvas.height - 30;
dx = 3;
dy = -3;
paddleX = (canvas.width-paddleWidth)/2;
}
}
}
if(rightPressed && paddleX < canvas.width- paddleWidth){
paddleX+=5;
}
else if(leftPressed && paddleX > 0){
paddleX-=5;
}
x +=dx;
y +=dy;
stop = requestAnimationFrame(draw);
}
function mouseMoveHeader(e){
var relativeX = e.clientX - canvas.offsetLeft;
if(relativeX > 0&& relativeX < canvas.width){
paddleX = relativeX - paddleWidth/2;
}
}
//鍵盤數值
function keyDownHeadle(e){
if(e && e.keyCode == 39){
rightPressed = true;
}
else if(e && e.keyCode == 37){
leftPressed = true;
}
}
$(function(){
drawBall();
drawPalle();
drawBricks();
drawScore();
drawLives();
$(".start").click(function(){
stop_ststus = true;
if($(".start").attr("flage")=="flage"){
for(c=0;c<brickColumnCount;c++){
for(r=0;r<brickRowCount;r++){
bricks[c][r].status = 1;
}
}
$(".start").attr("flage","");
draw();
document.addEventListener("mousemove",mouseMoveHeader,false)
document.addEventListener("keymove",keyDownHeadle,false)
}
})
// drawGo();
})
![jQuery實作百度搜尋框[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)