基于H5（canvas）的推箱子游戏

川长思鸟来 2023-07-23 13:56 2阅读 0赞

### [基于H5（canvas）的推箱子游戏.zip][H5_canvas_.zip] ###

### 有积分的自己自行下载吧，没有积分的兄弟可以评论留邮箱，看到后会给你们发过去。 ###

--------------------

# 游戏截图 #

![游戏截图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzA1NTMw_size_16_color_FFFFFF_t_70] ![游戏截图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzA1NTMw_size_16_color_FFFFFF_t_70 1]

--------------------

# 设计过程 #

1. 设计目标：推箱子游戏
    
    2. 设计思路：
      1.1 观察游戏玩法 链接：http://www.4399.com/flash/202073.htm
      2.2 分析游戏：游戏的玩法是将箱子通过小人推送到目标点，所有箱子到达目标点即为胜利。
        小人移动的必要条件：1. 玩家按下方向键。 2. 移动终点有效（空白或箱子可被推动）。
        小人的移动分析：
            1）小人的移动终点为空白。此时小人直接到达即可。
            2）小人的移动终点为墙壁。此时小人的移动无效。
            3）小人的移动终点当前被箱子所占。此时需要对箱子的移动进行判定。
    
        箱子移动的必要条件：1.箱子只可在小人的推动下才可进行移。2.移动终点有效（无障碍物）。
        箱子的移动分析：
            1）箱子的移动终点为空白。可被推动。
            2）箱子的移动终点为墙壁或被其他箱子所占。此时箱子不可推动。
            3）箱子的移动终点为目标点。箱子的移动后需要改变箱子的显示以达到提示用户效果。
    
    3. 设计实现：
      游戏使用 css3 中的 canvas 画布设计实现（。。。介绍自行百度吧）
      没有基础可以去 part1 文件夹里面看基础。用到的核心就行画布画图片。
      图片资源来自于 4399 游戏，为方便设计，图片已经 ps 处理，图片大小为 80*80 像素。画布使用大小50*50，需要进行缩放。
    
      js 需要设计的东西：
        核心代码：
            1. 判断箱子或小人是否可移动。
            2. 绘制游戏界面。
        用户事件： 按下移动键后的处理函数。
    
    4. 具体实现参见 part2 里面代码注释写的非常清楚

--------------------

# part1 #

index.html

<!DOCTYPE html> 
    <html lang="zh-CN"> 
    <head>
        <meta charset="UTF-8"> 
        <title>推箱子</title> 
        <style>
            /* Flex 布局语法教程 https://www.runoob.com/w3cnote/flex-grammar.html */
    
            /* 去除浏览器默认的内外边距 */
            * {
                margin: 0;
                padding: 0;
            }
    
            html, body {
                width: 100%;
                height: 100%;
            }
    
            /* 使用 flex 布局, 主轴为水平方向, 起点在左端, 在主轴上的居中对齐 */
            .game-frame-wrap {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: row;
                justify-content: center;
                background-color: #eee; /* 方便区分 */
            }
    
            /* 使用 flex 布局, 主轴为垂直方向, 起点在上沿. 起点在上端, 在主轴上的居中对齐 */
            .game-frame {
                display: flex;
                flex-direction: column;
                justify-content: center;
                background-color: white; /* 方便区分 */
            }
    
            #game-canvas {
                width: 300px;
                height: 300px;
                background-color: green;
            }
    
            /* 以上的样式代码, 使游戏窗口保持在浏览器的水平垂直中间位置 */
        </style>
    </head>
    <body>
        <div class="game-frame-wrap">
            <img id="wall" src="images/wall-sheet0.png" width="80" height="80" alt="">
            <div class="game-frame">
                <canvas id="game-canvas" width="300" height="300"></canvas>
            </div>
        </div>
    
        <script>
            window.onload = function () {
                // HTML5 Canvas 使用教程 https://www.runoob.com/html/html5-canvas.html
    
                // 获取 canvas dom 对象
                var canvas = document.getElementById("game-canvas");
                console.log(canvas, typeof canvas, "canvas");
    
                // 获取在 canvas 画布上绘图的对象
                var ctx = canvas.getContext("2d");
                console.log(ctx, typeof ctx, "ctx");
    
                // 1. 使用页面显示的图片绘图
                var wallImg = document.getElementById("wall");
                // 在画布 x:10, y:10 的位置开始绘图. 左上角坐标原点
                ctx.drawImage(wallImg, 10, 10);
    
                // 2. 使用图片资源直接绘图, 这种方式需要将图片资源加载好之后才能开始画图
                var img = new Image();
                img.src = "./images/crate-sheet0.png";
                img.onload = function () {
                    ctx.drawImage(img, 100, 100);
                }
            };
        </script>
    </body>
    </html>

crate-sheet0.png ![crate-sheet0.png][] wall-sheet0.png ![wall-sheet0.png][]

--------------------

# part2 #

index.html

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>推箱子</title>
        <link rel="stylesheet" href="./css/index.css">
        <script src="js/gameMap.js"></script>
    
        <script type="text/javascript" src="js/index.js"></script>
    </head>
    <body>
        <div class="game-frame-wrap">
            <div class="game-frame">
                <canvas id="game-canvas" width="600" height="600"></canvas>
                <div id="game-info"></div>
            </div>
        </div>
    </body>
    </html>

gameMap.js

var gameMap=[];
    // 0: 背景图片
    // 7: 地板图片
    // 1: 墙壁图片
    // 2: 目标点图片
    // 3: 箱子图片
    // 4: 小人图片
    // 5: 箱子就位
    gameMap[0]=[
        [0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,1,1,1,0,0,0,0,0],
        [0,0,0,0,1,2,1,0,0,0,0,0],
        [0,0,0,0,1,7,1,1,1,1,0,0],
        [0,0,1,1,1,3,7,3,2,1,0,0],
        [0,0,1,2,7,3,4,1,1,1,0,0],
        [0,0,1,1,1,1,3,1,0,0,0,0],
        [0,0,0,0,0,1,2,1,0,0,0,0],
        [0,0,0,0,0,1,1,1,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0]];
    
    gameMap[1]=[
        [0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,1,1,1,1,1,0,0,0,0,0],
        [0,0,1,4,7,7,1,0,0,0,0,0],
        [0,0,1,7,3,3,1,0,1,1,1,0],
        [0,0,1,7,3,7,1,0,1,2,1,0],
        [0,0,1,1,1,7,1,1,1,2,1,0],
        [0,0,0,1,1,7,7,7,7,2,1,0],
        [0,0,0,1,7,7,7,1,7,7,1,0],
        [0,0,0,1,7,7,7,1,1,1,1,0],
        [0,0,0,1,1,1,1,1,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0]];
    
    
    gameMap[2]=[
        [0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,1,1,1,1,1,1,1,0,0,0],
        [0,0,1,7,7,7,7,7,1,1,1,0],
        [0,1,1,3,1,1,1,7,7,7,1,0],
        [0,1,7,4,7,3,7,7,3,7,1,0],
        [0,1,7,2,2,1,7,3,7,1,1,0],
        [0,1,1,2,2,1,7,7,7,1,0,0],
        [0,0,1,1,1,1,1,1,1,1,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0]];
    
    
    gameMap[3]=[
        [0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,1,1,1,1,0,0,0,0,0],
        [0,0,1,1,7,7,1,0,0,0,0,0],
        [0,0,1,4,3,7,1,0,0,0,0,0],
        [0,0,1,1,3,7,1,1,0,0,0,0],
        [0,0,1,1,7,3,7,1,0,0,0,0],
        [0,0,1,2,3,7,7,1,0,0,0,0],
        [0,0,1,2,2,5,2,1,0,0,0,0],
        [0,0,1,1,1,1,1,1,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0]];
    
    
    gameMap[4]=[
        [0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,1,1,1,1,1,0,0,0,0],
        [0,0,0,1,4,7,1,1,1,0,0,0],
        [0,0,0,1,7,3,7,7,1,0,0,0],
        [0,0,1,1,1,7,1,7,1,1,0,0],
        [0,0,1,2,1,7,1,7,7,1,0,0],
        [0,0,1,2,3,7,7,1,7,1,0,0],
        [0,0,1,2,7,7,7,3,7,1,0,0],
        [0,0,1,1,1,1,1,1,1,1,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0]];

index.js 部分代码

[H5_canvas_.zip]: https://download.csdn.net/download/qq_36305530/12313833
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzA1NTMw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200408094652139.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzA1NTMw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzA1NTMw_size_16_color_FFFFFF_t_70 1]: /images/20230528/212eeee32b19499da6ac0b2c6fbd526f.png
[crate-sheet0.png]: https://img-blog.csdnimg.cn/20200408101623572.png
[wall-sheet0.png]: /images/20230528/5e4c4458c3ea4a5fa445cea3350dc254.png