Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
* { padding: 0; margin: 0; background:#2b292b; } canvas { background: #2b292b; display: block; margin: 0 auto; padding:20px auto; border:1px solid #8f63cc }
JavaScript
var canvas = document.getElementById("briksCanvas"); var ctx = canvas.getContext("2d"); var ballRadius = 10; var ballColor = "#f44280"; var speed = 10; var x = canvas.width/2; var y = canvas.height-30; var dx = -2; var dy = -2; var paddleHeight = 15; var paddleWidth = 75; var paddleX = (canvas.width-paddleWidth)/2; var rightPressed = false; var leftPressed = false; //bricks 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; document.addEventListener("keydown", keyDownHandler, false); document.addEventListener("keyup", keyUpHandler, false); document.addEventListener("mousemove", mouseMoveHandler, false); var bricks = []; for(c=0; c
0 && relativeX < canvas.width) { paddleX = relativeX - paddleWidth/2; } } function collisionDetection() { for(c=0; c
b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) { dy = -dy; b.status = 0; score++; if(score == brickRowCount*brickColumnCount) { document.location.reload(); } } } } } } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBall(); drawPaddle(); drawBricks(); drawScore(); drawLives(); collisionDetection(); 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) { drawGO(); } 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; requestAnimationFrame(draw); } draw();
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>打砖块-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号