-
CANVAS 연습14_1(배경 움직이기 + 사람 그리기)게임/HTML 연습 2018. 7. 1. 15:03반응형<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CANVAS 연습</title></head><body><canvas id="myCanvas" width="800" height="600" style="border: 1px dotted blue"></canvas><script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var bgImage = new Image();bgImage.src = "https://t1.daumcdn.net/cfile/tistory/99664A3B5B35D3182C";var userImage = new Image();userImage.src = "https://t1.daumcdn.net/cfile/tistory/99EC173B5B386A8429";var x = 0;
function Background() { //배경 움직이는 부분this.x = 0, this.y = 0, this.w = 2400, this.h = 600;this.render = function() {ctx.drawImage(bgImage, this.x-= 5, 0, 2400, 600);
if (this.x <= -1600) {this.x = 0;}};}
function Player() { //사람 그리기this.x = 0, this.y = 0, this.w = 200, this.h = 200;this.render = function () {ctx.drawImage(userImage, this.x, this.y);};}
var background = new Background(); //배경 & 사람 객체 만들기var player = new Player();
player.x = 30; //사람 좌표 설정player.y = 150;
function animate() { //배경, 사람 객체 그리기background.render();player.render();}
var animateInterval = setInterval(animate, 30); //animate 함수를 30ms마다 실행</script></body></html>결과:
반응형'게임 > HTML 연습' 카테고리의 다른 글
CANVAS 연습14_3(사람 움직임 && 멈춤) (1) 2018.07.01 CANVAS 연습14_2(배경 움직이기 && 키보드를 눌렀을 때 사람 움직임) (0) 2018.07.01 CANVAS 연습14(배경 움직이기) (0) 2018.07.01 CANVAS 연습13_2(클릭한 곳에 사각형 그리기) (0) 2018.06.29 CANVAS 연습13_1(사각형 이동 && 클릭시 멈춤) (0) 2018.06.29