word
word
1 / 10
word
使用canvas + js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="" style="text-align:center;">
<canvas id="" width="480" height="320"></canvas>
</div>
<script type="text/javascript">
var canvas = ("canvas");
var paint = ("2d");
//画出游戏画布：黑色
="black";
(0,0,,);
word
word
2 / 10
word
/*
* 游戏中每个元素：1，小球、2，砖块、3，挡板；
*/
//小球：先画一个小球，让小球滚动起来；
var ball_x=40;
var ball_y=190;
var ball_r=10;
var ball_speed_x=5;
var ball_speed_y=5;
//砖块：定义砖块类，创建砖块对象；
function Brick(x,y,width,height){
= x;
= y;
= width;
= height;
= true;
}
word
word
3 / 10
word
//创建砖块
var brick_x = 23;
var brick_y = 20;
var brick_width = 50;
var brick_height = 10;
var x_off = 5;
var y_off = 5;
//首先，创建一个砖块
// var brick = new Brick(brick_x,brick_y,brick_width,brick_height);
//创建50个砖块
var bricks = new Array();
for(i=0;i<50;i++){
//focuson: 注意if里面的条件
if(brick_x + brick_width > ){
brick_x = 23;
brick_y += brick_height + y_off;
}
word
word
4 / 10
word
//focuson:注意顺序，先创建一个砖块，然后再给x坐标++;
var brick = new Brick(brick_x,brick_y,brick_width,brick_height);
brick_x += brick_width + x_off;
(brick);
}
//挡板：
HTML5打砖块游戏canvas 来自淘豆网m.daumloan.com转载请标明出处.
