當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript/html breakout game 打砖块游戏（附代码）
生活随笔
收集整理的這篇文章主要介紹了
javascript/html breakout game 打砖块游戏（附代码）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
以下的打磚塊游戲主要從3個方面練習javascript/html：?
1. 游戲開始界面/菜單
2. 游戲音樂/聲音：與Python pygame 不同的是， html 游戲音樂不可能自動播放，必須用戶介入（比如按一個按鈕等）才能播放
3. 游戲本身（主代碼參考：MDN Web Docs）
以下是全部代碼（音樂、聲音文件沒有附帶，感興趣的朋友可以把自己喜歡的音樂加入）：
<head><style>canvas { background: #eee; display: none; margin: 0 auto; }#StartScreen,#GameCanvas{height: 200px;width: 400px;background:blue;position: fixed;top: 50%;left: 50%;margin-top: -100px;margin-left: -200px;text-align:center;}#StartButton:hover {cursor:pointer;background:blue;} #QuitButton:hover {cursor:pointer;background:blue;} </style></head><body> <canvas id="myCanvas" width="640" height="480"></canvas><div id="StartScreen"> <h1>Breakout</h1><input id="StartButton" type="button" value="StartGame" onclick="startgame()"/> <br> <br><input id="QuitButton" type="button" value="QuitGame" onclick="quitgame()"/></div><script> //https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var Box={x:1,y:1,width:myCanvas.width-2,height:myCanvas.height-2}; var mySound=new Audio("Pickup_Coin.wav"); var bkSound=new Audio("snd.mp3"); const correctButton = document.getElementById("correct"); window.addEventListener("click", function(){ bkSound.play(); }); var ballRadius = 10; var x = canvas.width/2; var y = canvas.height-30; var dx = 2; var dy = -2;var paddleHeight = 10; var paddleWidth = 75; var paddleX = (canvas.width-paddleWidth)/2;var rightPressed = false; var leftPressed = false;var brickRowCount = 5; var brickColumnCount = 7; var brickWidth = 75; var brickHeight = 20; var brickPadding = 10; var brickOffsetTop = 30; var brickOffsetLeft = 30;var score; var lives;initgame();function initgame() {score=0;lives=3; document.getElementById("myCanvas").style.display = 'none';document.getElementById("StartScreen").style.display='block'; }function sleep(milliseconds) {var start = new Date().getTime();//onedead();for (var i = 0; i < 1e7; i++) { if ((new Date().getTime() - start) > milliseconds){ break;}} }class Ball {constructor(context,x,y,r,vx,vy) {this.x=x;this.y=y;this.r=r;this.color="#0095DD";this.vx=vx;this.vy=vy;this.context=context;}draw() {this.context.fillStyle =this.color;// "#ff0";this.context.beginPath();this.context.arc(this.x,this.y,this.r,0,2*Math.PI,1);this.context.fill(); this.context.stroke(); }update(dt) { this.x+=dt*this.vx;this.y+=dt*this.vy;//document.getElementById("dt").value = this.y ;//check edge collisionif (this.y+this.r> Box.height){this.vy = -Math.abs(this.vy) ;this.y = Box.height - this.r; }if (this.x+this.r>Box.width) {this.vx = -Math.abs(this.vx) ;this.x = Box.width - this.r; }if (this.y-this.r< Box.y){this.vy = Math.abs(this.vy);this.y = this.r+Box.y; }if (this.x-this.r<Box.x) {this.vx = Math.abs(this.vx);this.x = this.r+Box.x; } }}function drawFrame() {// Draw background and a borderctx.fillStyle = "#d0d0d0";ctx.fillRect(0, 0, myCanvas.width, myCanvas.height);ctx.strokeStyle="#000000";ctx.lineWidth=2;ctx.strokeRect(Box.x,Box.y,Box.width,Box.height);} function drawLives() {ctx.font = "16px Arial";ctx.fillStyle = "#0095DD";ctx.fillText("Lives: "+lives, canvas.width-65, 20); } var bricks = []; for(var c=0; c<brickColumnCount; c++) {bricks[c] = [];for(var r=0; r<brickRowCount; r++) {bricks[c][r] = { x: 0, y: 0,status:1 };} }document.addEventListener("keydown", keyDownHandler, false); document.addEventListener("keyup", keyUpHandler, false); document.addEventListener("mousemove", mouseMoveHandler, false);function mouseMoveHandler(e) {var relativeX = e.clientX - canvas.offsetLeft;if(relativeX > 0 && relativeX < canvas.width) {paddleX = relativeX - paddleWidth/2;} } function keyDownHandler(e) {if(e.code == "ArrowRight") {rightPressed = true;}else if(e.code == 'ArrowLeft') {leftPressed = true;}document.getElementById("second").value=rightPressed;document.getElementById("minute").value=e.code; // KeyboardEvent.code value } function keyUpHandler(e) {if(e.code == "ArrowRight") {rightPressed = false;}else if(e.code == 'ArrowLeft') {leftPressed = false;}}function drawBricks() {for(var c=0; c<brickColumnCount; c++) {for(var 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";ctx.fill();ctx.closePath();}}} }function drawBall() {ctx.beginPath();ctx.arc(x, y, ballRadius, 0, Math.PI*2);ctx.fillStyle = "#0095DD";ctx.fill();ctx.closePath();}function drawPaddle() {ctx.beginPath();ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);ctx.fillStyle = "#0095DD";ctx.fill();ctx.closePath();} function collisionDetection() {for(var c=0; c<brickColumnCount; c++) {for(var 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+=10;mySound.play();if(score == brickRowCount*brickColumnCount) {alert("YOU WIN, CONGRATULATIONS!");document.location.reload();clearInterval(interval); // Needed for Chrome to end game } }}}} }function drawScore() {ctx.font = "16px Arial";ctx.fillStyle = "#0095DD";ctx.fillText("Score: "+score, 8, 20); } ball=new Ball(ctx,x,y,ballRadius,dx,dy);function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);drawFrame();drawBricks();drawBall();drawLives();//ball.update(10);//ball.draw();drawPaddle();collisionDetection()drawScore();if(y - ballRadius < Box.y) {dy = -dy;}if (x+dx+ballRadius>Box.width) {dx=-dx;}if (x-ballRadius<Box.x) {dx=-dx;}if (y+ballRadius>Box.height) {if(x > paddleX && x < paddleX + paddleWidth) {dy = -dy;}else {lives-=1;//let timeID=setTimeout(onedead(),50000);//clearTimeout(timeID);sleep(1000);//setTimeout("onedead()",1000);if (lives<=0) gameover();else {x = canvas.width/2;y = canvas.height-30;dx = 2;dy = -2;paddleX = (canvas.width-paddleWidth)/2;} }} if(rightPressed && paddleX < Box.width-paddleWidth) {paddleX += 7;}else if(leftPressed && paddleX > 0) {paddleX -= 7;} x+=dx;y+=dy;} //draw(); var game; function startgame() { document.getElementById("StartScreen").style.display='none';document.getElementById("myCanvas").style.display = 'block';game=setInterval(draw,10);}function onedead() {ctx.font = "16px Arial";ctx.fillStyle = "#FF0000";txt="one dead";ctx.fillText(txt,myCanvas.width/2-ctx.measureText(txt).width/2, myCanvas.height/2); }function gameover() {ctx.font = "32px Arial";ctx.fillStyle = "#FF0000";txt="Game Over";ctx.fillText(txt,myCanvas.width/2-ctx.measureText(txt).width/2, myCanvas.height/2);//document.location.reload();clearInterval(game); initgame(); } </script> </body>總結
以上是生活随笔為你收集整理的javascript/html breakout game 打砖块游戏（附代码）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux nginx 内存占用,ngi
- 下一篇： javascript与css压缩工具