html5미니게임 제작 아이디어 상세 설명
소개
캔버스 만들기
게임 루프
Hello world
플레이어 생성
키보드 제어
a: jQuery 단축키 사용
b: 플레이어 이동
게임 요소 추가
포탄
적
이미지 사용
충돌 감지
소리
소개
HTML5를 사용하고 싶습니다. 캔버스 게임을 만든다고? 이 튜토리얼을 따라하면 곧 시작하게 될 것입니다.
이 튜토리얼을 읽으려면 최소한 javascript에 대한 지식이 필요합니다.
게임을 먼저 플레이해도 되고, 기사를 직접 읽고 게임 소스코드를 다운로드해도 됩니다.
캔버스 만들기
무언가를 그리기 전에 먼저 캔버스를 만들어야 합니다. 이는 완전한 가이드이고 우리는 jQuery를 사용할 것이기 때문입니다.
var CANVAS_WIDTH = 480;
var CANVAS_HEIGHT = 320;
var canvasElement = $("<canvas width='" + CANVAS_WIDTH +
"' height='" + CANVAS_HEIGHT + "'></canvas>");
var canvas = canvasElement.get(0).getContext("2d");
canvasElement.appendTo('body');Game Loop
플레이어에게 일관되고 원활한 게임애니메이션을 제공하기 위해 우리는 플레이어의 눈을 속이기 위해 캔버스를 자주 렌더링해야 합니다.
var FPS = 30;
setInterval(function() {
update();
draw();
}, 1000/FPS);이제 우리는 업데이트 및 그리기 구현에 신경 쓰지 않습니다. 중요한 것은 setInterval()이 주기적으로 업데이트 및 그리기를 실행한다는 점입니다
Hello world
. 루프 설정 선반에서 업데이트 및 그리기 메서드를 수정하여 화면에 일부 텍스트를 씁니다.
function draw() {
canvas.fillStyle = "#000"; // Set color to black
canvas.fillText("Sup Bro!", 50, 50);
}전문가 알림: 일부 코드를 약간 변경할 때 프로그램을 실행하면 프로그램에서 오류를 더 빨리 찾을 수 있습니다.
스틸 텍스트는 정상적으로 표시됩니다. 이미 루프가 있기 때문에 쉽게 텍스트를 이동할 수 있습니다~~
아아아아프로그램을 실행해 보세요. 차근차근 따라해보시면 텍스트가 움직이는 것을 보실 수 있습니다. 하지만 캔버스를 지우지 않았기 때문에 지난 번에 쓴 텍스트가 여전히 화면에 남아 있습니다. 이제 그리기 메서드에 지우기 메서드를 추가합니다.
아아아아이제 화면에서 움직이는 텍스트를 볼 수 있으니 이 게임은 실제 게임이고 진행 중인 작업입니다.
플레이어 생성
플레이어의 모든 정보를 담고 있는 오브젝트를 생성하며, 드로우 메소드가 있어야 합니다. 모든 플레이어 정보를 포함하는 간단한 개체가 여기에 생성됩니다.
var textX = 50;
var textY = 50;
function update() {
textX += 1;
textY += 1;
}
function draw() {
canvas.fillStyle = "#000";
canvas.fillText("Sup Bro!", textX, textY);
}이제 플레이어를 나타내기 위해 단색 직사각형을 사용합니다. 이를 게임에 추가할 때 캔버스를 지우고 플레이어를 그려야 합니다.
function draw() {
canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
canvas.fillStyle = "#000";
canvas.fillText("Sup Bro!", textX, textY);
}키보드 컨트롤
jQuery Hotkeys 사용
jQuery Hotkeys 플러그인을 사용하면 키보드 동작을 처리할 때 다양한 브라우저와 더 쉽게 호환될 수 있습니다. 개발자가 브라우저마다 다른 keyCode와 charCode에 대해 걱정할 필요가 없도록 이벤트 를 다음과 같이 바인딩합니다.
var player = {
color: "#00A",
x: 220,
y: 270,
width: 32,
height: 32,
draw: function() {
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.width, this.height);
}
};충분히 빠르게 움직이지 않는 것 같나요? 그럼 이동 속도를 높여보겠습니다.
function draw() {
canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
player.draw();
}포탄과 같은 다른 요소를 쉽게 추가할 수 있습니다.
$(document).bind("keydown", "left", function() { ... });
移动player
function update() {
if (keydown.left) {
player.x -= 2;
}
if (keydown.right) {
player.x += 2;
}
}더 많은 게임 요소 추가
포탄
실제 게임을 시작하겠습니다. 먼저 cannonball을 저장하기 위한 컬렉션이 필요합니다:
function update() {
if (keydown.left) {
player.x -= 5;
}
if (keydown.right) {
player.x += 5;
}
player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);
}그런 다음 cannonball을 생성하기 위한 생성자가 필요합니다:
function update() {
if (keydown.space) {
player.shoot();
}
if (keydown.left) {
player.x -= 5;
}
if (keydown.right) {
player.x += 5;
}
player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);
}
player.shoot = function() {
console.log("Pew pew");
// :) Well at least adding the key binding was easy...
};플레이어가 발사할 때, 다음으로 발사해야 합니다. 컬렉션 대포알 추가:
var playerBullets = [];
발사 구현을 위한 업데이트 및 그리기 메서드 수정: function Bullet(I) {
I.active = true;
I.xVelocity = 0;
I.yVelocity = -I.speed;
I.width = 3;
I.height = 3;
I.color = "#000";
I.inBounds = function() {
return I.x >= 0 && I.x <= CANVAS_WIDTH &&
I.y >= 0 && I.y <= CANVAS_HEIGHT;
};
I.draw = function() {
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.width, this.height);
};
I.update = function() {
I.x += I.xVelocity;
I.y += I.yVelocity;
I.active = I.active && I.inBounds();
};
return I;
}player.shoot = function() {
var bulletPosition = this.midpoint();
playerBullets.push(Bullet({
speed: 5,
x: bulletPosition.x,
y: bulletPosition.y
}));
};
player.midpoint = function() {
return {
x: this.x + this.width/2,
y: this.y + this.height/2
};
};
사진 사용
function update() {
...
playerBullets.forEach(function(bullet) {
bullet.update();
});
playerBullets = playerBullets.filter(function(bullet) {
return bullet.active;
});
}
function draw() {
...
playerBullets.forEach(function(bullet) {
bullet.draw();
});
}충돌 감지
enemies = [];
function Enemy(I) {
I = I || {};
I.active = true;
I.age = Math.floor(Math.random() * 128);
I.color = "#A2B";
I.x = CANVAS_WIDTH / 4 + Math.random() * CANVAS_WIDTH / 2;
I.y = 0;
I.xVelocity = 0
I.yVelocity = 2;
I.width = 32;
I.height = 32;
I.inBounds = function() {
return I.x >= 0 && I.x <= CANVAS_WIDTH &&
I.y >= 0 && I.y <= CANVAS_HEIGHT;
};
I.draw = function() {
canvas.fillStyle = this.color;
canvas.fillRect(this.x, this.y, this.width, this.height);
};
I.update = function() {
I.x += I.xVelocity;
I.y += I.yVelocity;
I.xVelocity = 3 * Math.sin(I.age * Math.PI / 64);
I.age++;
I.active = I.active && I.inBounds();
};
return I;
};
function update() {
...
enemies.forEach(function(enemy) {
enemy.update();
});
enemies = enemies.filter(function(enemy) {
return enemy.active;
});
if(Math.random() < 0.1) {
enemies.push(Enemy());
}
};
function draw() {
...
enemies.forEach(function(enemy) {
enemy.draw();
});
}소리 추가
player.sprite = Sprite("player");
player.draw = function() {
this.sprite.draw(canvas, this.x, this.y);
};
function Enemy(I) {
...
I.sprite = Sprite("enemy");
I.draw = function() {
this.sprite.draw(canvas, this.x, this.y);
};
...
}위 내용은 HTML5 미니게임 제작 아이디어의 코드 예시를 자세히 소개합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
