Поскольку вы создаете игру, у вас тоже будет холст
Поэтому используйте этот код, если у вас есть какие-либо вопросы, задавайте мне
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>
Надеюсь, это поможет!