<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bricks</title>
</head>
<body>
<canvas id="canvas3" width="500" height="500" style=" background:#333333;border:1px solid #000;">
your browser doesn't support this element!
</canvas>
<script type="text/javascript">
var vas = document.getElementById("canvas3");
if(vas && vas.getContext){
var o = vas.getContext("2d");
var x = 130, //圆心x
y = 430, //圆心y
r = 10, //圆半径r
dx=1.5, //圆心移动增量x
dy= -7, //圆心移动增量y
time = 10, //间隔时间
oWidth = 500, //canvas画布宽
oHeight = 500, //canvas画布高
wRect = 100, //接球的矩形的宽
hRect = 10, //接球的矩形的高
iLeft = oWidth/2, //接球矩形默认的left
dLeft = 5, //按键盘左右接球矩形水平增量
rightDown = false, //是否在按键盘右方向键
leftDown = false, //是否在按键盘左方向键
bricks, //砖块
rows = 5, //砖块行数
cols = 10, //砖块列数
padding = 1, //砖块间隔
wBricks = oWidth/cols - padding, //砖块宽度
hBricks = 12, //砖块的高度
color =[
[255,0,0],
[255,255,0],
[0,255,0],
[0,255,255],
[0,0,255],
[255,0,0]
],
colors,//颜色
randomColor;
function initBricks(){
bricks = new Array(rows);
for(var k = 0;k < rows; k++){
bricks[k] = new Array(cols);
for(var n = 0;n < cols; n++){
bricks[k][n] = 1;
}
}
}
initBricks();
function initColor(){
colors = new Array(rows);
for(var k = 0;k < rows; k++){
colors[k] = new Array(cols);
for(var n = 0;n < cols; n++){
randomColor = Math.floor(Math.random()*6);
colors[k][n] = "rgb("+color[randomColor][0]+","+color[randomColor][1]+","+color[randomColor][2]+")";
}
}
}
initColor();
var t = setInterval(function(){
o.clearRect(0,0,oWidth,oHeight);
o.beginPath();
for(var s = 0;s < rows; s++){
for(var m = 0;m < cols; m++){
if(bricks[s][m] == 1){
o.fillStyle = colors[s][m];
o.fillRect(m * (wBricks + padding) + padding,s * (hBricks + padding) + padding,wBricks,hBricks);
}
}
}
o.fillStyle="#000";
o.arc(x,y,r,0,Math.PI*2,true);
if(rightDown){
iLeft += dLeft;
if(iLeft + wRect >= oWidth){
iLeft = oWidth - wRect;
}
}
if(leftDown){
iLeft -= dLeft;
if(iLeft <= 0){
iLeft = 0;
}
}
o.fillRect(iLeft,oHeight - hRect,wRect,hRect);
o.closePath();
o.fill();
if(y - r <= rows * (hBricks + padding)){
var this_col = Math.floor(x / (wBricks + padding)),
this_row = Math.floor((y - r) / (hBricks + padding));
if(this_row == rows){
this_row = this_row -1;
}
var this_bricks = bricks[this_row][this_col];
if(this_bricks == 1){
bricks[this_row][this_col] = 0;
dx = -dx;
dy = -dy;
}
}
if(x + r + dx > oWidth || x - r + dx < 0){
dx = -dx;
}
if(y - r + dy < 0){
dy = -dy;
}else if(y + r + dy > oHeight - hRect){
if(x + r > iLeft && x - r < iLeft + wRect){
dy = -dy;
}else{
if(y + r + dy > oHeight){
clearInterval(t);
t = null;
}
}
}
x += dx;
y += dy;
},time);
function keyFn(e){
var E = e || window.event;
document.onkeydown = function(E){
if(E.keyCode == 39){
rightDown = true;
}else if(E.keyCode == 37){
leftDown = true;
}
};
document.onkeyup = function(E){
if(E.keyCode == 39){
rightDown = false;
}else if(E.keyCode == 37){
leftDown = false;
}
}
}
vas.onmousemove = function(e){
var E = e || window.event;
iLeft = getMous(E).x - getPos(this).x;
if(iLeft + wRect >= oWidth){
iLeft = oWidth - wRect;
}
}
keyFn();
}
function getPos(obj){
var X = 0,Y = 0,D = document.documentElement || document.body;
if(obj.getBoundingClientRect){
X = obj.getBoundingClientRect().left + D.scrollLeft - D.clientLeft;
Y = obj.getBoundingClientRect().top + D.scrollTop - D.clientTop;
}else{
while(obj && obj != document.body){
X += obj.offsetLeft;
Y += obj.offsetTop;
obj = obj.offsetParent;
}
}
return {
"x" : X,
"y" : Y
}
}
function getMous(e){
var e = e || window.event,X = Y = 0,D = document.documentElement || document.body;
if(e.pageX && e.pageY){
X = e.pageX;
Y = e.pageY;
}else{
X = e.clientX + D.scrollLeft - D.clientLeft;
Y = e.clientY + D.scrollTop - D.clientTop;
}
return {
"x" : X,
"y" : Y
}
}
</script>
</body>
</html>
- 大小: 11 KB
分享到：
相关推荐
在提供的"Hit-The-Bricks-gh-pages"文件中，包含了游戏的完整源代码。主要的JavaScript文件可能包括`game.js`（包含游戏逻辑）、`styles.css`（定义游戏样式）以及HTML文件（构建游戏界面）。通过阅读和理解这些文件...
### Unity游戏源码2-82打砖块游戏Breakout-Game-Starter-Kit #### 知识点一：Unity引擎基础概述 Unity是一款由Unity Technologies开发的跨平台游戏开发工具，支持多种平台的游戏开发，包括Windows、Mac、iOS、...
Phaser是由Photon Storm公司开发的一个免费开源的HTML5游戏框架，支持Canvas和WebGL渲染，适用于创建2D游戏。Phaser包含了丰富的物理引擎、精灵动画系统、声音管理、输入处理等功能，使得开发者能够快速地搭建游戏...
在本文中，我们将深入探讨如何利用Vanilla JS（即原生JavaScript）和Canvas API来创建这样一个游戏。 首先，`Canvas`是HTML5的一个重要特性，它允许开发者在网页上绘制2D图形。在打砖块游戏中，Canvas将用于绘制...
在`game.js`文件中，获取`canvas`元素并设置其尺寸。创建一个`RenderingContext`对象，这是你在游戏中绘制所有元素的地方： ```javascript const canvas = document.getElementById('gameCanvas'); const ctx = ...