Power BI 玩贪食蛇游戏

wujunmin
发布于 2025-03-24 19:25:15
4300
代码可运行
文章被收录于专栏：wujunminwujunmin
运行总次数：0
代码可运行
使用AI设计了一个适配Power BI的贪食蛇游戏：
原理是HTML+CSS+JS，把下方度量值放到HTML Content视觉对象，点击开始，按上下左右就可以开玩了。
贪食蛇 = 
"<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>贪食蛇游戏</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        
        #game-container {
            position: relative;
            margin-bottom: 20px;
        }
        
        #game-board {
            border: 2px solid #333;
            background-color: #fff;
        }
        
        #score {
            font-size: 24px;
            margin-bottom: 10px;
        }
        
        #controls {
            margin-top: 20px;
        }
        
        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 0 5px;
        }
        
        button:hover {
            background-color: #45a049;
        }
        
        #game-over {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            display: none;
        }
    </style>
</head>
<body>
    <h1>贪食蛇游戏</h1>
    <div id='score'>分数: 0</div>
    <div id='game-container'>
        <canvas id='game-board' width='400' height='400'></canvas>
        <div id='game-over'>
            <h2>游戏结束!</h2>
            <p>你的最终得分: <span id='final-score'>0</span></p>
            <button id='restart-btn'>重新开始</button>
        </div>
    </div>
    <div id='controls'>
        <button id='start-btn'>开始游戏</button>
        <button id='pause-btn'>暂停</button>
    </div>
    <script>
        // 获取画布和上下文
        const canvas = document.getElementById('game-board');
        const ctx = canvas.getContext('2d');
        
        // 游戏参数
        const gridSize = 20;
        const gridWidth = canvas.width / gridSize;
        const gridHeight = canvas.height / gridSize;
        let score = 0;
        let gameSpeed = 150; // 毫秒
        let gameInterval;
        let isPaused = false;
        let isGameOver = false;
        
        // 蛇的初始状态
        let snake = [
            {x: 5, y: 5}
        ];
        let direction = 'right';
        let nextDirection = 'right';
        
        // 食物位置
        let food = generateFood();
        
        // 生成食物
        function generateFood() {
            let newFood;
            let foodOnSnake;
            
            do {
                foodOnSnake = false;
                newFood = {
                    x: Math.floor(Math.random() * gridWidth),
                    y: Math.floor(Math.random() * gridHeight)
                };
                
                // 检查食物是否在蛇身上
                for (let segment of snake) {
                    if (segment.x === newFood.x && segment.y === newFood.y) {
                        foodOnSnake = true;
                        break;
                    }
                }
            } while (foodOnSnake);
            
            return newFood;
        }
        
        // 绘制游戏
        function draw() {
            // 清空画布
            ctx.fillStyle = '#fff';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 绘制蛇
            ctx.fillStyle = '#4CAF50';
            for (let segment of snake) {
                ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
            }
            
            // 绘制蛇头
            ctx.fillStyle = '#388E3C';
            const head = snake[0];
            ctx.fillRect(head.x * gridSize, head.y * gridSize, gridSize, gridSize);
            
            // 绘制食物
            ctx.fillStyle = '#F44336';
            ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
            
            // 绘制网格线
            ctx.strokeStyle = '#f0f0f0';
            ctx.lineWidth = 1;
            
            // 垂直线
            for (let x = 0; x <= canvas.width; x += gridSize) {
                ctx.beginPath();
                ctx.moveTo(x, 0);
                ctx.lineTo(x, canvas.height);
                ctx.stroke();
            }
            
            // 水平线
            for (let y = 0; y <= canvas.height; y += gridSize) {
                ctx.beginPath();
                ctx.moveTo(0, y);
                ctx.lineTo(canvas.width, y);
                ctx.stroke();
            }
        }
        
        // 更新游戏状态
        function update() {
            if (isPaused || isGameOver) return;
            
            // 更新方向
            direction = nextDirection;
            
            // 获取蛇头
            const head = {...snake[0]};
            
            // 根据方向移动蛇头
            switch (direction) {
                case 'up':
                    head.y--;
                    break;
                case 'down':
                    head.y++;
                    break;
                case 'left':
                    head.x--;
                    break;
                case 'right':
                    head.x++;
                    break;
            }
            
            // 检查游戏是否结束
            if (
                head.x < 0 || head.x >= gridWidth ||
                head.y < 0 || head.y >= gridHeight ||
                snake.some(segment => segment.x === head.x && segment.y === head.y)
            ) {
                gameOver();
                return;
            }
            
            // 将新头部添加到蛇身
            snake.unshift(head);
            
            // 检查是否吃到食物
            if (head.x === food.x && head.y === food.y) {
                // 增加分数
                score += 10;
                document.getElementById('score').textContent = `分数: ${score}`;
                
                // 生成新食物
                food = generateFood();
                
                // 加快游戏速度
                if (gameSpeed > 50) {
                    gameSpeed -= 2;
                    clearInterval(gameInterval);
                    gameInterval = setInterval(gameLoop, gameSpeed);
                }
            } else {
                // 如果没有吃到食物，移除尾部
                snake.pop();
            }
        }
        
        // 游戏循环
        function gameLoop() {
            update();
            draw();
        }
        
        // 开始游戏
        function startGame() {
            if (gameInterval) clearInterval(gameInterval);
            
            // 重置游戏状态
            snake = [{x: 5, y: 5}];
            direction = 'right';
            nextDirection = 'right';
            score = 0;
            gameSpeed = 150;
            isPaused = false;
            isGameOver = false;
            food = generateFood();
            
            // 更新分数显示
            document.getElementById('score').textContent = `分数: ${score}`;
            
            // 隐藏游戏结束界面
            document.getElementById('game-over').style.display = 'none';
            
            // 开始游戏循环
            gameInterval = setInterval(gameLoop, gameSpeed);
        }
        
        // 游戏结束
        function gameOver() {
            isGameOver = true;
            clearInterval(gameInterval);
            
            // 显示游戏结束界面
            document.getElementById('final-score').textContent = score;
            document.getElementById('game-over').style.display = 'block';
        }
        
        // 暂停游戏
        function togglePause() {
            if (isGameOver) return;
            
            isPaused = !isPaused;
            document.getElementById('pause-btn').textContent = isPaused ? '继续' : '暂停';
        }
        
        // 键盘控制
        document.addEventListener('keydown', (e) => {
            switch (e.key) {
                case 'ArrowUp':
                    if (direction !== 'down') nextDirection = 'up';
                    break;
                case 'ArrowDown':
                    if (direction !== 'up') nextDirection = 'down';
                    break;
                case 'ArrowLeft':
                    if (direction !== 'right') nextDirection = 'left';
                    break;
                case 'ArrowRight':
                    if (direction !== 'left') nextDirection = 'right';
                    break;
                case ' ':
                    togglePause();
                    break;
            }
        });
        
        // 按钮控制
        document.getElementById('start-btn').addEventListener('click', startGame);
        document.getElementById('pause-btn').addEventListener('click', togglePause);
        document.getElementById('restart-btn').addEventListener('click', startGame);
        
        // 初始绘制
        draw();
    </script>
</body>"
如有美化需求，可以把以上代码扔给AI继续修改。
本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2025-03-22，如有侵权请联系 cloudcommunity@tencent.com 删除
document