65.9K
CodeProject 正在变化。 阅读更多。
Home

蛇与梯子——一次使用HTML5的尝试

Manas Bhardwaj
starIconstarIconstarIconstarIconstarIcon

5.00/5 (12投票s)

2012年6月3日

CPOL

3分钟阅读

viewsIcon

78784

downloadIcon

2843

使用 HTML5 创建蛇梯棋的初步尝试。

引言

本文旨在演示使用 HTML5 实现蛇梯棋游戏的非常简单和粗糙的实现。 最近，我开始深入研究 HTML5。 当我接触到 canvas 部分时，这个游戏是我想要尝试的候选游戏之一。 对于那些从未听说过这款游戏的人，这里有一篇关于它的维基文章。

背景

虽然，这个游戏通常作为双人游戏进行。 当前的实现是单人游戏，更旨在展示所使用的概念及其背后的潜力。 在我真正开始解释代码和实现之前，我想先介绍一下 HTML Canvas 元素，它是游戏的核心。 我假设每个阅读这篇文章的人现在都听说过 HTML5。

HTML5 是 HTML4 的继承者。 HTML4 于 1997 年标准化，自那时以来，互联网行业发生了很大变化。 因此，需要下一个标准化的 HTML 版本来改进该语言，同时支持各种多媒体块，这些块几乎已成为 Web 开发中的常规用法。 一般来说，HTML5 包括许多语法特性，例如 <video>、<audio>、<canvas> 等。在继续讨论其在蛇梯棋游戏中的用法之前，我们将简要介绍 Canvas 元素。

画布

Canvas 顾名思义是 HTML5 中引入的一个新元素，可用于使用 java script 绘制图形。 它可以用于绘制形状、图像和动画。 它有望通过标准化（我们都知道 iPad/iPhone 上没有 Flash）使设计师、动画师的生活更轻松。

一些旧浏览器不支持 canvas 元素，但 Firefox 1.5 及更高版本、Opera 9 及更高版本、Safari、Chrome 和 Internet Explorer 9 的较新版本都支持它。

使用代码

好吧，让我们看看代码，看看如何在开发游戏中使用 <canvas>。

我从一个简单的 HTML 页面开始，其中包含一个 <canvas> 元素。

<!DOCTYPE html>
<html>
<head>
    <title>Manas Bhardwaj's Snake & Ladder</title>
</head>
<body>
    <canvas id="board" width="650" height="650">
    </canvas>
</body>
</html>

背景

下一步将是使用 java script 访问此 canvas 元素。
var canvas = document.getElementById("board");
var context = canvas.getContext("2d");

在第一行中，我们使用 getElementById 方法检索 canvas DOM 节点。 然后我们可以使用 getContext 方法访问绘图上下文。 <canvas> 创建了一个固定大小的绘图表面，该表面公开一个或多个渲染上下文，这些上下文用于创建和操作显示的内容。 我们将专注于 2D 渲染上下文。

绘制正方形

function RenderSquareBoard() 
{        
    var colorA = "white";
    var colorB = "red";

    var initRow = 1; var totalRows = 10; var initcolumn = 1; var totalColumns = 10;

    var x = 0; var y = canvas.height - squareSize;

    var columnNr = 1; var leftToRight = true;
    for (var row = initRow; row <= totalRows; row++) 
    {
        if (leftToRight) 
        {
            x = 0;
        }
        else 
        {
            x = canvas.width - squareSize;
        }

        for (var column = initcolumn; column <= totalColumns; column++) 
        {
            if (columnNr % 2 == 0) 
            {
                context.fillStyle = colorA;
            }
            else 
            {
                context.fillStyle = colorB;
            }

            context.fillRect(x, y, squareSize, squareSize);

            squares[columnNr] = x.toString() + ',' + y.toString();

            contextText.font = "15px tahoma";
            contextText.fillStyle = "black";
            contextText.fillText(columnNr, x, y + squareSize);

            var x1, y1
            if (leftToRight) 
            {
                x += squareSize;

                x1 = x + (squareSize / 2);
            }
            else 
            {
                x -= squareSize;
                x1 = x - (squareSize / 2);
            }

            y1 = y - (squareSize / 2);

            columnNr++;
        }

        y -= squareSize;
        leftToRight = !leftToRight;
    }
}
除了我构建不同正方形并保留其坐标以供以后用于绘制玩家移动的逻辑之外，我们将在此处看到的重要方面是绘制一个矩形。 Canvas 仅支持一种原始形状 - 矩形。 所有其他形状都必须通过组合一个或多个路径来创建。 这对我来说至少很方便，因为我不必为此做任何额外的事情，并且可以使用内置功能。

有三个函数可以在画布上绘制矩形

fillRect(x,y,width,height): 绘制一个填充的矩形
strokeRect(x,y,width,height): 绘制一个矩形轮廓
clearRect(x,y,width,height): 清除指定区域并使其完全透明

绘制图像

function RenderSnakeAndLadders()
{
    var img = new Image();
    img.onload = function () 
    {
    context.drawImage(img, 66, 23);
    };
    img.src = "Images/SnakeA.gif";
}

导入图像基本上是一个两步过程。 首先，我们需要引用 JavaScript Image 对象或其他 canvas 元素作为源。 仅通过提供 URL/路径来使用图像是不可能的。 其次，我们使用 drawImage 函数在画布上绘制图像。

游戏

我在示例中使用了两条蛇和两个梯子，以使其保持简单。 如果玩家落在梯子上，他就会爬上梯子，因此不必覆盖整个路径。 与此相反，如果玩家落在蛇口上，他会滑到尾巴。 单击按钮后，我生成一个介于 1 和 6 之间的随机数。玩家的位置根据他的分数进行更改，并绘制一个新的矩形以显示他的新位置。
 function nextMove() 
        {
            var newMove = GenerateRandomNumber(6);
            alert("You got : " + newMove);

            _currentPos = _currentPos + newMove;

            switch (_currentPos) 
            {
            //ladder
            case 6:
            _currentPos = 46;
            break;
            //ladder
            case 39:
            _currentPos = 79;
            break;
            //snake
            case 99:
            _currentPos = 29;
            break;
            //snake
            case 72:
            _currentPos = 2;
            break;             
            }

            var coorintaes = squares[_currentPos];
            coorintaes = coorintaes.split(',');

            context.fillRect(coorintaes[0], coorintaes[1], squareSize, squareSize);

            if (_currentPos == 100)
            {
                alert("Congratulations, you have won the game :)");
                initGame();
            }
        }

历史

版本 0.5：初始实现，演示了可以使用 canvas 元素来实现游戏。

© . All rights reserved.