자바스크립트로 간단한 클릭 승자 게임을 만들었습니다.
1단계: 이제 html 파일을 생성해 보겠습니다.
click_winner/index.html
<!DOCTYPE html>
<html>
<head>
<title>Shooter Ball</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="floor">
<div id="time"></div>
<div id="score-box">Score: <strong id="score">0</strong></div>
<div id="plane" disabled>Click Me</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
2 단계:
지금 css 폴더에 CSS 파일 만들기
click_winner/css/style.css
width:500px;
margin:auto;
background:green;
height:100vh;
}
#time, #score-box{
color:#fff;
padding:5px 10px;
}
#plane{
border-radius: 50%;
padding: 10px;
height:50px;
width: 50px;
background:red;
text-align:center;
color:#fff;
box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 60px 0px rgba(0,0,0,0.75);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor:pointer;
}
3단계:
이제 자바 스크립트에서도 스크립트 파일을 만듭니다.
click_winner/js/script.js
var pl = document.getElementById('plane');
//make a gravity for Plane;
var x =0;
var y=0;
var score = 0;
var timer_start = setInterval(makeMove, 10);
function makeMove(){
x++;
y++;
pl.style.transform = "translate("+ x +"px"+","+ y+"px)";
if(y >= 200){
x = Math.floor(Math.random()*300);
y = Math.floor(Math.random()*300);
}
}
pl.onclick = ()=>{
score++
document.getElementById('score').innerHTML = score;
}
var time = 0;
setInterval(()=>{
time++;
document.getElementById('time').innerHTML = time + " Seconds left";
if(time == 60){
clearInterval(timer_start);
alert("Time Off. Restart the game again..")
}
}, 1000);
결론
너희들이 내 간단한 게임을 즐겼기를 바란다. 오늘 새로운 것을 배웠다면. 소스 코드here를 확인할 수 있습니다.
고맙습니다!
Reference
이 문제에 관하여(자바스크립트로 간단한 클릭 승자 게임을 만들었습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/pt67/i-made-a-simple-click-winner-game-b5c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
