canvans挡板小球游戏

ゞ浴缸里的玫瑰 2024-04-07 14:50 71阅读 0赞

<canvas id="myCanvas" width="480" height="320"></canvas>

* {
        
      padding: 0;
      margin: 0;
    }
    
    canvas {
        
      background: #eee;
      display: block;
      margin: 0 auto;
    }

var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    var ballRadius = 10;
    var paddleHeight = 10;
    var paddleWidth = 75;
    var paddleX = (canvas.width - paddleWidth) / 2;
    var rightPressed = false;
    var leftPressed = false;
    var brickRowCount = 3;
    var brickColumnCount = 5;
    var brickWidth = 75;
    var brickHeight = 20;
    var brickPadding = 10;
    var brickOffsetTop = 30;
    var brickOffsetLeft = 30;
    var bricks = [];
    var score = 0;
    var lives = 3;
    var basecolor = "#0095DD";
    var ballcolor = basecolor;
    var paddlecolor = basecolor;
    var btickcolor = basecolor;
    var slcolor = basecolor;
    var scoretext = "Score";
    var livetext = "Lives";
    var wintext = "YOU WIN, CONGRATULATIONS!";
    var losetext = "GAME OVER!";
    var username = "\u94B1\u8F89";
    for (c = 0; c < brickColumnCount; c++) {
        
      bricks[c] = [];
      for (r = 0; r < brickRowCount; r++) {
        
        bricks[c][r] = {
         x: 0, y: 0, status: 1 };
      }
    }
    var brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
    var consoleB = `color:#6cf;background:none;
                padding:5px 0;border: 1px solid #6cf;`;
    var brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
    var consoleA = `color:#fff;background:#6cf;
            padding:5px 0;border: 1px solid #6cf;`;
    ctx.beginPath();
    ctx.rect(160, 10, 100, 40);
    ctx.stroke();
    ctx.closePath();
    var x = canvas.width / 2;
    var y = canvas.height - 30;
    var dx = 2;
    var dy = -2;
    function collisionDetection() {
        
      if (!username && !usertext) {
        
        return false;
      }
      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++;
              if (score == brickRowCount * brickColumnCount) {
        
                alert(wintext);
                document.location.reload();
              }
            }
          }
        }
      }
    }
    function drawScore() {
        
      ctx.font = "16px Arial";
      ctx.fillStyle = slcolor;
      ctx.fillText(scoretext + ": " + score, 8, 20);
    }
    function drawLives() {
        
      ctx.font = "16px Arial";
      ctx.fillStyle = slcolor;
      ctx.fillText(livetext + ": " + lives, canvas.width - 65, 20);
    }
    function drawBall() {
        
      ctx.beginPath();
      ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
      ctx.fillStyle = ballcolor;
      ctx.fill();
      drawBricks();
      ctx.closePath();
      if (y + dy < 0) {
        
        dy = -dy;
      }
      if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
        
        dx = -dx;
      }
      if (y + dy < ballRadius) {
        
        dy = -dy;
      } else if (y + dy > canvas.height - ballRadius) {
        
        if (x > paddleX && x < paddleX + paddleWidth) {
        
          dy = -dy;
        } else {
        
          lives--;
          if (!lives) {
        
            alert(losetext);
            document.location.reload();
          } else {
        
            x = canvas.width / 2;
            y = canvas.height - 30;
            dx = 2;
            dy = -2;
            paddleX = (canvas.width - paddleWidth) / 2;
          }
        }
      }
    }
    function drawPaddle() {
        
      ctx.beginPath();
      ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
      ctx.fillStyle = paddlecolor;
      ctx.fill();
      ctx.closePath();
    }
    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 = btickcolor;
            ctx.fill();
            ctx.closePath();
          }
        }
      }
    }
    function draw() {
        
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBall();
      drawPaddle();
      collisionDetection();
      drawScore();
      drawLives();
      x += dx;
      y += dy;
      if (rightPressed && paddleX < canvas.width - paddleWidth) {
        
        paddleX += 7;
      } else if (leftPressed && paddleX > 0) {
        
        paddleX -= 7;
      }
      requestAnimationFrame(draw);
    }
    function keyDownHandler(e) {
        
      if (e.keyCode == 39) {
        
        rightPressed = true;
      } else if (e.keyCode == 37) {
        
        leftPressed = true;
      }
    }
    var usertext =
      "\u4E00\u652F\u7A7F\u4E91\u7BAD,\u5343\u519B\u4E07\u9A6C\u6765\u76F8\u89C1!";
    console.log("\n %c " + username + " %c " + usertext, consoleA, consoleB);
    function keyUpHandler(e) {
        
      if (e.keyCode == 39) {
        
        rightPressed = false;
      } else if (e.keyCode == 37) {
        
        leftPressed = false;
      }
    }
    // 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;
      }
    }
    draw();

See the Pen [ canvans挡板小球游戏][canvans] by qianhuiya ( [@quinhua][quinhua]) on [CodePen][].

[canvans]: https://codepen.io/quinhua/pen/NWMNPGv
[quinhua]: https://codepen.io/quinhua
[CodePen]: https://codepen.io

发表评论取消回复

表情：

评论列表（有 0 条评论，71人围观）

还没有评论，来说两句吧...

相关阅读

相关找挡板最终程序

/ 程序说明放置挡板，为了保证挡板不超过误差，更新时间：8月19日18点更新时间：8月20日16点 / include "Dangban.h"

快来打我*/ 2022年10月25日 01:35/ 0 赞/ 123 阅读

相关 37-JavaScript-DOM-小游戏-小球碰撞后折返

参考: [Cascading Style Sheet 2.0 中文手册\_.chm][Cascading Style Sheet 2.0 _.chm] 1.

￡神魔★判官ぃ/ 2022年09月18日 12:52/ 0 赞/ 199 阅读

相关取球游戏

今盒子里有n个小球，A、B两人轮流从盒中取球，每个人都可以看到另一个人取了多少个，也可以看到盒中还剩下多少个，并且两人都很聪明，不会做出错误的判断。我

怼烎@/ 2022年08月08日 14:37/ 0 赞/ 150 阅读

相关双色球小游戏

import java.util.Arrays; import java.util.Random; import java.util.Scanner;

今天药忘吃喽~/ 2022年06月17日 09:21/ 0 赞/ 320 阅读

相关 pygame 大球吃小球

import pygame, random, math 介于面向对象编程的理解不深,能写出来已实属不易,我就将我复盘的代码贴出来,自我反省. 其实不想写注释的,

素颜马尾好姑娘i/ 2022年05月29日 04:55/ 0 赞/ 204 阅读

相关 Java 实战：桌球小游戏

源码： import java.awt.; import javax.swing.; public class BallGame2

た入场券/ 2022年05月09日 05:33/ 0 赞/ 202 阅读

相关 Python大球吃小球

本小游戏采用了pygame模块 1.产生随机颜色的小球。2.小球具有移动、吃别的小球、绘制这3个方法。3.鼠标点击事件上源码 // 大球吃小球

分手后的思念是犯贱/ 2022年04月25日 10:44/ 0 赞/ 392 阅读

相关 java编写小游戏大球吃小球

java编写小游戏大球吃小球游戏简介项目结构 Direction类 Ball类 MyBall类 OtherBall类 Sel

￡神魔★判官ぃ/ 2022年03月15日 13:08/ 0 赞/ 373 阅读

相关【Java】碰撞小球游戏

package 游戏; import javax.swing.; import java.awt.; public clas

我会带着你远行/ 2022年01月31日 07:13/ 0 赞/ 308 阅读

相关 zzuli 1530 小L玩滚球游戏——————思维

[1530: 小L玩滚球游戏][1530_ _L] 时间限制: 1 Sec 内存限制: 128 MB 提交: 54 解决: 18 题目描述小L正在玩滚球游戏，

比眉伴天荒/ 2021年11月26日 20:44/ 0 赞/ 174 阅读