html小游戏

原创

已于 2024-01-11 19:25:35 修改 · 855 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript

于 2024-01-11 19:18:58 首次发布

这篇博客介绍了如何使用HTML、CSS和JavaScript制作一个小游戏。通过创建HTML文档结构，设置内联样式，利用HTML5 canvas元素绘制图形，结合JavaScript进行事件处理和游戏逻辑实现。博主详细讲解了从初始化画布、加载图片到处理用户输入、保存和加载游戏进度的过程，提供了一个简单的游戏制作实例。

呵呵，我来水一期博客。

哦,大家好，我是bug质检官。今天，我们来简单的写一下小游戏

今天，我来教大家做一个简单的小游戏

（本博客无不良引导）

提出的要求：

<!DOCTYPE html>
<html>
<head>
    <title>小游戏</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

    <script>
        // 创建画布和上下文
        var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");

        // 导入人物和场景图片
        var characterImage = new Image();
        characterImage.src = "character.png";

        var sceneImage = new Image();
        sceneImage.src = "scene.png";

        // 初始化人物和场景坐标
        var characterX = 0;
        var characterY = 0;

        var sceneX = 0;
        var sceneY = 0;

        // 绘制游戏画面
        function drawGame() {
            // 清除画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 绘制场景
            ctx.drawImage(sceneImage, sceneX, sceneY);

            // 绘制人物
            ctx.drawImage(characterImage, characterX, characterY);
        }

        // 处理按键事件
        function handleKeyPress(e) {
            // 根据按下的键来移动人物
            if (e.key === "ArrowUp") {
                characterY -= 10;
            } else if (e.key === "ArrowDown") {
                characterY += 10;
            } else if (e.key === "ArrowLeft") {
                characterX -= 10;
            } else if (e.key === "ArrowRight") {
                characterX += 10;
            }

            // 重新绘制游戏画面
            drawGame();
        }

        // 保存游戏进度
        function saveGameProgress() {
            var progress = {
                characterX: characterX,
                characterY: characterY,
                sceneX: sceneX,
                sceneY: sceneY
            };

            // 将进度对象转换为字符串并保存到本地存储
            localStorage.setItem("gameProgress", JSON.stringify(progress));
        }

        // 加载游戏进度
        function loadGameProgress() {
            // 从本地存储中获取已保存的进度字符串
            var progress = localStorage.getItem("gameProgress");

            if (progress) {
                // 将进度字符串转换为对象
                progress = JSON.parse(progress);

                // 更新人物和场景坐标
                characterX = progress.characterX;
                characterY = progress.characterY;
                sceneX = progress.sceneX;
                sceneY = progress.sceneY;

                // 重新绘制游戏画面
                drawGame();
            }
        }

        // 加载游戏进度
        loadGameProgress();

        // 设置按键事件监听器
        window.addEventListener("keydown", handleKeyPress);

        // 设置窗口关闭事件监听器，保存游戏进度
        window.addEventListener("beforeunload", saveGameProgress);

        // 初始化游戏画面
        drawGame();
    </script>
</body>
</html>

<!DOCTYPE html>：HTML文档的文档类型声明。
<html>：HTML文档的根元素。
<head>：HTML文档的头部，用于包含文档的元数据和脚本。
<title>小游戏</title>：指定网页的标题为"小游戏"。
<style>：内联样式用于定义网页的CSS样式。
canvas：HTML5的元素，用于绘制图形。
<body>：HTML文档的主体部分，用于显示实际内容。
<canvas id="gameCanvas" width="800" height="600"></canvas>：创建一个宽度为800像素，高度为600像素的画布元素，该元素的唯一标识为"gameCanvas"。
<script>：用于嵌入JavaScript脚本。
var canvas = document.getElementById("gameCanvas");：获取id