HTML5 Canvas API制作一个简单的猜字单机游戏

作者：System 时间：2024年08月13日分类：所有,html5 字数：1976




<!DOCTYPE html>
<html>
<head>
    <title>猜字游戏</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        #gameCanvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="500" height="200"></canvas>
    <script>
        var canvas = document.getElementById('gameCanvas');
        var ctx = canvas.getContext('2d');
        var words = ['apple', 'banana', 'cherry'];
        var wordToGuess = '';
        var guessedLetters = [];
 
        function startGame() {
            wordToGuess = words[Math.floor(Math.random() * words.length)];
            guessedLetters = [];
            drawHangman(0);
            drawWord();
        }
 
        function guessLetter(letter) {
            guessedLetters.push(letter);
            if (wordToGuess.includes(letter)) {
                // 字母在词汇中
                drawWord();
            } else {
                // 字母不在词汇中
                drawHangman(guessedLetters.length);
            }
        }
 
        function drawHangman(step) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            switch(step) {
                case 0:
                    // 游戏开始时不画图
                    break;
                case 1:
                    // 画第一步挂图
                    break;
                // ... 其他步骤
            }
        }
 
        function drawWord() {
            ctx.clearRect(0, 25, canvas.width, canvas.height);
            var visibleWord = wordToGuess.split('').map(letter => {
                return guessedLetters.includes(letter) ? letter : '_';
            }).join(' ');
            ctx.fillText(visibleWord, 50, 50);
        }
 
        startGame(); // 开始游戏
    </script>
</body>
</html>

这个简易的猜字游戏使用了HTML5 Canvas API来绘制挂图和显示猜测结果。游戏开始时，会随机选择一个词汇，然后用下划线代替未猜测的字母。当玩家输入一个字母后，如果这个字母在随机词汇中存在，则显示这个字母，否则根据猜测错误的次数画出相应的挂图部分。这个例子教给初学者如何使用Canvas API和简单的游戏逻辑。

HTML5 Canvas API制作一个简单的猜字单机游戏

评论已关闭

推荐阅读