building block scrabble's game

Click here for free DL of the app version that can save data.

No:1410

109

←

Prev Next

→

building block scrabble
Developer User3332｜Date and time 23/6/18 14:36:06
Build time 46.448 sec｜Game capacity 5.077KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
  <head>
    <title>ブロック崩し</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      canvas {
        border: solid 1px black;
      }
    </style>
  </head>
  <body>
    <canvas width="320" height="480"></canvas>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const canvas = document.querySelector('canvas');
        const context = canvas.getContext('2d');

// 画面サイズを求める
        const screenWidth = window.innerWidth;
        const screenHeight = window.innerHeight;

// キャンバスのサイズを調整
        canvas.width = screenWidth;
        canvas.height = screenHeight;

// ブロックの設定
        const blockWidth = 70;
        const blockHeight = 20;
        const blockMargin = 10;
        const blocks = [];
        const colors = ['🟥', '🟢', '🟡', '🔵'];

// パドルの設定
        const paddleWidth = 100;
        const paddleHeight = 20;
        const paddleMarginBottom = 50;
        let paddleX = (screenWidth / 2) - (paddleWidth / 2);

// ボールの設定
        const ballRadius = 10;
        let ballX = canvas.width / 2;
        let ballY = canvas.height / 2;
        let ballSpeedX = 5;
        let ballSpeedY = -5;

// スコアの設定
        let score = 0;

// ブロックを描画する
        function drawBlocks() {
          for (let row = 0; row < 4; row++) {
            for (let col = 0; col < 5; col++) {
              blocks.push({
                x: (col * (blockWidth + blockMargin)) + blockMargin,
                y: (row * (blockHeight + blockMargin)) + blockMargin + 50,
                isAlive: true,
                color: colors[row]
              });
            }
          }
        }

// ボールを描画する
        function drawBall() {
          context.beginPath();
          context.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
          context.fillStyle = 'black';
          context.fill();
          context.closePath();
        }

// パドルを描画する
        function drawPaddle() {
          context.fillStyle = 'black';
          context.fillRect(paddleX, canvas.height - paddleMarginBottom, paddleWidth, paddleHeight);
        }

// スコアを描画する
        function drawScore() {
          context.fillStyle = 'black';
          context.font = '20px Arial';
          context.fillText(`スコア: ${score}`, canvas.width - 100, 30);
        }

// ボールとブロックが当たっているかどうかを判定する
        function ballBlockCollision() {
          for (let i = 0; i < blocks.length; i++) {
            const b = blocks[i];

if (b.isAlive) {
              if (ballX > b.x && ballX < b.x + blockWidth && ballY > b.y && ballY < b.y + blockHeight) {
                ballSpeedY = -ballSpeedY;
                b.isAlive = false;
                score++;
              }
            }
          }
        }

// ボールとパドルが当たっているかどうかを判定する
        function ballPaddleCollision() {
          if (ballX > paddleX && ballX < paddleX + paddleWidth && ballY > canvas.height - paddleMarginBottom - paddleHeight && ballY < canvas.height - paddleMarginBottom) {
            ballSpeedY = -ballSpeedY;
          }
        }

// ボールが壁に当たっているかどうかを判定する
        function ballWallCollision() {
          if (ballX + ballRadius > screenWidth || ballX - ballRadius < 0) {
            ballSpeedX = -ballSpeedX;
          }

if (ballY - ballRadius < 0) {
            ballSpeedY = -ballSpeedY;
          }

if (ballY + ballRadius > screenHeight) {
            // ゲームオーバー
            clearInterval(game);
            alert('ゲームオーバー');
          }
        }

// パドルを動かす
        function movePaddle(e) {
          if (e.key === 'ArrowLeft') {
            paddleX -= 20;
          } else if (e.key === 'ArrowRight') {
            paddleX += 20;
          }

if (paddleX < 0) {
            paddleX = 0;
          }

if (paddleX > screenWidth - paddleWidth) {
            paddleX = screenWidth - paddleWidth;
          }
        }

// ゲームをスタートする
        function startGame() {
          drawBlocks();
          drawPaddle();
          drawScore();
          drawBall();

document.addEventListener('keydown', movePaddle);

const game = setInterval(() => {
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawBlocks();
            drawPaddle();
            drawScore();
            drawBall();
            ballBlockCollision();
            ballPaddleCollision();
            ballWallCollision();
            ballX += ballSpeedX;
            ballY += ballSpeedY;
          }, 30);
        }

startGame();
      });
    </script>
  </body>
</html>