728x90
반응형
<오늘 배운것>
1.어제 만든 공튀기기 완성
2.스크립트를 사용하여 빙고 만들기
3.for 반복문
오늘은 공튀기기를 완성하였다
공이 패들 위에서 튀기게 하는것까지 완성을 하였고
추가적으로 점수와 목숨을 넣었다
// 점수
let score = 0;
// 생명
let life =3;
// 생명판
function lifeBoard(){
ctx.font = "16px Arial";
ctx.fillStyle = "blue";
ctx.fillText("life :"+life, canvas.width-65, 20);
}
if(x+dx>canvas.width-ballRadius || x+dx <0+ballRadius){
dx = -dx;
}
if(y+dy< 0+ballRadius || (x >= paddleX && x <= paddleX+paddleWidth &&
y+ballRadius == paddleY)){
dy = -dy;
}
else if(y+ballRadius >canvas.height){
life--
x= canvas.width/ 2;
y= canvas.height -50;
dx = 3;
dy =-2;
if(life ==0){
alert("Game over\n현재점수는 "+score+"점");
document.location.reload();
}
}
처음 시작목숨은 3
패들을 지나쳐서 바닦에 닿으면 -1씩 차감되는것을 만들고 공 과 패들이 첫 시작 위치로 돌아가게 만들어야했다
ife라는 변수가 캔버스보다 y값+공의 반지름 보다 커지게 되면 1씩 차감되게 설정하였고
x값과 y값을 처음 시작으로 설정하였고
공이 이동하는값을 넣었다
2.빙고
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
margin: auto;
}
td{
width: 100px;
height: 100px;
border: 5px solid black;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td id="1" onclick="colorChange(this)">사과</td>
<td id="2" onclick="colorChange(this)">수박</td>
<td id="3" onclick="colorChange(this)">귤</td>
<td id="4" onclick="colorChange(this)">딸기</td>
<td id="5" onclick="colorChange(this)">용과</td>
</tr>
<tr>
<td id="6" onclick="colorChange(this)">망고</td>
<td id="7" onclick="colorChange(this)">토마토</td>
<td id="8" onclick="colorChange(this)">파인애플</td>
<td id="9" onclick="colorChange(this)">바나나</td>
<td id="10" onclick="colorChange(this)">감</td>
</tr>
<tr>
<td id="11" onclick="colorChange(this)">포도</td>
<td id="12" onclick="colorChange(this)">참외</td>
<td id="13" onclick="colorChange(this)">멜론</td>
<td id="14" onclick="colorChange(this)">리치</td>
<td id="15" onclick="colorChange(this)">블루베리</td>
</tr>
<tr>
<td id="16" onclick="colorChange(this)">석류</td>
<td id="17" onclick="colorChange(this)">무화과</td>
<td id="18" onclick="colorChange(this)">자두</td>
<td id="19" onclick="colorChange(this)">복숭아</td>
<td id="20" onclick="colorChange(this)">자몽</td>
</tr>
<tr>
<td id="21" onclick="colorChange(this)">두리안</td>
<td id="22" onclick="colorChange(this)">스타후르츠</td>
<td id="23" onclick="colorChange(this)">키위</td>
<td id="24" onclick="colorChange(this)">레몬</td>
<td id="25" onclick="colorChange(this)">체리</td>
</tr>
<!-- table = 표
tr=세로줄 td가로줄 -->
</table>
</body>
<script>
function colorChange(elememt){
if(elememt.style.backgroundColor =="blue"){
elememt.style.backgroundColor ="white";
}else{
elememt.style.backgroundColor ="blue";
}
}
</script>
</html>
<style>시트는 문서를 꾸며주는 시트이다
시트에 높이,넓이와 테두리선을 지정해주고 <tr>,<td>를 사용하여 5*5 빙고판을 만들어주었고
스크립트에는 하나의 영역을 선택하여 클릭했을때 색이 변하게하는 명령어를 넣어 색이 바뀌게 만들었다
function colorChange(elememt){
if(elememt.style.backgroundColor =="blue"){
elememt.style.backgroundColor ="white";
파란색일떄 선택을 하면 하얀색으로 변경
}else{
elememt.style.backgroundColor ="blue";
}
그 외에 선택을 하면 파란색으로 변경
3<for 반복문>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// let sum=0;
// for(let i=1; i<=100; i++){
// sum= sum+i;
// }
const num1 = Number(prompt("몇 부터~"));
const num2 = Number(prompt("몇 까지"));
// 입력받은 수부터 입력 받은 수까지 합출력
// let sum =0
// for(let i=num1; i<=num2; i++){
// sum = num1+i;
// }
// console.log(sum);
// 입력받은 수부터 입력받은 수까지 3의 배수 개수 출력
let sum = 0;
for(let i=num1; i<=num2; i++){
if(i % 3 ==0){
sum++;
}
}
console.log(sum);
// console.log(sum);
// for문 :반복문
// for문은 3구역으로 나눠야한다
// let =숫자로된 변수 선언
// i<x 반복할 횟수
// i++ = i+1을 줄여쓴것
</script>
</html>
for문은 3구역으로 나누어야 작동이 된다
let , i<=x i++
let=변수
i<=반복할 횟수
i++=i+1을 줄여서 사용
아직까진 들었을때 확 이해가 된다거나 하지는 않는다
짜여진 코드를 보았을땐 이게 이래서 이렇게 되는구나 라는 생각이 들지만
주어진 문제를 해결하는 능력은 아직 모자라다
초보자들은 필사코딩을 하는게 도움이 많이 된다고 하는데
오픈소스를 자주 많이 들여다 봐야할것 같다
728x90
반응형
'개발일지 > java' 카테고리의 다른 글
| 개발일지 1일차 -HTML- (0) | 2023.11.24 |
|---|