Question

我正在开发使用JavaScript的游戏，并且我想拥有1990年代经典游戏的场景，其中文本以瞬间间隔出现，然后在用户单击时消失。有没有一种方法可以仅使用JavaScript？

我现在正在使用PhpStorm。我和朋友一起设计蓝图时，我还没有开始。对于从哪里开始，我也有些困惑，因为我一直在寻找方法，但是没有运气。

Answer 1

自从制作游戏以来，您的画布也会太多

如果有任何问题请使用此代码

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
</body>
</html>

JavaScript

<script>

var myGamePiece;
var myTitle;

//Function To Start the Game
function startGame() {
    myTitle = new component("20px", "Consolas", "black", 150, 135, "text");
    myGameArea.start();
}

// myGameArea Is The Canvas in Which The Whole Drawing Process Will be Drawn & The Title Is Drawn In This Too
var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
// setInterval Function Draws the Canvas 50 times in a Second You Can Change The Value Of  50 IF You Want
        this.interval = setInterval(updateGameArea, 50);
        },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
}

// Component Function Makes a New Component Like We Have A Title By Component Function
function component(width, height, color, x, y, type) {
    this.type = type;
    this.width = width;
    this.height = height; 
    this.x = x;
    this.y = y;    
    this.update = function() {
        ctx = myGameArea.context;
// This Checks if Component Type is Text And Every Frame is Divided By 70 Then Nothing Will Happen Else Your Title Will Appear You Glitch is Because Of This Function You Can The Value As You Want

        if (this.type == "text" && everyinterval(70) ) {

        } else {
            ctx.font = this.width + " " + this.height;
            ctx.fillStyle = color;
            ctx.fillText(this.text, this.x, this.y);
        }
    }

}
// This Function Updates GameArea (The Canvas) I Added The Frame No So You Can See The Glitch At Every Frame Number

function updateGameArea() {
    myGameArea.frameNo += 1;
    myGameArea.clear();
  myTitle.text = "Title Glitching at " + myGameArea.frameNo;
  myTitle.update();

}

// The Function To Make The Glitch Which Divide's The FrameNo By "n" Number
function everyinterval(n) {
    if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
    return false;
}

</script>

希望这会有所帮助！

在JavaScript中使用<p>标记在屏幕上显示文本样式

1 个答案: