<!doctype html>
<html lang=en>
<head>
<style>
body {
background-color: #ff9b2e
}
.gameContainer {
display: flex;
justify-content: center;
align-items: center;
height: 100vh
}
canvas {
background-color: #000
}
</style>
</head>
<body>
<div class=gameContainer>
<div style=display:flex;flex-direction:column;align-items:center>
<canvas id=gameCanvas width=380 height=320></canvas>
</div>
</div>
<script>
const A = {
A: "iVBORw0KGgoAAAANSUhEUgAAACQAAAAfBAMAAAB9k3LFAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGiGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNy4xLWMwMDAgNzkuYTg3MzFiOSwgMjAyMS8wOS8wOS0wMDozNzozOCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIzLjAgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMy0wNC0wNFQxNTowMTozMCswNzowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjMtMDQtMTFUMTQ6NTA6MzQrMDc6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjMtMDQtMTFUMTQ6NTA6MzQrMDc6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmM3YmVjNGRkLTE3OGQtM2Q0My1hYzIwLTA3OTRmN2RmZTgxNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxN2Y4ZTE5OC1kNTJjLTc4NGItOGNlMi03NWYyYTJjNGZmODciIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxN2Y4ZTE5OC1kNTJjLTc4NGItOGNlMi03NWYyYTJjNGZmODciPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjE3ZjhlMTk4LWQ1MmMtNzg0Yi04Y2UyLTc1ZjJhMmM0ZmY4NyIgc3RFdnQ6d2hlbj0iMjAyMy0wNC0wNFQxNTowMTozMCswNzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIzLjAgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo1MTAyZmNmOC0xY2MzLTFmNDAtOWRhYi1lN2VkOGY2YWI5N2YiIHN0RXZ0OndoZW49IjIwMjMtMDQtMDhUMDE6NDY6MjArMDc6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMy4wIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YzdiZWM0ZGQtMTc4ZC0zZDQzLWFjMjAtMDc5NGY3ZGZlODE0IiBzdEV2dDp3aGVuPSIyMDIzLTA0LTExVDE0OjUwOjM0KzA3OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjMuMCAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+utIpOQAAAC1QTFRFR3BMzpMsYGBgAAAA4smE1Ygc19jS/PTV9agD//////qw4+Te46NVgoKChEwRvL94yAAAAAF0Uk5TAEDm2GYAAAEvSURBVCjPdY9Ba4MwFMcfigePwUJvI3jcyRKhZ1k+gAwqxe1aCbhLqeA3CKPuIPQbDITS+0TYebJDv8IO+yZ7MaHVwv7BBH7+3ssLwL+xfJ/eoPvT6f1G+sHQmzIVOib6vDJN3DFDYgPUajM6UBfsAE8WuJapU4KHJglqoAahQBhb3KGqEVWCym+g/w9oMR/YBB1IOUIWuDY54CLEw+GovtAuIkRbRLVBsCx4ROZl6ek2A9qxLZIxCndLREXkmcHwC3n4wEssDtzhSgp1yBnjnBP1Iss8mg+5DKbeM1MkmiCilNkFPfrTADh9nndVnnVVlokqa88xrGX3JOSHFMlGdolIXlew7tNj2uyb/TFVq/mOwTlv0BCJMtB8+8L2z32LPXIhs7aTny8xImc1CcAfVDJbB6EjsrMAAAAASUVORK5CYII=",
t: "iVBORw0KGgoAAAANSUhEUgAAAB4AAAAnCAMAAAAvmwj1AAAAPFBMVEVHcEwAAAAGBgWPh4EYFxYAAAAEBAQYFxZUT0wmJSJ5c26bk4yDfXcSERC5sKhnYl03NTNFQj8lIyLi18w+h/qZAAAACnRSTlMAGXT/4DlbnvvA9Dcf8gAAAWdJREFUOMt1lNuihCAIRafQvICizv//6wGzmSY9PNTDYm8QrNdLwxofnH39FyFiRnb7tqRbIQBJAO+snVMcA4IEakrcn7hE6lgt3u/sfqn1fGGgnN/5eHhzvDCQGMTtt29m+GAQfXjgrxoE53xvLzDfaJfjccd0wyen7wwNwW+g2KP7zgwfPKv/0O/+iUnlebRveFLrAvCDYQoiGMW3tsBqcGJblpjGZlxlXKpjH03wHtZytr2zGtdyEPlR/eyudwuQDhUvcIwkR9PiQfBcPErQwH6aKpBikq0bvzBH6FhOblIpFabWVQ6CbUq1FFgdrS/FpVbbYnByuL6zlNpsf5lrdeEe8daYQsG+7yR1fcSRQSdUrJ/DIVjab0xa4WKK+05eqSmv4sB0o+fYhrzJ8YomnKS/YFyY3ahcosjVkW3QydFfd92k1lTeSoxe06J2WT+fyu6CSb1K64/C099os8fuNIIxJij7AzGmGkuTpKlJAAAAAElFTkSuQmCC",
i: "iVBORw0KGgoAAAANSUhEUgAAADwAAABOCAMAAABLyIWKAAAAPFBMVEVHcEwAAAAGBgWPh4EYFxYAAAAEBAQYFxZUT0wmJSJ5c26bk4yDfXcSERC5sKhnYl03NTNFQj8lIyLi18w+h/qZAAAACnRSTlMAGXT/4DlbnvvA9Dcf8gAAAi9JREFUeNq9mIuOqzAMRIEQ8oSQ3P//12XqpLy3uTLdkVq1Uo81sR1jtWnekrLvtTZGKSmb/xULNsZa56bJuRCU6rq2/Ru4befZe7GIAgihNQ4gZUUQFqxUCABFlnMliLVd9014nq31foXLAf4tmialvgVLqXUIR1gI76cJAaZpGL4DI10hoEmEOOJk3trbkrFgtCZwIc6wEGTdmO/BV7ahKeumWZgwTF+jq3HnLgvGhs8tcsa9vxhRLLjvaRDcC60COXe6JAyYRtCd6X3BkLaddRbcdVp/gumCkHaNyoL7/rdC7ZOGwfgsLCrkPQp6KBYDbtuU6uBi/ilYynmuhzGMn4KVivFuEFzbtvY9FFiwMXpRfcJgPIR8OVgwWiTGu7F7bVyIbJwBD0OMWtekrKw7eHnPh2G6DrYWiwddjlwsFoxxD7imWDbL++dg6PMgAlTMvx63LBgLel3CaJUs8OtaMuFxnBfFuF1bPxkXgg9LOS6KEQFq8HKE1+BnwRhD45hSjBjANTBdkCfgpoHxlGqSdkgYG0a5CNcaj9DrBikgwVo/ASNlq3WMwn0ItKPdCXBe3lnwMIxZaBWUjB7i2xQd4ffYZ8EoVkoFR7vgHSGu0c0gYsOrcTTqnEUBtsj6bdMmLBhXs+uoWQCREAALh8/a4s6924QJ01IFPCUkjIRP+ClGJAWDYVKMz8G0PitlDB2gpLCUkcLiIXHzVwwLXo8g5TAgVBFCQsZ8/PunBv4BAWlpKSG9kwQAAAAASUVORK5CYII=",
o: "iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAMFBMVEX/lBVHcEz/lBb/lBb/lBb/lBb/lBb/////iwT/fAD/s1r/48H/8+X/0Zn/ozn/wXtYw4N4AAAAB3RSTlP/ABuvdlnenwQChAAAAPxJREFUGNNFUEFqwlAUHEyVH3ET7QHMDSJ4AEsvYG+QWzxaE/N3aqSSZdIqXSou3KaldJ1CoduK9AD2BCJunK9C32rmDbw3M3Acp37rV9ouAYg9KA3LPZEuOCnKhlxDpePPlcYdSReTxWAdJpRQB2ZBvuwngIsGEOci0QhooQnYAynkW6OEDqDmvUkeKFzBo7KLsqksYMGnkj9kNdmiYh7qQr6KSBNRieVD5E1T8WG/yD4uQkM8xAf5G815zUJH1US22U9vyNNNVf2V4F2ihE8bsJ9C+llr2qHR5/vdcjU0Rhnh8TXIUpgIJpzemI83l9jcn2ObQjiXQv6rOgK6NE4P1uXZCwAAAABJRU5ErkJggg==",
M: "iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAM1BMVEVHcEzz7d3Jq03l0Y7fxnP69euggyT+/Pm1lh+/pDKSdQf06sPx36KYjnLSy7AtIQt5aVCGuHI6AAAAAXRSTlMAQObYZgAAAOhJREFUeNqFkVmOxCAMROMFbLCz3P+0UzSkJ93SaOojSPUo2zHb9o9qrw7h+LIbt6kP1L0x15fPiPWH70u1XrXdpHprIpkC6XUi6bNab852i/Zxr6+AqxUiMnyLia8IAi2OA96xB3jhFUEzLSpGdp1KOA6A+gIInLuhiGpaKYQSDuDOsZ8XQIgKfOIn2I1K6hdoKTdIozcYzcMXCByBHmtczoyCHgmfTO9x0UTwb9AYqQTz2glWLsUWMlLluRJENCniiKExGa8lbl1F2VmnRH8fpGry8rH52h9P23i6kh/+QJXH7Xf5v/UDnKILDfWPTEAAAAAASUVORK5CYII="
},
s = document.getElementById("gameCanvas"),
n = s.getContext("2d"),
c = new Image;
c.src = `data:image/png;base64,${A.A}`;
const a = new Image;
a.src = `data:image/png;base64,${A.t}`;
const l = new Image;
l.src = `data:image/png;base64,${A.i}`;
const e = new Image;
e.src = `data:image/png;base64,${A.o}`;
const i = new Image;
i.src = `data:image/png;base64,${A.M}`;
let t = 0;
const o = 5;
function M() {
t++, 5 === t && F()
}
c.onload = M, a.onload = M, l.onload = M, e.onload = M, i.onload = M;
let h = !1,
I = [];
const O = 300;
let g = !1,
G = {
x: 50,
y: s.height / 2,
speed: 3
},
R = [],
w = [],
d = 3;
const j = 100;
let m = 0,
f = {
x: s.width / 2,
y: s.height / 2
};
function b() {
if (n.clearRect(0, 0, s.width, s.height), z(), h) {
G.x += .1 * (f.x - c.width - G.x), G.y += .1 * (f.y - c.height / 5 - G.y), n.drawImage(c, G.x, G.y);
let t = [];
for (let A = 0; A < R.length; A++) n.save(), n.translate(R[A].x + R[A].l.width / 2 * R[A].h, R[A].y + R[A].l.height / 2 * R[A].h), n.rotate(R[A].rotation), n.scale(R[A].h, R[A].h), n.drawImage(R[A].l, -R[A].l.width / 2, -R[A].l.height / 2), n.restore(), R[A].x -= R[A].I, R[A].y += R[A].g, R[A].rotation += .01, R[A].x + R[A].l.width * R[A].h > 0 && t.push(R[A]), N(R[A]) && E();
R = t, d - R.length > 0 && D(d - R.length);
for (let t = 0; t < w.length; t++) n.drawImage(w[t].l, w[t].x, w[t].y), w[t].x--, w[t].x < -e.width && (Z(), w.shift()), B(G, w[t]) && (m++, m % 20 == 0 && (d = Math.min(d + 1, 25)), w.splice(t, 1), Z());
n.font = "24px Verdana", n.fillStyle = "green", n.fillText(`Coins: ${m}`, 10, 30)
} else n.drawImage(c, G.x, G.y), C();
!g && h ? requestAnimationFrame(b) : h || C()
}
function u(t, A) {
return t.x < A.x + A.width && t.x + t.width > A.x && t.y < A.y + A.height && t.y + t.height > A.y
}
function Y(t, A, n, e) {
if (!A || !e) return !1;
const i = {
x: t.x,
y: t.y,
width: A.width,
height: A.height
},
h = {
x: n.x,
y: n.y,
width: e.width * n.h,
height: e.height * n.h
};
if (!u(i, h)) return !1;
const l = document.createElement("canvas");
l.width = s.width, l.height = s.height;
const a = l.getContext("2d");
a.drawImage(A, t.x, t.y), a.globalCompositeOperation = "source-in", a.save(), a.translate(n.x + e.width / 2 * n.h, n.y + e.height / 2 * n.h), a.rotate(n.rotation), a.scale(n.h, n.h), a.drawImage(e, -e.width / 2, -e.height / 2), a.restore();
const o = a.getImageData(0, 0, s.width, s.height),
g = Math.max(i.x, h.x),
d = Math.max(i.y, h.y),
c = Math.min(i.x + i.width, h.x + h.width),
w = Math.min(i.y + i.height, h.y + h.height);
for (let t = d; t < w; t++)
for (let A = g; A < c; A++) {
const n = 4 * (Math.floor(A) + Math.floor(t) * o.width) + 3;
if (o.data[n] > 0) return !0
}
return !1
}
function N(t) {
return void 0 !== t && Y(G, c, t, t.l)
}
function B(t, A) {
return u({
x: t.x,
y: t.y,
width: c.width,
height: c.height
}, {
x: A.x,
y: A.y,
width: e.width,
height: e.height
})
}
function D(t) {
for (let A = 0; A < t; A++) {
let t, A, n, e = Math.random();
e < .33 ? (t = 1, A = 1 * Math.random() + 1.2, n = a) : e < .66 ? (t = 1, A = 1 * Math.random() + 1, n = a) : (t = 1, A = 1 * Math.random() + .5, n = l);
let i = Math.floor(Math.random() * (s.height - n.height * t)),
h = (120 * Math.random() - 60) * (Math.PI / 180),
o = Math.cos(h) * A,
g = Math.sin(h) * A;
R.push({
x: s.width,
y: i,
h: t,
I: o,
g: g,
rotation: 0,
l: n
})
}
}
function Z() {
let t = Math.floor(Math.random() * (s.height - e.height)),
A = Math.random() < .5 ? e : i;
w.push({
x: s.width,
y: t,
l: A
})
}
function L(t) {
f.x = t.clientX - s.getBoundingClientRect().left, f.y = t.clientY - s.getBoundingClientRect().top
}
function C() {
n.fillStyle = "#fff", n.fillRect(s.width / 2 - 90, s.height / 2 - 20, 190, 40), n.font = "18px Verdana", n.fillStyle = "#000", n.fillText("Start Game! Woof!", s.width / 2 - 80, s.height / 2 + 5)
}
function T() {
!g && h || (h = !0, g = !1, d = 3, g = !1, m = 0, G.y = s.height / 2, R = [], w = [], Z(), b())
}
function E() {
g = !0, n.font = "30px Verdana", n.fillStyle = "red", n.fillText("Game Over", s.width / 2 - 100, s.height / 2 - 100), C()
}
function U(t) {
const A = t.clientX - s.getBoundingClientRect().left,
n = t.clientY - s.getBoundingClientRect().top,
e = s.width / 2 - 100,
i = s.height / 2 - 25;
(!h || g) && A > e && A < e + 200 && n > i && n < i + 50 && T()
}
function F() {
d = 3, S(), Z(), C(), b()
}
function Q(t) {
if (t.preventDefault(), t.touches.length > 0) {
const A = t.touches[0];
f.x = A.clientX - s.getBoundingClientRect().left, f.y = A.clientY - s.getBoundingClientRect().top
}
}
function S() {
const t = ["#fff", "#ff6c00", "#ff2400"];
for (let A = 0; A < 200; A++) {
const A = Math.random() * s.width,
n = Math.random() * s.height,
e = 2 * Math.random(),
i = t[Math.floor(Math.random() * t.length)];
I.push({
x: A,
y: n,
G: e,
color: i
})
}
}
function z() {
for (let t = 0; t < I.length; t++) {
const A = I[t];
n.beginPath(), n.arc(A.x, A.y, A.G, 0, 2 * Math.PI), n.fillStyle = A.color, n.fill(), A.x -= .5, A.x < -A.G && (A.x = s.width + A.G)
}
}
s.addEventListener("mousemove", L), s.addEventListener("touchstart", Q, !1), s.addEventListener("touchmove", Q, !1), s.addEventListener("touchend", Q, !1), s.addEventListener("click", U), s.addEventListener("touchstart", (function(t) {
t.preventDefault(), T()
}))
</script>
</body>
</html>
1 year ago
1 year ago
89 days ago
93 days ago
160 days ago