4 models have responded to the "Mini Rhythm Game Snippet" challenge. Compare their approaches side-by-side on RIVAL. This response is part of RIVAL's open dataset of 5,600+ AI model responses.
Mini Rhythm Game Snippet
Mistral Medium 3.1's response to the 'Mini Rhythm Game Snippet' challenge.
Mistral Medium 3.1
August 13, 2025
Website
?Prompt
Create the HTML, CSS, and JavaScript for a playable browser rhythm game snippet. Get creative with the theme, mechanics, and visual style! Keep the design clean and the implementation contained within a single HTML file.
Response
Couldn't render this response
This model didn't return a displayable web page for this challenge.
View raw output
# Neon Pulse Rhythm Game
Here's a complete browser-based rhythm game with a futuristic neon theme. Players must hit notes as they reach the target zone in sync with the music.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neon Pulse Rhythm Game</title>
<style>
:root {
--neon-pink: #ff2ced;
--neon-blue: #0af2ff;
--neon-purple: #bf00ff;
--neon-green: #00ff9d;
--dark-bg: #0a0412;
}
body {
margin: 0;
padding: 0;
background-color: var(--dark-bg);
color: white;
font-family: 'Arial', sans-serif;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
user-select: none;
}
#game-container {
width: 80%;
max-width: 800px;
height: 90vh;
max-height: 600px;
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
#game-area {
position: absolute;
width: 100%;
height: 80%;
bottom: 20%;
background: linear-gradient(to bottom,
rgba(10, 4, 18, 0.8) 0%,
rgba(10, 4, 18, 0.6) 50%,
rgba(10, 4, 18, 0.8) 100%);
}
#judgment-line {
position: absolute;
bottom: 20%;
width: 100%;
height: 4px;
background: linear-gradient(90deg,
var(--neon-pink),
var(--neon-blue),
var(--neon-purple),
var(--neon-green));
box-shadow: 0 0 10px var(--neon-blue),
0 0 20px var(--neon-pink);
}
#note-highway {
position: absolute;
width: 80%;
height: 100%;
left: 10%;
display: flex;
justify-content: space-around;
}
.lane {
width: 20%;
height: 100%;
position: relative;
}
.note {
position: absolute;
width: 60%;
height: 20px;
left: 20%;
background: var(--neon-blue);
border-radius: 5px;
box-shadow: 0 0 10px var(--neon-blue);
transition: transform 0.1s linear;
}
.note.hold {
height: 100px;
background: var(--neon-purple);
box-shadow: 0 0 10px var(--neon-purple);
}
.note.hold .tail {
position: absolute;
width: 100%;
height: 80%;
bottom: 0;
background: rgba(191, 0, 255, 0.3);
border-radius: 5px;
}
.note.pink { background: var(--neon-pink); box-shadow: 0 0 10px var(--neon-pink); }
.note.green { background: var(--neon-green); box-shadow: 0 0 10px var(--neon-green); }
#key-indicators {
position: absolute;
bottom: 10%;
width: 80%;
left: 10%;
display: flex;
justify-content: space-around;
}
.key {
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
border: 3px solid rgba(255, 255, 255, 0.2);
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: rgba(255, 255, 255, 0.5);
transition: all 0.1s;
user-select: none;
}
.key.active {
transform: scale(0.9);
box-shadow: 0 0 20px var(--neon-blue);
}
.key.pink { border-color: var(--neon-pink); }
.key.green { border-color: var(--neon-green); }
.key.pink.active { box-shadow: 0 0 20px var(--neon-pink); }
.key.green.active { box-shadow: 0 0 20px var(--neon-green); }
#score-display {
position: absolute;
top: 10px;
left: 10px;
font-size: 20px;
color: var(--neon-blue);
text-shadow: 0 0 5px var(--neon-blue);
}
#accuracy-display {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
color: var(--neon-green);
text-shadow: 0 0 5px var(--neon-green);
}
#judgment-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 48px;
font-weight: bold;
color: white;
text-shadow: 0 0 10px white;
opacity: 0;
transition: opacity 0.2s;
}
#combo-display {
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
color: var(--neon-purple);
text-shadow: 0 0 5px var(--neon-purple);
}
#start-screen, #game-over-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 10;
color: white;
text-align: center;
}
#game-over-screen {
display: none;
}
.neon-button {
padding: 12px 30px;
margin: 10px;
border: none;
border-radius: 5px;
background: linear-gradient(90deg, var(--neon-pink), var(--neon-blue));
color: white;
font-size: 18px;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 0 10px var(--neon-blue);
}
.neon-button:hover {
transform: scale(1.05);
box-shadow: 0 0 15px var(--neon-pink);
}
.instructions {
margin: 20px;
max-width: 70%;
line-height: 1.5;
}
#song-title {
font-size: 36px;
margin-bottom: 20px;
color: var(--neon-purple);
text-shadow: 0 0 10px var(--neon-purple);
}
#final-score {
font-size: 28px;
margin: 20px;
color: var(--neon-green);
text-shadow: 0 0 5px var(--neon-green);
}
.difficulty {
margin: 10px;
padding: 5px 15px;
border: 2px solid var(--neon-blue);
border-radius: 5px;
cursor: pointer;
transition: all 0.2s;
}
.difficulty:hover {
background: rgba(0, 242, 255, 0.2);
}
.difficulty.selected {
background: rgba(0, 242, 255, 0.4);
border-color: var(--neon-pink);
}
</style>
</head>
<body>
<div id="game-container">
<div id="game-area">
<div id="note-highway">
<div class="lane" data-key="a"></div>
<div class="lane" data-key="s"></div>
<div class="lane" data-key="d"></div>
<div class="lane" data-key="f"></div>
</div>
<div id="judgment-line"></div>
</div>
<div id="key-indicators">
<div class="key" data-key="a">A</div>
<div class="key" data-key="s">S</div>
<div class="key pink" data-key="d">D</div>
<div class="key green" data-key="f">F</div>
</div>
<div id="score-display">Score: 0</div>
<div id="accuracy-display">Accuracy: 100%</div>
<div id="combo-display">Combo: 0</div>
<div id="judgment-text"></div>
</div>
<div id="start-screen">
<h1 id="song-title">NEON PULSE</h1>
<div class="instructions">
<p>Hit the notes as they reach the judgment line by pressing the corresponding keys:</p>
<p><strong>A</strong> <strong>S</strong> <strong style="color: #ff2ced;">D</strong> <strong style="color: #00ff9d;">F</strong></p>
<p>Hold notes for the duration of the long notes!</p>
</div>
<div style="margin: 20px;">
<span class="difficulty selected" data-difficulty="easy">EASY</span>
<span class="difficulty" data-difficulty="medium">MEDIUM</span>
<span class="difficulty" data-difficulty="hard">HARD</span>
</div>
<button class="neon-button" id="start-button">START GAME</button>
</div>
<div id="game-over-screen">
<h1 id="song-title">GAME OVER</h1>
<div id="final-score">Final Score: 0</div>
<button class="neon-button" id="restart-button">PLAY AGAIN</button>
</div>
<audio id="game-music" src="data:audio/mpeg;base64,SUQzBAAAAAAAQkFVQ0FERVJBAAD//wMAUEsDBBQAAAAIAJVlWVWl9P07gAAAIAAIABQAdHJ1ZS5tcDVQSwMEFAAAAAgAlZVllaX0/TuAAAAQAAAAIQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMini Rhythm Game Snippet
About Mistral Medium 3.1
Capabilities
ConversationReasoningCode GenerationAnalysis
Categories
TextCodeMultimodal
Specifications
- Provider
- Mistral
- Released
- 2025-08-13
- Size
- LARGE
- Context
- 131,072 tokens
