Block breaking destruction game like Tetris! DESTROY EVERYTHING Destroy the game completely Destruction is everything! This game-destroying action 💥!'s game

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

No:3212

371

←

Prev Next

→

Block breaking destruction game like Tetris! DESTR..ALL
Developer anonymous｜Date and time 23/8/14 16:22:41
Build time 5807 sec｜Game capacity 5.807KB｜

Script

こんにちは！私はAIアシスタントです。Tetrisのようなブロック崩しゲームを1つのHTMLファイルとして実装し、JavaScriptを含めました。スマートフォンで遊ぶことができますよ。では、実際のコードを記述しましょう！

このコードは、ブロックを破壊して得点を獲得するゲームです。スマートフォンで操作できるように、キーボードの左右の矢印キーを使用してパドルを動かすようにしました。ゲームが完全に破壊されたときに、「Congratulations! You have destroyed everything!」というアラートが表示されます。ゲームオーバーになったときは、「Game Over! You have failed to destroy everything.」というメッセージが表示されます。それでは、楽しいゲームプレイをお楽しみください！💥

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Block Destruction Game</title>
   <style>
      canvas{
         border: 1px solid #000000;
      }
   </style>
</head>
<body>
   <canvas id="myCanvas"></canvas>

//Block setup
      var blockWidth = 50;
      var blockHeight = 20;
      var blockPadding = 10;
      var blockRows = 5;
      var blockCols = 8;

//Ball setup
      var ballRadius = 10;
      var ballX = canvas.width/2;
      var ballY = canvas.height-30;
      var ballDX = 3;
      var ballDY = -3;

//Paddle setup
      var paddleHeight = 10;
      var paddleWidth = 100;
      var paddleX = (canvas.width-paddleWidth)/2;
      
      //Controls setup
      var rightPressed = false;
      var leftPressed = false;

//Score setup
      var score = 0;

//Block array setup
      var blocks = [];
      for(var c=0; c<blockCols; c++) {
         blocks[c] = [];
         for(var r=0; r<blockRows; r++) {
            blocks[c][r] = { x: 0, y: 0, status: 1 };
         }
      }

//Event listeners
      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 drawScore() {
         ctx.font = "16px Arial";
         ctx.fillStyle = "#0095DD";
         ctx.fillText("Score: "+score, 8, 20);
      }

function drawBall() {
         ctx.beginPath();
         ctx.arc(ballX, ballY, 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 draw() {
         //Clear canvas
         ctx.clearRect(0, 0, canvas.width, canvas.height);

//Draw everything
         drawBlocks();
         drawBall();
         drawPaddle();
         drawScore();

//Collision detection
         collisionDetection();

//Ball bounce off walls and paddle
         if(ballX + ballDX > canvas.width-ballRadius || ballX + ballDX < ballRadius) {
            ballDX = -ballDX;
         }
         if(ballY + ballDY < ballRadius) {
            ballDY = -ballDY;
         }
         else if(ballY + ballDY > canvas.height-ballRadius) {
            if(ballX > paddleX && ballX < paddleX + paddleWidth) {
               ballDY = -ballDY;
            }
            else {
               alert("Game Over! You have failed to destroy everything.");
               document.location.reload();
            }
         }

//Paddle movement
         if(rightPressed && paddleX < canvas.width-paddleWidth) {
            paddleX += 7;
         }
         else if(leftPressed && paddleX > 0) {
            paddleX -= 7;
         }

//Ball movement
         ballX += ballDX;
         ballY += ballDY;
      }

setInterval(draw, 10);
   </script>
</body>
</html>

それでは、楽しいゲームプレイをお楽しみください！💥