-
CANVAS 연습15(공 던지기 게임)게임/HTML 연습 2018. 7. 3. 13:21반응형<!doctype html><html><head><meta charset="UTF-8"><title>Document</title><script src="tps://code.jquery.com/jquery-3.3.1.min.js"></script></head><body onload = "init();"><canvas id="myCanvas" width = "500" height="300" style="border: 1px dotted blue"></canvas>
<div id="control">속도<input id="velocity" value = "30" type="number" min="0" max = "100" step="1"/>각도<input id="angle" value= "45" type="number" min="0" max="90" step="1"/><div id="score">점수: 0</div><button onclick="start()">발사</button></div>
<script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext('2d');
var velocity; //사용자가 입력한 공의 초기속도var angle; //사용자가 입력한 공의 초기 각도var ballV; //공의 현재 속도var ballVx; //공의 현재 X방향 속도 (변하지 않는다.)var ballVy; // 공의 현제 Y방향 속도 (중력 가속도만큼 점점 느려진다.)var ballX = 10; //공의 현재 X좌표var ballY = 250; //공의 현재 Y좌표var ballRadius = 10; //공의 반지름var score = 0; //점수var timer; //타이머 객체 변수
function drawBall() { //공을 화면에 그린다.ctx.beginPath();ctx.arc(ballX, ballY, ballRadius, 0, 2.0 * Math.PI, true);ctx.fillStyle = "red";ctx.fill();}
function drawBackground() { //배경을 화면을 그리는 함수ctx.strokeRect(450, 60, 10, 100);}
function draw() { //전체 화면을 그리는 함수ctx.clearRect(0, 0, 500, 300);drawBall();drawBackground();}
function init() { //초기화 담당 함수ballX = 10;ballY = 250;ballRadius = 10;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.sin(angleR);
draw();timer = setInterval(calculate, 50);return false}
function calculate() { //공의 현재 속도와 위치 업데이트ballVy = ballVy + 1.98; //y좌표가 위에서 아래로 가면서 증가함//중력가속도만큼 더해야 함ballX = ballX + ballVx; //현재 위치 + 속도ballY = ballY + ballVy;
//공이 목표물에 맞았으면if ((ballX >= 450) && (ballX <= 480) && (ballY >= 60) && (ballY <= 210)) {score++;document.getElementById("score").innerHTML = "점수: " + score;clearInterval(timer);}
//공이 경계를 벗어났으면if (ballY >= 300 || ballY < 0){clearInterval(timer); //setInterval함수 중단}draw();}</script></body></html>
결과:
속도 각도점수: 0발사 글씨를 누르시오!
반응형'게임 > HTML 연습' 카테고리의 다른 글
CANVAS 연습17(마우스 커서 좌표) (0) 2018.07.04 CANVAS 연습16(save() && restore()) (0) 2018.07.03 CANVAS 연습14_3(사람 움직임 && 멈춤) (1) 2018.07.01 CANVAS 연습14_2(배경 움직이기 && 키보드를 눌렀을 때 사람 움직임) (0) 2018.07.01 CANVAS 연습14_1(배경 움직이기 + 사람 그리기) (1) 2018.07.01