帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 简易打方块666
简易打方块666
浏览:738次
-
评论:0次
-
发布时间:2017-09-29
Html
Css
Js
* { padding:0; margin:0; } canvas { background:darkgreen; display:block; margin:0 auto; }
//Declaring the canvas and drawing variables: var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); //Time Variable: var prevTime = new Date().getTime(); var time = null; var newTime = null; //Variables for the circle: var startX = canvas.width / 3; var x = startX; var startDx = 0.3; var dx = startDx; var startY = canvas.height - 30; var y = startY; var startDy = 0.3; var dy = -startDy; var ballRadius = 10; //Variables for the paddle: var paddleHeight = 10; var paddleWidth = 75; var paddleDx = 3; var paddleX = (canvas.width - paddleWidth) / 3; var rightPressed = false; var leftPressed = false; //Variables for the bricks: var brickRowCount = 3; var brickColumnCount = 10; var brickWidth = 35; var brickHeight = 20; var brickPadding = 5; var brickOffsetTop = 30; var brickOffsetLeft = 30; //Score: var score = 0; //Lives: var lives = 3; //Creating an array to store the bricks: 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 for drawing the bricks: 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 = "#0095DD"; //Colour Blue ctx.fill(); ctx.closePath(); } } } } //Function for drawing the ball: function drawBall() { ctx.beginPath(); //Starts drawing the circle ctx.arc(x, y, ballRadius, 0, Math.PI * 2); //Defines dimensions of the circle ctx.fillStyle = "#0095DD"; //Fill colour (Blue) ctx.fill(); ctx.closePath(); //Stops Drawing the circle } //Function for drawing the paddle at the bottom of the screen: function drawPaddle() { ctx.beginPath(); ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } //Loop function for drawing all the elements: function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); //Clears previous ball from the previous frame newTime = new Date().getTime(); time = newTime - prevTime; prevTime = newTime; drawBricks(); drawBall(); //Calls the drawBall(); function to draw the circle drawPaddle(); drawScore(); drawLives(); collisionDetection(); if (y + dy < ballRadius) { //Conditional if the ball hits the top/bottom edges of the canvas dy = Math.abs(dy); } else if (y + dy > canvas.height - ballRadius) { if (x > paddleX && x < paddleX + paddleWidth) { dy = -dy; } else { lives--; //Reduce lives variable by 1 if (!lives) { //if there are no lives left: document.location.reload(); } else { x = startX; //Positions the x-coordinate of the ball y = startY; //Positions the y-coordinate of the ball dx = startDx; dy = -startDy; paddleX = (canvas.width - paddleWidth) / 2; } } } if (x + dx < ballRadius) { //Conditional if the ball hits the right/left edges of the canvas dx = Math.abs(dx); } else if (x + dx > canvas.width - ballRadius) { dx = -Math.abs(dx); } if (rightPressed && paddleX < canvas.width - paddleWidth) { paddleX += paddleDx; } else if (leftPressed && paddleX > 0) { paddleX -= paddleDx; } x += dx * time; //updates the x-position of the circle y += dy * time; //updates the y-position of the circle } document.addEventListener("keydown", keyDownHandler, false); document.addEventListener("keyup", keyUpHandler, false); function keyDownHandler(e) { if (e.keyCode == 39) { rightPressed = true; } else if (e.keyCode == 37) { leftPressed = true; } } function keyUpHandler(e) { if (e.keyCode == 39) { rightPressed = false; } else if (e.keyCode == 37) { leftPressed = false; } } //Function for collision detection between the ball and the bricks, and increasing the score if the bricks hit, and for checking if all bricks are destroyed: function collisionDetection() { 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 == brickRowCount * brickColumnCount) { document.location.reload(); } } } } } } //Function for drawing the score variable onto the screen: function drawScore() { ctx.font = "16px Arial"; ctx.fillStyle = "#0095DD"; ctx.fillText("Score: " + score, 8, 20); } //Function for drawing the lives variable onto the screen: function drawLives() { ctx.font = "16px Arial"; ctx.fillStyle = "#0095DD"; ctx.fillText("Lives: " + lives, canvas.width - 65, 20); } //Mouse Controls; document.addEventListener("mousemove", mouseMoveHandler, false); function mouseMoveHandler(e) { var relativeX = e.clientX - canvas.offsetLeft; if (relativeX > 0 && relativeX < canvas.width) { paddleX = relativeX - paddleWidth / 2; } } //Animate Everything through the draw() function: setInterval(draw, 0);
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.3.2
<!doctype html><html><head><meta charset="utf-8"><title>简易打方块666-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:用canvas和js写的简易打方块
canvas编写背景变换
原生JS写出手风琴
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
738
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值