집 > 기사 > 웹 프론트엔드 > 자바스크립트로 미니 게임을 작성하는 방법

자바스크립트로 미니 게임을 작성하는 방법

WBOY원래의: 2023-05-15 21:31:382804검색

요즘 JavaScript는 프론트엔드 개발에 없어서는 안될 기술이 되었습니다. 웹페이지 인터랙티브 효과를 개발할 수 있을 뿐만 아니라 간단한 미니게임을 구현할 수도 있습니다. 이 기사에서는 JavaScript로 미니 게임을 작성하는 방법을 소개합니다.

1. 준비

로컬 컴퓨터에 새 폴더를 만들고 적절한 이름을 지정하세요. 폴더에 새 HTML 파일을 생성하고 파일 헤드에 다음 코드를 추가합니다.

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

여기서 main.js는 작성할 JavaScript 스크립트 파일이고, 여기서 참조되는 파일은 다음과 같습니다. 생성된 파일입니다. main.js 파일을 생성하고 HTML 파일과 동일한 폴더에 배치합니다. 이제 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. 게임 작성

캔버스 만들기

먼저 HTML 파일에 캔버스 요소를 만들어 게임 화면을 렌더링합니다.

rrreee

JavaScript 파일에서 요소의 컨텍스트를 가져와 변수에 저장합니다.

rrreee

이제 캔버스 캔버스에 그래픽을 그릴 수 있습니다.

게임 배경 및 기타 개체 그리기

다음으로 게임 배경 및 기타 개체를 그려야 합니다. 여기에서는 배경, 공, 배플과 같은 다양한 객체를 그리는 다양한 기능을 정의할 수 있습니다. 여기서는 먼저 게임의 배경을 그리는 함수를 정의합니다.

rrreee

이 함수에서는 먼저 색상 값을 정의하여 캔버스 배경을 채운 다음 fillRect() 메서드를 사용하여 캔버스 전체를 채웁니다. 🎜

동적으로 게임 업데이트

🎜이제 캔버스에 다양한 개체를 그리는 기능이 있으므로 게임을 "움직이게" 만들 차례입니다. 🎜🎜여기서 함수의 재귀 호출 방식을 사용하여 게임 화면을 지속적으로 새로 고칠 수 있습니다. 여기서는 update() 함수를 정의한 다음 window.requestAnimationFrame()을 사용하여 이를 호출하여 게임 새로 고침을 시작합니다. 🎜rrreee🎜이 함수에서는 먼저 drawBackground() 함수를 호출하여 게임의 배경을 그립니다. 그런 다음 requestAnimationFrame() 함수를 사용하여 update() 함수 자체를 호출하여 게임 화면을 반복적으로 업데이트하는 효과를 얻습니다. 🎜

공의 이동 방향 제어

🎜이제 캔버스에 개체를 그릴 수 있으므로 공의 이동 방향을 제어하는 작업을 추가해야 합니다. 공. 먼저 위치 정보와 방향 정보를 기록하기 위해 저장할 작은 공을 정의합니다. 🎜rrreee🎜이 개체에서는 공의 시작 위치(즉, 캔버스의 중심 위치)를 정의하고, dx와 dy는 공의 초기 이동 방향을 나타내며, radius는 공의 반경입니다. 🎜🎜update() 함수에서 공 이동, 충돌 감지 및 기타 작업을 위한 코드를 추가할 수 있습니다. 🎜rrreee🎜 이 함수에서는 먼저 공의 움직임을 계산한 다음 충돌 감지를 사용하여 공이 캔버스 가장자리에 닿는지 여부를 감지합니다. 그렇다면 공의 이동 방향을 반대로 하고 계속 이동하십시오. 🎜

배플의 움직임 제어

🎜공의 방향과 움직임을 제어했으니 이제 움직임을 제어하는 작업을 추가해야 합니다. 배플의. 🎜rrreee🎜여기서 먼저 배플의 위치, 길이 및 높이를 정의합니다. 그런 다음 drawPaddle() 함수를 통해 베젤을 그린 다음 keydown 및 keyup 이벤트를 수신하여 사용자가 해당 키를 누르는지 감지합니다. 키를 눌러 베젤을 이동하세요. 🎜🎜동시에 이 함수에서는 공과 배플 사이의 충돌을 감지하는 코드도 추가해야 합니다. 공이 배플에 닿으면 공의 y 방향이 직접 반전됩니다. 기본적으로 공은 계속 움직이며 멈출 수 없습니다. 공이 캔버스 바닥에 완전히 닿으면 게임이 종료됩니다. 🎜🎜3. 요약🎜🎜지금까지 작은 JavaScript 게임 작성을 완료했습니다. 이것은 간단한 작은 게임 예입니다. HTML5 캔버스와 JavaScript 스크립트를 사용하여 기본 게임을 완성했습니다. 🎜🎜물론, 이 코드들은 이 글에서 제공하는 예시일 뿐이며 게임 작성의 기초로 사용될 수 있습니다. 더 복잡한 게임플레이를 갖춘 대규모 게임을 작성하려면 더 심층적인 JavaScript 기본 사항과 게임 개발 기술을 배워야 합니다. 🎜🎜아직 이 분야를 접해본 적이 없다면 이 글의 소개를 따라 자신만의 작은 게임을 작성해 보세요! 🎜

위 내용은 자바스크립트로 미니 게임을 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：JavaScript는 배열 합계 집합을 정의합니다.다음 기사：JavaScript는 배열 합계 집합을 정의합니다.