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

No:1287

147

←

Prev Next

→

A snake game mixed with tetris
Developer User3280｜Date and time 23/6/18 9:54:23
Build time 63.661 sec｜Game capacity 7.816KB｜

Script

Snake Tetris

Puntaje: 0

Game Over

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Snake Tetris</title>

canvas {
            background-color: #000;
        }

#score {
            font-size: 24px;
            font-weight: bold;
            margin-top: 10px;
        }

#game-over {
            display: none;
            font-size: 48px;
            font-weight: bold;
            color: #f00;
            text-shadow: 2px 2px #000;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <h1 id="title">Snake Tetris</h1>
    <canvas id="canvas" width="320" height="480"></canvas>
    <div id="score">Puntaje: 0</div>
    <div id="game-over">Game Over</div>

// Clases
        function Block(col, row) {
            this.col = col;
            this.row = row;
        }

// Métodos de clase
        Block.prototype.drawSquare = function (color) {
            var x = this.col * blockSize;
            var y = this.row * blockSize;
            ctx.fillStyle = color;
            ctx.fillRect(x, y, blockSize, blockSize);
        };

Block.prototype.drawCircle = function (color) {
            var centerX = this.col * blockSize + blockSize / 2;
            var centerY = this.row * blockSize + blockSize / 2;
            ctx.fillStyle = color;
            circle(centerX, centerY, blockSize / 2, true);
        };

Block.prototype.equal = function (otherBlock) {
            return this.col === otherBlock.col && this.row === otherBlock.row;
        };

// Clase Snake
        function Snake() {
            this.segments = [
                new Block(7, 5),
                new Block(6, 5),
                new Block(5, 5)
            ];
            this.direction = "right";
            this.nextDirection = "right";
        }

// Métodos de clase Snake
        Snake.prototype.draw = function () {
            for (var i = 0; i < this.segments.length; i++) {
                this.segments[i].drawSquare("#fff");
            }
        };

Snake.prototype.move = function () {
            var head = this.segments[0];
            var newHead;

this.direction = this.nextDirection;

if (this.direction === "right") {
                newHead = new Block(head.col + 1, head.row);
            } else if (this.direction === "down") {
                newHead = new Block(head.col, head.row + 1);
            } else if (this.direction === "left") {
                newHead = new Block(head.col - 1, head.row);
            } else if (this.direction === "up") {
                newHead = new Block(head.col, head.row - 1);
            }

if (this.checkCollision(newHead)) {
                console.log("Colisión");
                gameOver.style.display = "block";
                stopGame();
                return;
            }

this.segments.unshift(newHead);

if (newHead.equal(apple.position)) {
                console.log("Manzana");
                scoreCount++;
                score.innerHTML = "Puntaje: " + scoreCount;
                apple.move();
            } else {
                this.segments.pop();
            }
        };

Snake.prototype.checkCollision = function (head) {
            var leftCollision = (head.col === 0);
            var topCollision = (head.row === 0);
            var rightCollision = (head.col === widthInBlocks - 1);
            var bottomCollision = (head.row === heightInBlocks - 1);

var wallCollision = leftCollision || topCollision || rightCollision || bottomCollision;

var selfCollision = false;

for (var i = 0; i < this.segments.length; i++) {
                if (head.equal(this.segments[i])) {
                    selfCollision = true;
                }
            }

return wallCollision || selfCollision;
        };

Snake.prototype.setDirection = function (newDirection) {
            if (this.direction === "up" && newDirection === "down") {
                return;
            } else if (this.direction === "right" && newDirection === "left") {
                return;
            } else if (this.direction === "down" && newDirection === "up") {
                return;
            } else if (this.direction === "left" && newDirection === "right") {
                return;
            }

this.nextDirection = newDirection;
        };

// Clase Apple
        function Apple() {
            this.position = new Block(10, 10);
        }

// Métodos de clase Apple
        Apple.prototype.draw = function () {
            this.position.drawCircle("#f00");
        };

Apple.prototype.move = function () {
            var randomCol = Math.floor(Math.random() * (widthInBlocks - 2)) + 1;
            var randomRow = Math.floor(Math.random() * (heightInBlocks - 2)) + 1;
            this.position = new Block(randomCol, randomRow);
        };

// Funciones del juego
        function circle(x, y, radius, fillCircle) {
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, Math.PI * 2, false);

if (fillCircle) {
                ctx.fill();
            } else {
                ctx.stroke();
            }
        }

function onKeyDown(event) {
            var key = event.keyCode;
            var newDirection;

if (key === 37) {
                newDirection = "left";
            } else if (key === 38) {
                newDirection = "up";
            } else if (key === 39) {
                newDirection = "right";
            } else if (key === 40) {
                newDirection = "down";
            } else {
                return;
            }

snake.setDirection(newDirection);
        }

function drawBorder() {
            ctx.fillStyle = "#999";
            ctx.fillRect(0, 0, canvas.width, blockSize);
            ctx.fillRect(0, canvas.height - blockSize, canvas.width, blockSize);
            ctx.fillRect(0, 0, blockSize, canvas.height);
            ctx.fillRect(canvas.width - blockSize, 0, blockSize, canvas.height);
        }

function startGame() {
            snake = new Snake();
            apple = new Apple();
            scoreCount = 0;
            score.innerHTML = "Puntaje: " + scoreCount;
            gameOver.style.display = "none";

clearInterval(intervalId);
            intervalId = setInterval(function () {
                ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBorder();
                snake.move();
                snake.draw();
                apple.draw();
            }, 150);
        }

function stopGame() {
            clearInterval(intervalId);
            canvas.removeEventListener("keydown", onKeyDown);
        }

// Inicio del juego
        startGame();
        canvas.addEventListener("keydown", onKeyDown);
    </script>
</body>

</html>