javascrip로 canvas를 이용하여 횡스크롤 장애물 피하기 만들어보자
※ 소스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game 2</title>
</head>
<body>
<div>
<canvas id="canvas1" style="width: 100%; height: 100%"></canvas>
</div>
<script>
let walls = [];
const PI2 = Math.PI * 2; // 360도
const size = 40, mv = 10;
const ctx = canvas1.getContext('2d');
const ctx_size = () => {
ctx.width = canvas1.width = window.innerWidth - 15;
ctx.height = canvas1.height = window.innerHeight - 15;
}
function keyDownHandler(e) {
event.preventDefault();
if(e.key == 38 || e.key == "ArrowUp") {
player.move(0, -mv);
}
else if(e.key == 40 || e.key == "ArrowDown") {
player.move(0, mv);
}
}
function mousedownHandler(e) {
if (e.offsetY < ctx.height / 2) {
player.move(0, -mv);
} else {
player.move(0, mv);
}
}
const rnd = (m, n = 0) => Math.random() * m + n; // 램덤값
let score = 0;
// 키보드 및 마우스
document.onkeydown = keyDownHandler;
document.onmousedown = mousedownHandler;
// 화면 크기 변하면 캔버스 크기 변경
window.onresize = ctx_size;
class Player {
constructor(x, y) { // ball의 기본 속성들을 정의
this.x = x;
this.y = y;
this.width = size;
this.height = size - 10;
this.color = "blue";
}
move(x, y) {
this.x += x;
this.y += y;
if (this.y > ctx.height) this.y = 0;
if (this.y < 0) this.y = ctx.height - this.height;
if (this.x > ctx.width) this.x = 0;
if (this.x < 0) this.x = ctx.width - this.width;
}
draw() { // 그림을 그리기
ctx.fillStyle = this.color;
ctx.lineWidth = 2;
ctx.strokeStyle= "red";
ctx.fillRect(this.x, this.y, this.width, this.height);
ctx.strokeRect(this.x, this.y, this.width, this.height);
}
}
class Wall {
constructor(x, y) { // ball의 기본 속성들을 정의
this.x = x;
this.y = y;
this.width = size;
this.height = size - 10;
this.color = 'rgba('+rnd(255)+','+rnd(255)+','+rnd(255)+')';
}
update() { // 프레임마다 속성들을 변화시킴
if (this.x > -size) {
this.x -= 1;
} else {
this.x = ctx.width + size;
this.y = rnd(ctx.height - this.height);
}
}
chkTarget(target) {
return this.y + this.height > target.y
&& this.y < target.y + this.height
&& this.x + this.width > target.x
&& this.x < target.x + this.width;
}
draw() { // 그림을 그리기
if (this.y > 0 && this.y < ctx.height) {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
}
function init() {
let x = 0;
for(let i = 0; i < 100; i++) {
x += size;
walls.push(new Wall(ctx.width + x,rnd(ctx.height - size)));
}
}
function animate() {
let go = true;
// 전체 화면 지우기.
ctx.fillStyle='rgba(255, 255, 255, 1)';
ctx.fillRect(0, 0, ctx.width, ctx.height);
player.draw();
for(i = 0; i < walls.length; i++){
walls[i].update();
walls[i].draw();
if (walls[i].chkTarget(player)) go = false;
}
score ++;
let scoreDIS = `SCORE : ${score}`;
ctx.font = "30px Frutiger";
ctx.lineWidth = 2;
ctx.strokeStyle = 'blue';
ctx.strokeText(scoreDIS, 10, 50);
if (go) requestAnimationFrame(animate);
}
ctx_size();
let player = new Player(50, ctx.height / 2);
init();
animate();
</script>
</body>
</html>
※ 실행화면
728x90
'Software > JavaScript' 카테고리의 다른 글
| JavaScript 시작하기 - canvas에 이미지 그리기 (0) | 2024.06.27 |
|---|---|
| JavaScript 시작하기 - canvas 스크롤 게임 1 (0) | 2024.06.27 |
| JavaScript 시작하기 - canvas 공 바운딩 (0) | 2024.06.27 |
| JavaScript 시작하기 - SVG 바둑판 (0) | 2024.06.25 |
| JavaScript 시작하기 - 이미지 사물인식(1) (0) | 2024.06.18 |