I tried to make a game, but I failed.
Anyway, I'm going to show you what I was trying to achieve so you can laugh at me.
<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<meta http-equiv="cache-control" content="max-age=0">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT">
<meta http-equiv="pragma" content="no-cache"></head>
<body onload="start()">
<style>
body {
background: #FAF9FF;
color: #333333;
font-family: sans-serif;
}
a {
text-decoration: none;
color: #7777FF;
}
a:visited {
text-decoration: none;
color: #7777FF;
}
a:hover {
text-decoration: none;
color: #DCCC66;
}
</style>
<div id="contdiv"><svg height="720" width="1280" id="cnt"></svg></div>
<div id="msgone"> </div>
<div id="msgtwo"> </div>
<div id="actions">
<span id="goornot"></span> | <span id="wpn"></span>
</div>
<script>
var cntone = '<path d="M576 324 L32 18 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M704 324 L1248 18 Z" stroke="#000000" stroke-width="3" fill="none"></path> <path d="M704 396 L1248 702 Z" stroke="#000000" stroke-width="3" fill="none"></path> <path d="M576 396 L32 702 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M144 81 L1136 81 L1136 639 L144 639 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M368 207 L912 207 L912 513 L368 513 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M496 279 L784 279 L784 441 L496 441 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M544 306 L736 306 L736 414 L544 414 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M576 324 L704 324 L704 396 L576 396 Z" stroke="#000000" stroke-width="3" fill="none"></path>';
var cnttwo = '<path d="M576 324 L32 18 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M704 324 L1248 18 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M704 396 L1248 702 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M576 396 L32 702 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M112 63 L1168 63 L1168 657 L112 657 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M344 193 L936 193 L936 526 L344 526 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M480 270 L800 270 L800 450 L480 450 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M536 301 L744 301 L744 418 L536 418 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M576 324 L704 324 L704 396 L576 396 Z" stroke="#000000" stroke-width="3" fill="none"></path>';
var cntthr = '<path d="M576 324 L32 18 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M704 324 L1248 18 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M704 396 L1248 702 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M576 396 L32 702 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M80 45 L1200 45 L1200 675 L80 675 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M320 180 L960 180 L960 540 L320 540 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M464 261 L816 261 L816 459 L464 459 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M528 297 L752 297 L752 423 L528 423 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M576 324 L704 324 L704 396 L576 396 Z" stroke="#000000" stroke-width="3" fill="none"></path>';
var cntfou = '<path d="M576 324 L32 18 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M704 324 L1248 18 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M704 396 L1248 702 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M576 396 L32 702 Z" stroke="#000000" stroke-width="3" fill="none"></path></path><path d="M48 27 L1232 27 L1232 693 L48 693 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M288 162 L992 162 L992 558 L288 558 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M432 243 L848 243 L848 477 L432 477 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M520 292 L760 292 L760 427 L520 427 Z" stroke="#000000" stroke-width="3" fill="none"></path><path d="M576 324 L704 324 L704 396 L576 396 Z" stroke="#000000" stroke-width="3" fill="none"></path>';
var mec = '<path d="M900 718 L700 500 L630 470 L590 550 L720 718 Z" stroke="#666666" stroke-width="3" fill="#666666"></path><path d="M720 718 L590 550 L598 535 L740 718 Z" stroke="#CCCCCC" stroke-width="3" fill="#CCCCCC"></path><path d="M780 718 L630 515 L632 510 L785 718 Z" stroke="#CFCFCF" stroke-width="2" fill="#CFCFCF"></path>';
var bat = '<g transform="translate(580.000000,358.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"><path d="M762 588 c-11 -11 -58 -20 -106 -19 -24 0 -27 -3 -22 -22 3 -12 6 -25 6 -29 0 -5 9 -8 20 -8 12 0 20 -7 20 -17 0 -15 2 -16 10 -3 5 8 10 10 10 4 0 -22 -13 -23 -39 -3 -24 19 -26 19 -38 3 -11 -15 -26 -16 -140 -11 -71 4 -138 9 -150 11 -17 4 -41 -12 -98 -66 -41 -38 -85 -84 -97 -102 l-22 -31 25 20 c13 11 7 2 -13 -20 -40 -43 -68 -100 -68 -139 0 -23 2 -24 35 -15 20 6 44 8 54 4 12 -4 34 8 67 35 57 47 129 74 186 68 35 -3 45 1 73 29 37 37 73 42 130 18 26 -10 37 -22 41 -44 4 -17 15 -33 25 -36 11 -4 19 -10 19 -15 0 -4 8 -10 19 -13 26 -6 71 70 47 79 -8 3 -20 3 -26 -1 -5 -3 -10 -1 -10 4 0 6 8 11 19 11 10 0 24 7 31 15 7 8 17 15 23 15 6 0 2 -6 -8 -14 -13 -9 -16 -18 -10 -32 4 -10 7 -23 6 -29 -1 -5 7 -1 18 9 12 11 19 22 16 24 -12 12 40 52 67 52 35 0 83 -24 92 -45 4 -12 14 -14 46 -9 55 9 121 -12 168 -52 22 -18 42 -30 46 -27 3 3 6 0 6 -8 0 -10 14 -14 51 -14 l51 0 -5 48 c-3 37 -12 56 -38 84 -19 20 -28 33 -21 28 10 -5 10 0 -2 22 -17 34 -172 183 -189 183 -7 0 -39 -7 -72 -15 -82 -19 -216 -20 -209 -1 3 8 1 17 -5 21 -6 3 -11 17 -11 30 0 28 -12 39 -28 23z"></path></g>';
var usewep = '<a onclick="sword()">Use Sword</a> | <a onclick="bow()">Use Bow</a>';
var nonuse = '<a>Use Sword</a> | <a>Use Bow</a>';
var cango = '<a onclick="gofor()">Go Forward</a>';
var cantgo = '<a>Go Forward</a>';
function start() {
var z = document.getElementById("cnt");
z.innerHTML = cntthr + mec;
var wpn = document.getElementById("wpn");
wpn.innerHTML = nonuse;
var goornot = document.getElementById("goornot");
goornot.innerHTML = cango;
}
function sword() {
var mso = document.getElementById("msgone");
var mst = document.getElementById("msgtwo");
mso.innerHTML = "You slash the bat with a sword for 150 HP.";
mst.innerHTML = "A bat is destroyed!";
var wpn = document.getElementById("wpn");
wpn.innerHTML = nonuse;
}
function bow() {
var mso = document.getElementById("msgone");
var mst = document.getElementById("msgtwo");
mso.innerHTML = "You hit the bat with an arrow for 120 HP.";
mst.innerHTML = "A bat is destroyed!";
var wpn = document.getElementById("wpn");
wpn.innerHTML = nonuse;
}
function gofor() {
var goornot = document.getElementById("goornot");
goornot.innerHTML = cantgo;
var z = document.getElementById("cnt");
z.innerHTML = cntfou + mec;
setInterval(myTimer, 800);
var count = 1;
var cobat = 1;
function myTimer() {
var z = document.getElementById("cnt");
var mso = document.getElementById("msgone");
var mst = document.getElementById("msgtwo");
if (count == 5 ) {
count = 1;
}
if (count == 1 ) {
z.innerHTML = cntone + mec;
}
if (count == 2 ) {
z.innerHTML = cnttwo + mec;
}
if (count == 3 ) {
z.innerHTML = cntthr + mec;
}
if (count == 4 ) {
z.innerHTML = cntfou + mec;
}
if (cobat > 4 ) {
z.innerHTML = z.innerHTML + bat;
if (cobat < 6 ) {
mso.innerHTML = "A bat is attacking you from above!";
mst.innerHTML = "Player looses 5 HP from a bite.";
var wpn = document.getElementById("wpn");
wpn.innerHTML = usewep;
}
}
count++;
if (cobat < 11 ) {
cobat++;
}
}
}
</script>
</body></html>