728x90
반응형
오늘 배운것
1 html, css,script
2 기본수식
3 if문
4함수
5게임만들기
<기본수식>
<!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 num1 = 10;
let num2 = 3;
// console.log(num1);
// console.log(num1+num2);
// console.log(num1-num2);
// console.log(num1*num2);
// console.log(num1/num2);
// console.log(num1%num2);
// console.log(num1 >num2);
// console.log(num1 <num2);
// console.log(num1 >=num2);
// console.log(num1 <=num2);
// console.log(num1 ==num2);
// console.log(num1 !=num2);
// &&(AND),||(or),!(not)
console.log(num1 > num2 && num1>=num2);
console.log(num1 > num2 || num1<=num2);
console.log(!(num1 > num2));
// let = 값이 변할수있는 변수, =: 오른쪽에 있는 변수에 넣는다
</script>
</html>
script의 기본적인 수식
+(더하기),-(빼기),*(곱하기),/(나누기),%(나머지)
%는 나누었을때 남는수
=의 경우
=하나만 썼을때 변수를 지정하는것으로 사용하기때문에 수식에서는 ==로 사용한다
<if문>
<!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>
const id = "test"; // 회원가입한 아이디
const pw = "1234"; // 회원가입한 비밀번호
const loginId = prompt("아이디 입력");
const loginPw = prompt("비밀번호 입력");
// 문제) 로그인 성공, 로그인실패
// if(id == loginId && pw == loginPw){
// console.log("로그인 성공");
// }else{
// console.log("로그인 실패");
// }
if(id == loginId){
if(loginPw==PW){
console.log("로그인 성공");
}else{
console.log("비밀번호가 틀렸습니다");
}
}else{
console.log("아이디가 틀렸습니다")
}
// prompt 실행시켰을때 나오는 창
// const 는 안에 있는 값을 변경할수 없다
// let age =13;
// age = 9;
// 변수를 바꾸고 싶을때
// let age = 8;
// 문제)나이가 음수면 음수, 짝수이면 짝수, 홀수이면 홀수 출력
// if(age < 0){
// console.log("음수");
// }else if(age % 2 == 0){
// console.log("짝수");
// }else{
// console.log("홀수");
// }
// 문제) 나이가 19이상이면 성인, 13이상이면 청소년, 8이상이면 저학년, 나머지는 어린이 출력
// if(age >= 19){
// console.log("성인 입니다");
// }else if(age >=13){
// console.log("청소년입니다");
// }else if(age>=8){
// console.log("저학년 입니다");
// }else{
// console.log("어린이 입니다");
// }
if조건문은
if
else if
else
3가지가 세트이다
if(조건문)조건문이 rue일경우 실행
else if(조거문) if조건문이 false경우 실행
else 위 두개의 조건이 둘다 false일 경우 실행
<함수>
<!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>
function plus(a,b){
console.log(a + b);
}
function sub(a,b){
console.log(a- b);
}
function mul(a,b){
console.log(a* b);
}
function div(a,b){
console.log(a/ b);
}
const num1 = Number(prompt("첫번째 숫자"));
const num2 = Number(prompt("두번째 숫자"));
const menu = prompt("1.더하기 2.빼기 3.곱하기 4.나누기");
if(menu ==1){
plus(num1, num2);
}else if(menu ==2){
sub(num1, num2);
}else if(menu ==3){
log(num1, num2);
}else if(menu ==4){
div(num1, num2);
}
// functing == 함수
// 함수는 실행문구를 담고있는 상자
// 함수는 어떻게 만들어도 상관없지만 누군가가 실행시켜줘야함
</script>
</html>
<게임만들기>
<!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>
canvas{
background-color: aquamarine;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="can" width="480" height="320"></canvas>
</body>
<script>
const canvas = document.getElementById("can");
const ctx = canvas.getContext("2d");
let x= canvas.width /2;
let y= canvas.height -30;
const ballRadius = 10;
let dx = 2;
let dy = -2;
const paddleWidth = 75;
const paddleHeigth = 10;
let paddleX = (canvas.width - paddleWidth) /2;
let paddleY = canvas.height - 30;
let rightPressed = false;
let leftPressed = false;
// 키보드 이벤트
document.addEventListener("keydown", keyDownHandler);
document.addEventListener("keyup", keyUpHandler);
function keyDownHandler(e){
if(e.keyCode == 39){
rightPressed = true;
}else if(e.keyCode == 37){
leftPressed = true;
}
}
function keyUpHandler(e){
if(e.keyCode ==39){
rightPressed = false;
}else if(e.keyCode){
leftPressed = false;
}
}
function ball(){
ctx.beginPath();
// arc(중심x좌표, 중심y좌표, 원반지름, 시작각, 끝각, 그리는방향);
ctx.arc(x, y,ballRadius, 0, Math.PI*2, false);
ctx.fillStyle = "red";
ctx.fill();
ctx.strokeStyle = "black";
ctx.stroke();
ctx.closePath();
}
function paddle(){
ctx.beginPath()
// rect(좌상단x, 좌상단y, 넓이,높이)
ctx.rect(paddleX, paddleY, paddleWidth, paddleHeigth);
ctx.fillStyle = "black"
ctx.fill();
ctx.closePath();
}
function draw(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ball();
paddle();
if(x+dx>canvas.width-ballRadius || x+dx <0+ballRadius){
dx = -dx;
}
if(y+dy< 0+ballRadius || y+ dy>canvas.height-ballRadius){
dy = -dy;
}
if(rightPressed == true && paddleX <canvas.width-paddleWidth){
paddleX = paddleX+7;
}else if(leftPressed && paddleX >0 == true){
paddleX = paddleX-7;
}
x = x + dx;
y= y+ dy;
}
setInterval(draw, 10);
</script>
</html>
<!-- 특정 id를 선택할때 "#"사용 -->
오늘 배운것들을 토대로 만든 코드들이다
<style>을 사용하여서 바탕을 만들고
<bady>에 내용을 넣고
<script>로 작동을 시킨다
첫시간에 배운내용이 100프로 이해는 다 되지는 않지만 설명을 들었을땐 어느정도 이해는 되는선이라 다행이라 생각된다
게임을 만드는 중간중간 직접 생각해서 코드를 짤때 너무 어렵게만 생각해서 막히는것갔다 조금 단순하게 생각할 필요도 있을거 같다
728x90
반응형
'개발일지 > java' 카테고리의 다른 글
| 개발일지 2일차 -스크립트- (1) | 2023.11.27 |
|---|