轻松上手！分享JS小游戏源码，让你成为编程小达人

随着互联网技术的不断发展，JavaScript（简称JS）已经成为前端开发中不可或缺的一部分。而JS小游戏作为JavaScript应用的一个分支，以其简单易学、开发周期短、效果丰富等特点，深受广大编程爱好者的喜爱。今天，就为大家分享一些JS小游戏的源码，帮助大家快速上手，成为编程小达人。

一、贪吃蛇游戏

贪吃蛇游戏是一款经典的街机游戏，下面是贪吃蛇游戏的源码：

`javascript // 游戏主函数 function game() { var snake = [[3, 3], [3, 2], [3, 1]]; // 蛇的初始位置 var food = [10, 10]; // 食物的初始位置 var direction = 'right'; // 蛇的初始方向 var score = 0; // 得分

// 游戏主循环
setInterval(function() {
    // 判断蛇是否撞墙或撞到自己
    if (snake[0][0] === 0 || snake[0][0] === 18 || snake[0][1] === 0 || snake[0][1] === 18 || snake.some(function(item) {
            return item[0] === snake[0][0] && item[1] === snake[0][1];
        })) {
        alert('游戏结束！');
        return;
    }
    // 计算蛇的新位置
    var head = [snake[0][0], snake[0][1]];
    switch (direction) {
        case 'right':
            head[0]++;
            break;
        case 'left':
            head[0]--;
            break;
        case 'up':
            head[1]--;
            break;
        case 'down':
            head[1]++;
            break;
    }
    // 判断蛇是否吃到食物
    if (head[0] === food[0] && head[1] === food[1]) {
        score++;
        food = [Math.floor(Math.random() * 18) + 1, Math.floor(Math.random() * 18) + 1];
    } else {
        snake.pop(); // 移除蛇的最后一个身体部分
    }
    // 添加新的蛇头
    snake.unshift(head);
    // 渲染游戏界面
    render(snake, food, score);
}, 200);
// 控制蛇的移动方向
document.addEventListener('keydown', function(e) {
    switch (e.keyCode) {
        case 37:
            direction = 'left';
            break;
        case 38:
            direction = 'up';
            break;
        case 39:
            direction = 'right';
            break;
        case 40:
            direction = 'down';
            break;
    }
});
// 渲染游戏界面
function render(snake, food, score) {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, 360, 360);
    // 绘制蛇
    ctx.fillStyle = 'green';
    for (var i = 0; i < snake.length; i++) {
        ctx.fillRect(snake[i][0] * 10, snake[i][1] * 10, 10, 10);
    }
    // 绘制食物
    ctx.fillStyle = 'red';
    ctx.fillRect(food[0] * 10, food[1] * 10, 10, 10);
    // 显示分数
    ctx.fillStyle = 'black';
    ctx.fillText('Score: ' + score, 10, 20);
}

}

// 初始化游戏 game(); `

二、俄罗斯方块游戏

俄罗斯方块游戏是一款经典的休闲游戏，下面是俄罗斯方块游戏的源码：

`javascript // 游戏主函数 function game() { var board = []; // 游戏板 var piece = []; // 当前方块 var nextPiece = []; // 下一个方块 var timer = null; // 游戏计时器 var score = 0; // 得分

// 初始化游戏板
for (var i = 0; i < 20; i++) {
    board[i] = [];
    for (var j = 0; j < 10; j++) {
        board[i][j] = 0;
    }
}
// 初始化方块
function createPiece() {
    var types = ['I', 'O', 'T', 'S', 'Z', 'J', 'L'];
    var pieceType = types[Math.floor(Math.random() * types.length)];
    switch (pieceType) {
        case 'I':
            piece = [[0, 0, 0, 0], [1, 1, 1, 1], [0, 0, 0, 0], [0, 0, 0, 0]];
            break;
        case 'O':
            piece = [[1, 1], [1, 1]];
            break;
        case 'T':
            piece = [[0, 1, 0], [1, 1, 1], [0, 0, 0]];
            break;
        case 'S':
            piece = [[0, 1, 1], [1, 1, 0], [0, 0, 0]];
            break;
        case 'Z':
            piece = [[1, 1, 0], [0, 1, 1], [0, 0, 0]];
            break;
        case 'J':
            piece = [[0, 0, 1], [1, 1, 1], [0, 0, 0]];
            break;
        case 'L':
            piece = [[1, 0, 0], [1, 1, 1], [0, 0, 0]];
            break;
    }
    return piece;
}
// 游戏主循环
timer = setInterval(function() {
    if (canMoveDown()) {
        piece[0] = piece[0].map(function(row) {
            return row.map(function(cell) {
                return cell - 1;
            });
        });
    } else {
        addPieceToBoard();
        piece = createPiece();
        nextPiece = createPiece();
        if (!canMoveDown()) {
            alert('游戏结束！');
            clearInterval(timer);
        }
    }
}, 1000);
// 检查是否可以向下移动
function canMoveDown() {
    for (var i = 0; i < piece.length; i++) {
        for (var j = 0; j < piece[i].length; j++) {
            if (piece[i][j] !== 0 && (piece[i][j] + 1 >= board.length || board[piece[i][j] + 1][j] !== 0)) {
                return false;
            }
        }
    }
    return true;
}
// 将方块添加到游戏板
function addPieceToBoard() {
    for (var i = 0; i < piece.length; i++) {
        for (var j = 0; j < piece[i].length; j++) {
            if (piece[i][j] !== 0) {
                board[piece[i][j]][j] = 1;
            }
        }
    }
}
// 渲染游戏界面
function render() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, 300, 600);
    // 绘制游戏板
    for (var i = 0; i < board.length; i++) {
        for (var j = 0; j < board[i].length; j++) {
            if (board[i][j] !== 0) {
                ctx.fillStyle = 'blue';
                ctx.fillRect(j * 15, i * 15, 15, 15);
            }
        }
    }
    // 绘制当前方块
    for (var i = 0; i < piece.length; i++) {
        for (var j = 0; j < piece[i].length; j++) {
            if (piece[i][j] !== 0) {
                ctx.fillStyle = 'red';
                ctx.fillRect(j * 15, i * 15, 15, 15);
            }
        }
    }
    // 绘制下一个方块
    for (var i = 0; i < nextPiece.length; i++) {
        for (var j = 0; j < nextPiece[i].length; j++) {
            if (nextPiece[i][j] !== 0) {
                ctx.fillStyle = 'yellow';
                ctx.fillRect(j * 15, i * 15, 15, 15);
            }
        }
    }
    // 显示分数
    ctx.fillStyle = 'black';
    ctx.fillText('Score: ' + score, 10, 20);
}
// 初始化游戏
function init() {
    piece = createPiece();
    nextPiece = createPiece();
    render();
}
init();

}

// 初始化游戏 game(); `

通过以上两个例子，相信大家对JS小游戏的源码有了初步的了解。在实际开发过程中，可以根据自己的需求对源码进行修改和优化。希望这些源码能帮助大家在学习JavaScript的过程中取得更好的成绩，成为编程小达人！