-- HTML CODE --
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Character</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Cool programming projects -->
<!-- CONTROLS--- -->
<!-- RUN -> SPACEBAR -->
<!-- GUN FIRE -> PRESS'G' -->
<!-- PRONE -> PRESS'P' -->
<div class="container" id='container'>
<div class="character_box " id="character_box">
<img src="img/character.png" id="character" alt="">
<img src="img/character_gun.png" id="character_gun" alt="">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
-- CSS CODE --
*{
padding:0;
margin:0;
}
.container{
overflow: hidden;
width:100%;
height:100vh;
background:linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),url(img/bk22.jpg);
background-repeat: repeat-x;
background-size: cover;
animation-duration: 60s;
animation-name: back;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.character_box{
width:157px;
height:264px;
object-fit: contain;
position:absolute;
bottom: 70px;
left:350px;
overflow: hidden;
}
img{
width:100%;
height:100%;
position: absolute;
object-fit: contain;
overflow: hidden;
}
#character_gun{
min-width:max-content;
}
.action1{
width:157px;
height:264px;
background-image: url(img/action1.png);
animation: action1 700ms steps(6) infinite ;
}
@keyframes action1 {
0%{
transform: translateY(0px);
}
50%{
transform: translateY(-5px);
}
100%{
background-position: -946px;
transform: translateY(-0px);
}
}
.action2{
width:268px;
height:155px;
background-image: url(img/action2.png);
animation: action2 1s steps(6) infinite ;
}
@keyframes action2 {
100%{
background-position: 1608px;
}
}
.action3{
width:213px;
height:264px;
background-image: url(img/action3.png);
animation: action3 1s steps(6) infinite;
}
@keyframes action3 {
100%{
background-position: -1283px;
}
}
@keyframes back {
0%{
background-position: 0px;
}
100%{
background-position: -6000px;
}
}
-- JAVASCRIPT CODE --
var character_box = document.getElementById('character_box');
var container = document.getElementById('container');
var gun_sound = new Audio('audio/gun_sound.mp3');
var foot_sound = new Audio('audio/foot_sound.wav');
var prone_sound = new Audio('audio/prone_sound.mp3');
var bk_music = new Audio('audio/bk_music.wav');
var character_img = document.getElementById('character');
var character_gun = document.getElementById('character_gun');
container.style.animationPlayState = 'paused';
character_gun.style.display = 'none';
character_img.style.display = 'block';
// ACTION 1 (RUNNING)
function action1() {
character_box.classList.add('action1');
character_box.classList.remove('action2');
character_box.classList.remove('action3');
container.style.animationPlayState = 'running';
character_img.style.display = 'none';
character_gun.style.display = 'none';
foot_sound.play();
}
// ACTION 2 (PRONE)
function action2() {
character_box.classList.add('action2');
character_box.classList.remove('action1');
character_box.classList.remove('action3');
container.style.animationPlayState = 'running';
prone_sound.play();
character_img.style.display = 'none';
character_gun.style.display = 'none';
}
// ACTION 3 (GUN FIRE)
function action3() {
if (character_box.classList.contains('action3'))
return;
character_box.classList.add('action3');
character_box.classList.remove('action2');
character_box.classList.remove('action1');
gun_sound.play();
character_gun.style.display = 'none';
character_img.style.display = 'none';
setTimeout(() => {
character_box.classList.remove('action3');
character_gun.style.display = 'block';
}, 1000);
}
// KEY DOWN (ANIMATION RUNNING)
document.addEventListener('keydown', fun1)
function fun1(e) {
if (e.keyCode == 32) {
action1();
}
if (e.keyCode == 80) {
action2();
}
if (e.keyCode == 71) {
action3();
}
bk_music.play();
bk_music.volume = 0.3;
}
// KEY UP (ANIMATION PAUSE)
document.addEventListener('keyup', fun2)
function fun2(e) {
if (e.keyCode == 32 || e.keyCode == 80) {
character_box.classList.remove('action1');
character_box.classList.remove('action2');
container.style.animationPlayState = 'paused';
foot_sound.pause();
prone_sound.pause();
character_img.style.display = 'block';
}
}
-- RESOURCES --
1. images
2. audios
Casinos Near Me | New York (NJ) - Mapyro
ReplyDeleteCasinos 하남 출장마사지 Near Me in New York. 대구광역 출장안마 Best Casinos 제주도 출장마사지 in 2021 with 목포 출장샵 MapYRO. Discover the casinos 김포 출장마사지 closest to Manhattan with MapYRO app for
Post a Comment