각도 속도에 따라 움직이는 공을 만들어볼 것이다.
알고 가야 할 것은
Canvas는 ID값이 필수로 들어가는 태그이다. 그 이유는 문서가 로드된 후 Canvas위에 이미지를 그릴 수 있기 때문
JavaScipt로 CanvasID 값을 가져오고 2d형식의 그림을 그린다고 정의하는 소스코드 작성 후
init함수 안에 소스코드를 넣는다.
context = document.getElementById('canvas').getContext('2d');
onload이벤트를 body태그에 연결 후 init함수를 호출하면 Canvas에 이미지를 얹는 게 성공적으로 나와야 하는데 drawImage 메서드에서 Error가 발생한다.. 아래..
HTMLImageElement provided is in the 'broken' state.
책에 있는 소스코드라 내 문법이 틀렸겠거니 하고 몇 번을 보았는데 틀린 곳은 없다.. 어떻게든 해결하고 싶어 해당 Error내용을 구글링 해보았다. UserAgent 문제 등 여러 정보들을 찾아보던 중 해당 Error는 load가 제대로 안돼 문제가 발생한다는 내용이었고 거기에서 addEventListener 메서드로 해결책을 찾았다. 해당 메서드는 이벤트 핸들을 한 번 더 주는 메서드인데 객채화된 이미지를 addEventListener 메서드로 한번 더 load 시켰더니 정상적으로 Canvas에 이미지가 얹힌 걸 확인할 수 있었다.
핵심 내용인 Canvas에 그려진 공이 포물선을 그리며 움직이는 소스코드는 무작정 작성하여 정상 동작하는 것까지 확인하였다.
핵심 내용은 난중에 코드 분석글을 올릴 예정이다.(수학 삼각함수 cos, tan가 들어가 이해하는데 시간이 필요할 것 같다...)
아래 전체 코드 소스이다.(파일 첨부)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
canvas {
border:1px dotted violet;
background-color:tomato;
}
</style>
<script type="text/javascript">
//초기변수
var context;
var velocity;
var angle;
var ballv;
var ballvx;
var ballvy;
var ballX = 10;
var ballY = 250;
var ballRadius = 10;
var score = 0;
var timer;
//공
function drawBall() {
context.beginPath();
context.arc(ballX,ballY,ballRadius,0,2.0*Math.PI,true);
context.fillStyle="yello";
context.fill();
}
//캔버스 초기화 후 배경,공 호출
function draw(){
context.clearRect(0,0,500,300);
drawBackground();
drawBall();
}
//배경
function drawBackground() {
//이미지 객체 생성
var image = new Image();
var backimage = new Image();
//body가 load 상태에서 이미지를 한번더 load
image.addEventListener('load', function(){
context = document.getElementById('canvas').getContext("2d");
// canvas위에 얹을 이미지 좌표 선정
context.drawImage( image ,0, 270);
},false);
backimage.addEventListener('load', function(){
//배경이미지 동일
context = document.getElementById('canvas').getContext("2d");
context.drawImage( backimage ,450, 60);
},false);
//이미지 경로 설정
image.src="lawn.png";
backimage.src="net.png";
}
/* html실행시 초기화 */
function init(){
ballX = 10;
ballY = 250;
ballRadius = 10;
context = document.getElementById('canvas').getContext('2d');
draw();
}
//발사버튼
function start() {
init();
velocity = Number(document.getElementById("velocity").value);
angle = Number(document.getElementById("angle").value);
var angleR = angle * Math.PI / 180;
ballvx = velocity * Math.cos(angleR);
ballvy = -velocity * Math.tan(angleR);
draw();
timer = setInterval(calculate,100);
return false;
}
//공의값 계산
function calculate() {
//중력 가속도
ballvy = ballvy + 1.98;
ballX = ballX + ballvx;
ballY = ballY + ballvy;
draw();
//공이 골대 이미지에 이동했을때
if((ballX >= 450) && (ballX <=480) && (ballY >=60) && (ballY <=210)) {
score++; //스코어 1점 누적
document.getElementById("scr").innerHTML = "점수=" + score;
//1점당 속도 각도 초기화
document.getElementById("velocity").value = "0";
document.getElementById("angle").value = "0";
clearInterval(timer);
}
//경계를 벚어났을때
if(ballY >=300 || ballY <0) {
clearInterval(timer);
}
draw();
}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="500" height="300" ></canvas>
<div id = "ctrl">
속도<input id = "velocity" value = "10" min="0" max="100" type="number" step="1">
각도<input id = "angle" value = "10" min="0" max="100" type="number">
<button onclick="start()">발사</button>
<div id="scr">점수 = 0</div>
</div>
</body>
</html>
"HTML CSS3 JavaScript로 배우는 웹프로그래밍 기초" 참조
'web_무작정따라해보자' 카테고리의 다른 글
| JSP 강의평가 웹 사이트 개발하기 완료(3일소요) (0) | 2020.02.06 |
|---|
