M and N Marching Game
About this app
A fun and interactive game where M and N march to the beat.
M and N Marching Game
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
<!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>M and N Marching Game</title>
<meta name="description" content="A fun and interactive game where M and N march to the beat.">
<meta name="keywords" content="marching, game, interactive, M, N, beat, fun">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap">
<style>
body, html {
height: 100%;
margin: 0;
font-family: 'Press Start 2P', cursive;
background: linear-gradient(45deg, #83a4d4, #b6fbff);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#game-board {
width: 80vmin;
height: 80vmin;
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, 1fr);
gap: 2px;
}
.cell {
width: 100%;
height: 100%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
border-radius: 5px;
}
.marcher {
font-size: 2rem;
user-select: none;
cursor: pointer;
transition: transform 0.3s ease-in-out;
}
.marcher.m {
color: #ff6347;
}
.marcher.n {
color: #4682b4;
}
.beat {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
animation: beatAnim 1s infinite;
}
@keyframes beatAnim {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
</style>
</head>
<body>
<div id="game-board"></div>
<script>
$(function() {
const board = $('#game-board');
const marchers = ['M', 'N'];
const colors = ['#ff6347', '#4682b4'];
let currentMarcher = 0;
for (let i = 0; i < 100; i++) {
const cell = $('<div class="cell"></div>');
board.append(cell);
}
function toggleMarcher(element) {
const marcherElement = $('<div class="marcher"></div>');
marcherElement.text(marchers[currentMarcher]);
marcherElement.css('color', colors[currentMarcher]);
element.append(marcherElement);
currentMarcher = (currentMarcher + 1) % marchers.length;
}
$('.cell').on('click', function() {
if ($(this).has('.marcher').length === 0) {
toggleMarcher($(this));
}
});
function beatAnimation() {
const beatElement = $('<div class="beat"></div>');
$('.cell').append(beatElement);
setTimeout(() => {
$('.beat').remove();
}, 1000);
}
setInterval(beatAnimation, 2000);
});
</script>
</body>
</html>
NEW APPS
These are apps made by the community!