Skip to content

Instantly share code, notes, and snippets.

@hanjae-jea

hanjae-jea/ball2.html

Created December 20, 2016 11:22
Show Gist options
  • Save hanjae-jea/f99d7f3fbcf9a0f8f047410a8ad7d143 to your computer and use it in GitHub Desktop.
Save hanjae-jea/f99d7f3fbcf9a0f8f047410a8ad7d143 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ball2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>벽돌깨기</title>
<script type="text/javascript">
var myBody = null;
var canvas = null;
var context = null;
var width_canvas = 0;
var height_canvas = 0;
var movement = 4;
var x_my = 0; //공 4개의 x축 y축 좌표
var y_my = 0;
var x_my1 = 0;
var y_my1 = 0;
var x_my2 = 0;
var y_my2 = 0;
var x_my3 = 0;
var y_my3 = 0;
var angle = 0; //공 4개의 각도 초기화
var angle1 = 0;
var angle2 = 0;
var angle3 = 0;
function initBrick()
{
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
myBody = document.getElementById("myBody");
width_canvas = canvas.width;
height_canvas = canvas.height;
x_my = width_canvas/2; //공의 위치 초기화
y_my = height_canvas/2;
x_my1 = width_canvas/2;
y_my1 = height_canvas/3;
x_my2 = width_canvas/2;
y_my2 = height_canvas/6;
x_my3 = width_canvas/2;
y_my3 = height_canvas/3/10;
context.beginPath(); //첫번째공 생성
context.arc(x_my, y_my, 12, 0, 360*Math.PI/180, false);
context.closePath();
context.fill();
context.beginPath(); //두번째공 생성
context.arc(x_my1, y_my1, 12, 0, 360*Math.PI/180, false);
context.closePath();
context.fill();
context.beginPath(); //세번째공 생성
context.arc(x_my2, y_my2, 12, 0, 360*Math.PI/180, false);
context.closePath();
context.fill();
context.beginPath(); //네번째공 생성
context.arc(x_my3, y_my3, 12, 0, 360*Math.PI/180, false);
context.closePath();
context.fill();
angle = (Math.PI/180)*30; //(Math.PI/180)*Math.round(360*Math.random());
angle1 = (Math.PI/180)*30; //(Math.PI/180)*Math.round(360*Math.random());
angle2 = (Math.PI/180)*30; //(Math.PI/180)*Math.round(360*Math.random());
angle3 = (Math.PI/180)*30; //(Math.PI/180)*Math.round(360*Math.random());
}
function drawCanvas()
{
x_my += Math.round(Math.cos(angle)*movement);
y_my += Math.round(Math.sin(angle)*movement);
if(x_my+Math.round(Math.cos(angle)*movement) >= width_canvas || x_my-Math.round(Math.cos(angle)*movement) <= 0)
angle = (Math.PI/180)*Math.round(360*Math.random());
if(y_my-Math.round(Math.sin(angle)*movement) <=0 || y_my+Math.round(Math.sin(angle)*movement) >= height_canvas)
angle = (Math.PI/180)*Math.round(360*Math.random());
x_my1 += Math.round(Math.cos(angle1)*movement);
y_my1 += Math.round(Math.sin(angle1)*movement);
if(x_my1+Math.round(Math.cos(angle1)*movement) >= width_canvas || x_my1-Math.round(Math.cos(angle1)*movement) <= 0)
angle1 = (Math.PI/180)*Math.round(360*Math.random());
if(y_my1-Math.round(Math.sin(angle1)*movement) <=0 || y_my1+Math.round(Math.sin(angle1)*movement) >= height_canvas)
angle1 = (Math.PI/180)*Math.round(360*Math.random());
x_my2 += Math.round(Math.cos(angle2)*movement);
y_my2 += Math.round(Math.sin(angle2)*movement);
if(x_my2+Math.round(Math.cos(angle2)*movement) >= width_canvas || x_my2-Math.round(Math.cos(angle2)*movement) <= 0)
angle2 = (Math.PI/180)*Math.round(360*Math.random());
if(y_my2-Math.round(Math.sin(angle2)*movement) <=0 || y_my2+Math.round(Math.sin(angle2)*movement) >= height_canvas)
angle2 = (Math.PI/180)*Math.round(360*Math.random());
x_my3 += Math.round(Math.cos(angle3)*movement);
y_my3 += Math.round(Math.sin(angle3)*movement);
if(x_my3+Math.round(Math.cos(angle3)*movement) >= width_canvas || x_my3-Math.round(Math.cos(angle3)*movement) <= 0)
angle3 = (Math.PI/180)*Math.round(360*Math.random());
if(y_my3-Math.round(Math.sin(angle3)*movement) <=0 || y_my3+Math.round(Math.sin(angle3)*movement) >= height_canvas)
angle3 = (Math.PI/180)*Math.round(360*Math.random());
context.clearRect(0, 0, width_canvas, height_canvas);
context.beginPath();
context.arc(x_my, y_my, 10, 0, 360*Math.PI/180, false);
context.closePath();
/*context.arc(x_my1, y_my1, 10, 0, 360*Math.PI/180, false);
context.closePath();
context.arc(x_my2, y_my2, 10, 0, 360*Math.PI/180, false);
context.closePath();
context.arc(x_my3, y_my3, 10, 0, 360*Math.PI/180, false);
context.closePath();*/
context.fill();
}
setInterval("drawCanvas()", 14);
</script>
</head>
<body id="myBody" onload="initBrick();">
<canvas id="canvas" width="400" height="400" style="border:solid 1px #000000">
canvas 사용하기
</canvas><br>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment