个人中心
gpt4 book ai didi

javascript - Canvas 游戏中的不同页面

转载 作者：太空狗 更新时间：2023-10-29 15:00:33 24 4
gpt4 key购买 nike

问题

我正在使用 HTML5 Canvas 创建一个游戏，游戏有一个主菜单，主菜单有多个按钮供您选择。我发现很难和困惑我会如何，例如，如果用户按下“播放”按钮，来显示游戏。这是主菜单的图片:

Main menu of game.

问题

问题是我如何从这个页面转到我游戏中的另一个页面？

enter image description here

我想你明白了。我特意使用 Canvas 创建了菜单，我知道我可以使用 HTML 制作菜单，但我不能，因为这是向学生展示 Canvas 可以做什么、优缺点等的示例。

代码

<html>
<head>
    <title>Sean Coyne</title>
</head>
<body onload="start_game()">
<body>
    <div style id="canvas">
        <canvas id="myCanvas" style="border:5px solid #410b11" height="320" width="480">
            <p>Your browser does not support HTML5!</p>
        </canvas>

        <script type="text/javascript">

            //Referencing the canvas
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            var width = canvas.getAttribute('width');
            var height = canvas.getAttribute('height');

            //Finding the position of the mouse
            var mouseX;
            var mouseY;

            //Images
            var bgImage = new Image();
            var logoImage = new Image();
            var playImage = new Image();
            var instructImage = new Image();
            var settingsImage = new Image();
            var aboutImage = new Image();
            var peaceImage = new Image();

            var backgroundY = 0;
            var speed = 1;

            //Arrays below used for mouse over function
            var buttonX = [130,110,130,160];
            var buttonY = [100,140,180,220];
            var buttonWidth = [96,260,182,160];
            var buttonHeight = [40,40,40,40];

            var peaceX = [0,0];
            var peaceY = [0,0];
            var peaceWidth = 35;
            var peaceHeight = 35;

            var peaceVisible = false;
            var peaceSize = peaceWidth;
            var peaceRotate = 0;

            var frames = 30;
            var timerId = 0;
            var fadeId = 0;
            var time = 0.0;

            peaceImage.src = "Images/peace.png";
            bgImage.onload = function(){
                context.drawImage(bgImage, 0, backgroundY);
            };
            bgImage.src = "Images/background.png";
            logoImage.onload = function(){
                context.drawImage(logoImage, 50, -10);
            }
            logoImage.src = "Images/logo.png";
            playImage.onload = function(){
                context.drawImage(playImage, buttonX[0], buttonY[0]);
            }
            playImage.src = "Images/play.png";
            instructImage.onload = function(){
                context.drawImage(instructImage, buttonX[1], buttonY[1]);
            }
            instructImage.src = "Images/instructions.png";
            settingsImage.onload = function(){
                context.drawImage(settingsImage, buttonX[2], buttonY[2]);
            }
            settingsImage.src = "Images/settings.png";
            aboutImage.onload = function(){
                context.drawImage(aboutImage, buttonX[3], buttonY[3]);
            }
            aboutImage.src = "Images/about.png";

            timerId = setInterval("update()", 1000/frames);

            canvas.addEventListener("mousemove", checkPos);
            canvas.addEventListener("mouseup", checkClick);

            function update() {
                clear();
                move();
                draw();
            }
            function clear() {
                context.clearRect(0, 0, width, height);
            }
            function move(){
                backgroundY -= speed;
                if(backgroundY == -1 * height){
                    backgroundY = 0;
                }
                if(peaceSize == peaceWidth){
                    peaceRotate = -1;
                }
                if(peaceSize == 0){
                    peaceRotate = 1;
                }
                peaceSize += peaceRotate;
            }


            function draw(){
                context.drawImage(bgImage, 0, backgroundY);
                context.drawImage(logoImage, 50,-10);
                context.drawImage(playImage, buttonX[1], buttonY[0]);
                context.drawImage(instructImage, buttonX[2], buttonY[1]);
                context.drawImage(settingsImage, buttonX[2], buttonY[2]);
                context.drawImage(aboutImage, buttonX[3], buttonY[3]);
                    if(peaceVisible == true){
                    context.drawImage(peaceImage, peaceX[0] - (peaceSize/2), peaceY[0], peaceSize, peaceHeight);
                    context.drawImage(peaceImage, peaceX[2] - (peaceSize/2), peaceY[2], peaceSize, peaceHeight);
                }
            }

            function checkPos(mouseEvent){
                if(mouseEvent.pageX || mouseEvent.pageY == 0){
                    mouseX = mouseEvent.pageX - this.offsetLeft;
                    mouseY = mouseEvent.pageY - this.offsetTop;
                }else if(mouseEvent.offsetX || mouseEvent.offsetY == 0){
                    mouseX = mouseEvent.offsetX;
                    mouseY = mouseEvent.offsetY;
                }
                for(i = 0; i < buttonX.length; i++){
                    if(mouseX > buttonX[i] && mouseX < buttonX[i] + buttonWidth[i]){
                        if(mouseY > buttonY[i] && mouseY < buttonY[i] + buttonHeight[i]){
                            peaceVisible = true;
                            peaceX[0] = buttonX[i] - (peaceWidth/2) - 2;
                            peaceY[0] = buttonY[i] + 2;
                            peaceX[1] = buttonX[i] + buttonWidth[i] + (peaceWidth/2); 
                            peaceY[1] = buttonY[i] + 2;
                        }
                    }else{
                        peaceVisible = false;
                    }
                }
            }
            function checkClick(mouseEvent){
                for(i = 0; i < buttonX.length; i++){
                    if(mouseX > buttonX[i] && mouseX < buttonX[i] + buttonWidth[i]){
                        if(mouseY > buttonY[i] && mouseY < buttonY[i] + buttonHeight[i]){
                            fadeId = setInterval("fadeOut()", 1000/frames);
                            clearInterval(timerId);
                            canvas.removeEventListener("mousemove", checkPos);
                            canvas.removeEventListener("mouseup", checkClick);
                        }
                    }
                }
            }
            function fadeOut(){
                context.fillStyle = "rgba(0,0,0, 0.2)";
                context.fillRect (0, 0, width, height);
                time += 0.1;
                if(time >= 2){
                    clearInterval(fadeId);
                    time = 0;
                    timerId = setInterval("update()", 1000/frames);
                    canvas.addEventListener("mousemove", checkPos);
                    canvas.addEventListener("mouseup", checkClick);
                }
            }
        </script>
    </body>
</html>

最佳答案

我通常做的是在 draw 循环中有一个 switch 语句，以及一个保存当前游戏状态(菜单、播放等...)的状态变量。

然后，根据当前游戏状态，您只绘制当前场景所需的对象。

像这样:

var STATES = { 
  Menu: 0,
  PauseMenu: 1,
  Playing: 2
};
var currentState = STATES.Menu;
...
function draw() {
  switch(currentState) {
    case STATES.Menu:
      // Draw buttons, etc..
    break;
    case STATES.Playing:
      // Draw the game screen, the player, etc...
    break;
  }
}

当用户按下 Play 按钮时，您唯一需要做的就是:

function onPlayButtonClick() {
   currentState = STATES.Playing;
   // Starting the next frame the new state will be "magically" drawn
}

如果您不喜欢 switch 语句，您可以创建一个具有 draw 方法的 State 类。然后您可以简单地创建新状态，每个状态都有自己的绘制方法，并且在主绘制循环中只调用当前状态的绘制方法。

同样适用于 update 功能，每个状态都有自己的更新功能(在主菜单中，您可以更新按钮或设置动画，而在玩游戏时，您可以更新游戏世界并运行您的物理系统) .因此，根据当前状态，您的 update 函数实际上是不同的。如何构建代码以及如何根据当前状态调用不同的函数取决于您。

关于javascript - Canvas 游戏中的不同页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36156191/

24 4 0
文章推荐： java - 下载时限制带宽
文章推荐： android - Volley 和 Fragments - 如何等待请求结束
文章推荐： IntentService的onHandleIntent方法中的android.os.NetworkOnMainThreadException
文章推荐： android - 检查我的应用程序是否可以显示通知
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com