Maison > Article > interface Web > Comment écrire un mini-jeu en javascript

Comment écrire un mini-jeu en javascript

WBOYoriginal: 2023-05-15 21:31:382804parcourir

De nos jours, JavaScript est devenu une compétence indispensable dans le développement front-end. Il peut non seulement développer des effets interactifs sur des pages Web, mais également implémenter des mini-jeux simples. Cet article explique comment écrire des mini-jeux en JavaScript.

1. Préparation

Créez un nouveau dossier sur votre ordinateur local et donnez-lui un nom approprié. Créez un nouveau fichier HTML dans le dossier et ajoutez le code suivant en tête du fichier :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript Game</title>
</head>
<body>
    
</body>
<script src="main.js"></script>
</html>

Le main.js voici le fichier script JavaScript à écrire. Ce qui est cité ici est que le fichier a été créé. Créez le fichier main.js et placez-le dans le même dossier que le fichier HTML. À ce stade, nous pouvons commencer à écrire du code JavaScript. main.js就是将要编写的JavaScript脚本文件，这里引用的是已创建完成的文件。创建main.js文件，和HTML文件放在同一个文件夹下，此时我们就可以开始编写JavaScript代码了。

二、编写游戏

创建画布

首先，在 HTML 文件中创建一个canvas元素，用来渲染游戏画面。

<body>
    <canvas id="myCanvas"></canvas>
</body>

在 JavaScript 文件中，获取该元素的上下文（context），并将其保存在变量中。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

现在，我们已经可以在canvas画布上绘制图形了。

绘制游戏背景和其他物体

接下来，我们需要绘制游戏的背景和其他物体。在这里，我们可以分别定义不同的函数来绘制不同的物体，比如背景、球和挡板等。在这里，我们先定义一个函数，来绘制游戏的背景。

function drawBackground() {
    ctx.fillStyle = "#3c3c3c";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

在这个函数里，我们首先定义了一个颜色值用来填充画布背景，然后使用fillRect()方法来填充整个画布。

动态更新游戏

现在，我们已经拥有了用来绘制画布上各种物体的函数，该开始让游戏开始“动起来”了。

在这里，我们可以使用函数的递归调用方式来实现不断刷新游戏画面。这里我们定义一个函数update()，然后用window.requestAnimationFrame()来调用它，开始刷新游戏。

function update() {
    drawBackground();

    requestAnimationFrame(update);
}

update(); // 调用 update() 函数以开始刷新游戏

在这个函数里，我们首先调用了drawBackground()函数来绘制游戏的背景。然后，我们使用requestAnimationFrame()函数调用了update()函数本身，来实现不断重复更新游戏画面的效果。

控制球移动方向

现在，我们已经可以在画布上绘制物体了，接下来我们需要加入控制球移动方向的操作。首先，我们定义一个小球保存用来记录它的位置信息，和方向信息。

var ball = {
    x: canvas.width/2,
    y: canvas.height-30,
    dx: 2,
    dy: -2,
    radius: 10
};

在这个对象中，我们定义了球的起始位置（即画布的中心位置），dx和dy表示球的初始移动方向，radius为球的半径。

在update()函数中，我们可以添加对球移动、碰撞检测等操作的代码。

function update() {
    drawBackground();

    // 移动球
    ball.x += ball.dx;
    ball.y += ball.dy;

    // 碰撞检测
    if(ball.x + ball.dx > canvas.width-ball.radius || ball.x + ball.dx < ball.radius) {
        ball.dx = -ball.dx;
    }
    if(ball.y + ball.dy > canvas.height-ball.radius || ball.y + ball.dy < ball.radius) {
        ball.dy = -ball.dy;
    }

    requestAnimationFrame(update);
}

update();

在这个函数中，我们首先计算了球的移动，然后通过碰撞检测来检测球是否触碰了画布边缘。若是，则将球的运动方向反转，然后继续移动。

控制挡板移动

现在我们已经控制好了球的方向和行动，接下来需要加入控制挡板移动的操作。

var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth) / 2;

function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

var rightPressed = false;
var leftPressed = false;

function keyDownHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37) {
        leftPressed = true;
    }
}

function keyUpHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
    }
}

function update() {
    drawBackground();
    drawPaddle();

    // 移动球
    ball.x += ball.dx;
    ball.y += ball.dy;

    // 控制挡板移动
    if(rightPressed && paddleX < canvas.width-paddleWidth) {
        paddleX += 7;
    }
    else if(leftPressed && paddleX > 0) {
        paddleX -= 7;
    }

    // 碰撞检测
    if(ball.x + ball.dx > canvas.width-ball.radius || ball.x + ball.dx < ball.radius) {
        ball.dx = -ball.dx;
    }
    if(ball.y + ball.dy < ball.radius) {
        ball.dy = -ball.dy;
    }
    else if(ball.y + ball.dy > canvas.height-ball.radius) {
        if(ball.x > paddleX && ball.x < paddleX + paddleWidth) {
            ball.dy = -ball.dy;
        }
        else {
            alert("游戏结束");
            document.location.reload();
            clearInterval(interval);
        }
    }

    requestAnimationFrame(update);
}

update();

在这里，我们首先定义了一个挡板的位置，和其长度、高度。然后我们通过drawPaddle()函数来绘制挡板，接下来监听keydown和keyup

2. Écrire le jeu

Créer un canevas

Tout d'abord, créez un

canevas dans le HTML élément code de fichier>, utilisé pour restituer l’écran de jeu. <p>rrreee</p>Dans le fichier JavaScript, récupérez le contexte de l'élément et enregistrez-le dans une variable. <p>rrreee</p>Maintenant, nous pouvons dessiner des graphiques sur le canevas <code>canvas

Dessinez l'arrière-plan du jeu et d'autres objets

Ensuite, nous devons dessiner l'arrière-plan du jeu et d'autres objets. Ici, nous pouvons définir différentes fonctions pour dessiner différents objets, tels que des arrière-plans, des boules et des déflecteurs. Ici, nous définissons d’abord une fonction pour dessiner l’arrière-plan du jeu.

rrreee

Dans cette fonction, nous définissons d'abord une valeur de couleur pour remplir l'arrière-plan du canevas, puis utilisons la méthode fillRect() pour remplir tout le canevas. #🎜🎜#

Mise à jour dynamique du jeu

#🎜🎜#Maintenant que nous avons les fonctions pour dessiner divers objets sur la toile, il est temps de commencer Le jeu commence à « bouger ». #🎜🎜##🎜🎜#Ici, nous pouvons utiliser la méthode d'appel récursive de la fonction pour actualiser continuellement l'écran de jeu. Ici, nous définissons une fonction update(), puis utilisons window.requestAnimationFrame() pour l'appeler et commencer à actualiser le jeu. #🎜🎜#rrreee#🎜🎜#Dans cette fonction, on appelle d'abord la fonction drawBackground() pour dessiner l'arrière-plan du jeu. Ensuite, nous utilisons la fonction requestAnimationFrame() pour appeler la fonction update() elle-même afin d'obtenir l'effet de mise à jour répétée de l'écran de jeu. #🎜🎜#

Contrôler la direction de déplacement de la balle

#🎜🎜#Maintenant que nous pouvons dessiner des objets sur la toile, nous devons ajouter le contrôle de les opérations de direction du mouvement du ballon. Tout d’abord, nous définissons une petite boule à sauvegarder pour enregistrer ses informations de position et ses informations de direction. #🎜🎜#rrreee#🎜🎜#Dans cet objet, nous définissons la position de départ de la balle (c'est-à-dire la position centrale de la toile), dx et dy représentent la direction initiale du mouvement de la balle, et radius est le rayon du ballon. #🎜🎜##🎜🎜#Dans la fonction update(), nous pouvons ajouter du code pour le mouvement de la balle, la détection de collision et d'autres opérations. #🎜🎜#rrreee#🎜🎜#Dans cette fonction, nous calculons d'abord le mouvement de la balle, puis utilisons la détection de collision pour détecter si la balle touche le bord de la toile. Si tel est le cas, inversez la direction du mouvement de la balle et continuez à vous déplacer. #🎜🎜#

Contrôler le mouvement du déflecteur

#🎜🎜#Maintenant que nous avons contrôlé la direction et le mouvement de la balle, nous devons ajouter le contrôle du déflecteur Mobile opérations. #🎜🎜#rrreee#🎜🎜#Ici, on définit d'abord la position d'un baffle, sa longueur et sa hauteur. Ensuite, nous dessinons le cadre via la fonction drawPaddle(), puis écoutons les événements keydown et keyup pour détecter si l'utilisateur appuie sur la touche correspondante. touche. Déplacez la lunette. #🎜🎜##🎜🎜#En même temps, dans cette fonction, vous devez également ajouter du code pour détecter la collision entre la balle et le déflecteur. Si la balle touche le déflecteur, la direction y de la balle sera directement inversée. Par défaut, la balle continuera à bouger et ne pourra pas s'arrêter. Le jeu se termine lorsque le ballon touche complètement le bas de la toile. #🎜🎜##🎜🎜#3. Résumé#🎜🎜##🎜🎜#Jusqu'à présent, nous avons terminé l'écriture d'un petit jeu JavaScript. Il s'agit d'un simple petit exemple de jeu. Nous venons de terminer un jeu de base utilisant un canevas HTML5 et un script JavaScript. #🎜🎜##🎜🎜#Bien sûr, ces codes ne sont qu'un exemple fourni dans cet article et peuvent servir de base à l'écriture de jeux. Si nous voulons écrire des jeux à grande échelle avec un gameplay plus complexe, nous devons apprendre les bases de JavaScript et les compétences en développement de jeux plus en profondeur. #🎜🎜##🎜🎜#Si vous n'avez pas encore été exposé à ce domaine, alors essayez de suivre l'introduction de cet article et écrivez votre propre petit jeu ! #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：JavaScript définit un ensemble de sommes de tableauxArticle suivant：JavaScript définit un ensemble de sommes de tableaux

Articles Liés

Voir plus