📜  atari 突破 - Javascript (1)

📅  最后修改于: 2023-12-03 15:29:31.595000             🧑  作者: Mango

Atari 突破 - JavaScript

Atari 突破是一个经典的街机游戏,被许多人视为游戏开发的里程碑。在这个游戏中,玩家需要控制一条蛇吃掉食物,每次吃到食物时,蛇的长度会增加,随着时间的推移,难度会不断增加,直到蛇撞到自己或到达边缘位置结束游戏。

在本文中,我们将使用 JavaScript 来构建一个 Atari 突破游戏。下面是程序代码片段:

// Atari 突破游戏

// 定义游戏画布
var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");

// 定义蛇的初始位置和长度
var snakeX = canvas.width / 2;
var snakeY = canvas.height / 2;
var snakeLength = 5;

// 定义蛇每一步的长度和方向
var snakeSize = 10;
var snakeDirection = "right";

// 定义食物的初始位置和大小
var foodX = Math.floor(Math.random() * canvas.width / snakeSize) * snakeSize;
var foodY = Math.floor(Math.random() * canvas.height / snakeSize) * snakeSize;
var foodSize = 10;

// 定义游戏循环
function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制蛇和食物
    drawSnake();
    drawFood();

    // 移动蛇
    moveSnake();

    // 碰撞检测
    checkCollision();

    // 更新分数
    updateScore();

    // 继续游戏循环
    requestAnimationFrame(gameLoop);
}

// 绘制蛇
function drawSnake() {
    ctx.fillStyle = "#00FF00";

    for (var i = 0; i < snakeLength; i++) {
        ctx.fillRect(snakeX - i * snakeSize, snakeY, snakeSize, snakeSize);
    }
}

// 绘制食物
function drawFood() {
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(foodX, foodY, foodSize, foodSize);
}

// 移动蛇
function moveSnake() {
    switch (snakeDirection) {
        case "up":
            snakeY -= snakeSize;
            break;
        case "down":
            snakeY += snakeSize;
            break;
        case "left":
            snakeX -= snakeSize;
            break;
        case "right":
            snakeX += snakeSize;
            break;
    }
}

// 碰撞检测
function checkCollision() {
    // 检测蛇是否撞墙
    if (snakeX < 0 || snakeX >= canvas.width || snakeY < 0 || snakeY >= canvas.height) {
        // 游戏结束
        gameOver();
    }

    // 检测蛇是否吃到食物
    if (snakeX === foodX && snakeY === foodY) {
        // 更新分数
        snakeLength++;
        updateScore();

        // 随机生成新的食物位置
        foodX = Math.floor(Math.random() * canvas.width / snakeSize) * snakeSize;
        foodY = Math.floor(Math.random() * canvas.height / snakeSize) * snakeSize;
    }
}

// 更新分数
function updateScore() {
    var score = "Score: " + (snakeLength - 5);
    document.getElementById("score").innerHTML = score;
}

// 游戏结束
function gameOver() {
    alert("Game over!");
}

// 开始游戏循环
gameLoop();

以上就是使用 JavaScript 构建 Atari 突破游戏的程序代码片段。这个游戏很简单,但有很多可扩展的部分,可以加入更多元素和动画效果,来创建一个更有趣、更丰富的游戏玩法。