Duck Sword Fight
About this app
An entertaining web app where two ducks fight each other with swords.
Duck Sword Fight Duck Sword Fight 🦆⚔️ 🦆 Health: 🦆 Health: Start Fight ⚔️
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Duck Sword Fight</title>
<meta name="description" content="An entertaining web app where two ducks fight each other with swords.">
<meta name="keywords" content="Duck, Sword Fight, Web App, Game">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great&display=swap" rel="stylesheet">
<script type="text/javascript">
try {
var duck1Health = 100;
var duck2Health = 100;
function randomDamage() {
return Math.floor(Math.random() * 10) + 1;
}
function animateDucks() {
var duck1 = $(".duck1");
var duck2 = $(".duck2");
duck1.animate({ left: "+=200" }, "slow");
duck2.animate({ left: "-=200" }, "slow");
duck1.promise().done(function() {
attack(1);
});
duck2.promise().done(function() {
attack(2);
});
}
function attack(duck) {
if (duck === 1) {
duck2Health -= randomDamage();
updateHealth();
} else if (duck === 2) {
duck1Health -= randomDamage();
updateHealth();
}
if (duck1Health <= 0 || duck2Health <= 0) {
endGame();
}
}
function updateHealth() {
document.getElementById('duck1-health').innerText = duck1Health;
document.getElementById('duck2-health').innerText = duck2Health;
}
function endGame() {
var winner = duck1Health > 0 ? 'Duck 1' : 'Duck 2';
alert(winner + ' wins the fight!');
location.reload();
}
document.addEventListener("DOMContentLoaded", function() {
document.getElementById('start-fight').addEventListener('click', function() {
animateDucks();
});
updateHealth();
});
} catch (error) {
throw error;
}
</script>
<style>
body {
font-family: 'Fredericka the Great', cursive;
background: linear-gradient(to right, #ff9966, #ff5e62);
color: #fff;
}
.duck {
font-size: 50px;
position: relative;
left: 0;
transition: left 1s;
}
.sword {
font-size: 30px;
}
.health {
font-size: 20px;
}
</style>
</head>
<body>
<div id="main-container" class="container text-center">
<h1>Duck Sword Fight 🦆⚔️</h1>
<div class="row">
<div class="col">
<div class="duck duck1">🦆</div>
<div class="health">Health: <span id="duck1-health"></span></div>
</div>
<div class="col">
<div class="duck duck2">🦆</div>
<div class="health">Health: <span id="duck2-health"></span></div>
</div>
</div>
<button id="start-fight" class="btn btn-light sword">Start Fight ⚔️</button>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!