Block crumpling and infinite loop's game

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

No:1330

←

Prev Next

→

Block crumpling and infinite loop
Developer User3309｜Date and time 23/6/18 11:10:11
Build time 45.364 sec｜Game capacity 5.922KB｜

Script

Example implementation of a block-crunching application:.

This application is、In a game called Block Crashing.、The ball is used to break the blocks piled up at the top of the screen. The player controls the paddle to adjust how the ball bounces and、The objective is to break all the blocks. The game can be operated with a smartphone and、You can move left or right by tapping the screen. You can also move left and right by tapping、Pictograms are used for score display and game over text display.

←

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>ブロックくずし</title>
</head>
<body>
    <canvas id="myCanvas" width="320" height="480"></canvas>

// ブロックを作成する関数
        for(c=0; c<brickColumnCount; c++) {
            bricks[c] = [];
            for(r=0; r<brickRowCount; r++) {
                bricks[c][r] = { x: 0, y: 0, status: 1 };
            }
        }

// キー操作の関数
        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 drawPaddle() {
            ctx.beginPath();
            ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
            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 drawBricks() {
            for(c=0; c<brickColumnCount; c++) {
                for(r=0; r<brickRowCount; r++) {
                    if(bricks[c][r].status == 1) {
                        var brickX = (r*(brickWidth+brickPadding))+brickOffsetLeft;
                        var brickY = (c*(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 drawScore() {
            ctx.font = "16px Arial";
            ctx.fillStyle = "#0095DD";
            ctx.fillText("Score: "+score, 8, 20);
        }

// ゲームオーバーの描画関数
        function drawGameOver() {
            ctx.font = "36px Arial";
            ctx.fillStyle = "#0095DD";
            ctx.fillText("Game Over", canvas.width/2-80, canvas.height/2);
        }

// ボールの当たり判定の関数
        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) {
                                alert("Congratulations! You won!");
                                document.location.reload();
                            }
                        }
                    }
                }
            }
        }

// メイン関数
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBricks();
            drawBall();
            drawPaddle();
            drawScore();
            collisionDetection();

if(y + dy < ballRadius) {
                dy = -dy;
            } else if(y + dy > canvas.height-ballRadius) {
                if(x > paddleX && x < paddleX + paddleWidth) {
                    dy = -dy;
                }
                else {
                    drawGameOver();
                    clearInterval(interval);
                }
            }

if(x + dx < ballRadius || x + dx > canvas.width-ballRadius) {
                dx = -dx;
            }

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

x += dx;
            y += dy;
        }

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

このアプリは、ブロックくずしというゲームで、画面上部に積み上がったブロックをボールで壊していくものです。パドルを操作してボールの跳ね返り方を調整し、ブロックを全て壊すことが目的です。スマホでも操作が可能で、画面タップで左右の移動ができます。また、スコア表示やゲームオーバー時の文字表示に絵文字が使われています。