Posted in ai
306
12:40 am, April 3, 2026
 

coding a snake game with aider

<p>OLLAMAAPIBASE=http://192.168.0.121:11434 aider --model ollamachat/qwen2.5-coder:3b --map-tokens 1024 --edit-format whole</p>
<p>snake game</p>
<blockquote data-path-to-node="14">
<p data-path-to-node="14,0"><strong data-path-to-node="14,0" data-index-in-node="0">Create a classic Snake game in a single file called index.html. Use CSS to make it look modern with a dark theme, and JavaScript for the game logic. Use the arrow keys for controls. Add a score counter at the top and a 'Game Over' screen with a restart button.</strong></p>
</blockquote>
<blockquote data-path-to-node="8">
<p data-path-to-node="8,0"><strong data-path-to-node="8,0" data-index-in-node="0">You forgot to specify the filename. Please output the code again, but make sure to write the filename <code data-path-to-node="8,0" data-index-in-node="102">index.html</code> right before the code block.</strong></p>
</blockquote>
<h3 data-path-to-node="9">&nbsp;</h3>
<p>It seems that the 4b model is just lazy and writes a comment saying insert code here rather than actually writing the code?. What the hell... lazy.&nbsp;</p>
<div class="code-block ng-tns-c2827611141-204 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwibvpKGttCTAxUAAAAAHQAAAAAQngI">
<div class="formatted-code-block-internal-container ng-tns-c2827611141-204">
<div class="animated-opacity ng-tns-c2827611141-204">
<pre class="ng-tns-c2827611141-204"><code class="code-container formatted ng-tns-c2827611141-204" role="text" data-test-id="code-content">/model ollama
chat/qwen2.5-coder:latest
</code></pre>
</div>
</div>
</div>
<h3 data-path-to-node="11">The game.js file is empty or just has a green dot. I need the actual game logic. Please write the full JavaScript to: 1) Create a game loop using setInterval or requestAnimationFrame. 2) Track the snake's body using an array of X/Y coordinates. 3) Listen for arrow keys to change the snake's direction. 4) Spawn an apple randomly, and make the snake grow when it eats it.</h3>
<p>basically its too slow and annoying on a small model to code, it works but not well. just gets confused most of the time. switch to an online API for this.&nbsp;</p>
<div id="model-response-message-contentr90429e20fb7bb08b" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" aria-live="polite" aria-busy="false">
<p data-path-to-node="0">I completely understand your frustration. Running local models on a 4GB graphics card is a fun experiment, but it is often like trying to paint a masterpiece with a toothbrush. The models are just too small to reliably follow complex instructions without getting confused.</p>
<p data-path-to-node="1">To get the "magic" AI coding experience you see online, you need to switch to a cloud-based model via an API. Aider is actually built primarily to work with these massive, ultra-smart models, and it is a night-and-day difference in speed and quality.</p>
<h3 data-path-to-node="2">How to Switch to a Smarter Model</h3>
<p data-path-to-node="3">Currently, the absolute best model for Aider is <strong data-path-to-node="3" data-index-in-node="48">Claude 3.7 Sonnet</strong> (or <strong data-path-to-node="3" data-index-in-node="70">Claude 4 Sonnet</strong>), created by Anthropic. It rarely makes formatting mistakes and can code entire complex apps in one shot.</p>
<p data-path-to-node="4">Here is how you make the switch:</p>
<ol start="1" data-path-to-node="5">
<li>
<p data-path-to-node="5,0,0"><strong data-path-to-node="5,0,0" data-index-in-node="0">Get an API Key:</strong> Go to the Anthropic Console website, create an account, put $5 on it (you pay per request, usually just pennies per chat), and generate an API key.</p>
</li>
<li>
<p data-path-to-node="5,1,0"><strong data-path-to-node="5,1,0" data-index-in-node="0">Tell Aider to use it:</strong> You don't need your Proxmox server or Ollama anymore. Just open a terminal on your laptop, navigate to your project folder, and run:</p>
</li>
</ol>
<div class="code-block ng-tns-c2827611141-219 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwibvpKGttCTAxUAAAAAHQAAAAAQtgI">
<div class="code-block-decoration header-formatted gds-title-s ng-tns-c2827611141-219 ng-star-inserted"><span class="ng-tns-c2827611141-219">Bash</span>
<div class="buttons ng-tns-c2827611141-219 ng-star-inserted">&nbsp;</div>
</div>
<div class="formatted-code-block-internal-container ng-tns-c2827611141-219">
<div class="animated-opacity ng-tns-c2827611141-219">
<pre class="ng-tns-c2827611141-219"><code class="code-container formatted ng-tns-c2827611141-219" role="text" data-test-id="code-content"><span class="hljs-built
in">export</span> ANTHROPICAPIKEY=your-api-key-here
aider --model sonnet
</code></pre>
</div>
</div>
</div>
<p data-path-to-node="7"><em data-path-to-node="7" data-index-in-node="0">(Note: You can also use OpenAI by grabbing an API key from them and running <code data-path-to-node="7" data-index-in-node="76">aider --model o3-mini</code> or <code data-path-to-node="7" data-index-in-node="101">aider --model gpt-4o</code>).</em></p>
<h3 data-path-to-node="8">Where is it saving on Git?</h3>
<p data-path-to-node="9">This is a very common point of confusion! Aider is saving to <strong data-path-to-node="9" data-index-in-node="61">Git</strong>, which is not the same thing as <strong data-path-to-node="9" data-index-in-node="97">GitHub</strong>.</p>
<ul data-path-to-node="10">
<li>
<p data-path-to-node="10,0,0"><strong data-path-to-node="10,0,0" data-index-in-node="0">GitHub</strong> is a website where you upload code to share it with the world.</p>
</li>
<li>
<p data-path-to-node="10,1,0"><strong data-path-to-node="10,1,0" data-index-in-node="0">Git</strong> is just a tracking tool that lives locally on your laptop.</p>
</li>
</ul>
<p data-path-to-node="11">When Aider says it "committed to git," it is saving a snapshot of your code into a hidden folder called <code data-path-to-node="11" data-index-in-node="104">.git</code> right there inside your <code data-path-to-node="11" data-index-in-node="133">aider-snake-test</code> directory on your laptop. <strong data-path-to-node="11" data-index-in-node="176">None of your code is being sent to the internet or uploaded to a website.</strong></p>
<p data-path-to-node="12">If you want to see exactly what Aider has been saving, just type this command in your terminal while inside your project folder:</p>
<div class="code-block ng-tns-c2827611141-220 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwibvpKGttCTAxUAAAAAHQAAAAAQtwI">
<div class="code-block-decoration header-formatted gds-title-s ng-tns-c2827611141-220 ng-star-inserted"><span class="ng-tns-c2827611141-220">Bash</span>
<div class="buttons ng-tns-c2827611141-220 ng-star-inserted">&nbsp;</div>
</div>
<div class="formatted-code-block-internal-container ng-tns-c2827611141-220">
<div class="animated-opacity ng-tns-c2827611141-220">
<pre class="ng-tns-c2827611141-220"><code class="code-container formatted ng-tns-c2827611141-220" role="text" data-test-id="code-content">git <span class="hljs-built_in">log</span> --oneline
</code></pre>
</div>
</div>
</div>
<p data-path-to-node="14">This will print out a neat timeline of every change Aider has made to your files. If you ever want to completely wipe out Aider's mistakes and go back in time to an older version, you can copy the 7-character code next to the commit you want, and run:</p>
<div class="code-block ng-tns-c2827611141-221 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" data-hveid="0" data-ved="0CAAQhtANahgKEwibvpKGttCTAxUAAAAAHQAAAAAQuAI">
<div class="code-block-decoration header-formatted gds-title-s ng-tns-c2827611141-221 ng-star-inserted"><span class="ng-tns-c2827611141-221">Bash</span>
<div class="buttons ng-tns-c2827611141-221 ng-star-inserted">&nbsp;</div>
</div>
<div class="formatted-code-block-internal-container ng-tns-c2827611141-221">
<div class="animated-opacity ng-tns-c2827611141-221">
<pre class="ng-tns-c2827611141-221"><code class="code-container formatted ng-tns-c2827611141-221" role="text" data-test-id="code-content">git reset --hard &lt;the-7-character-code&gt;
</code></pre>
</div>
</div>
</div>
</div>

View Statistics
This Week
11
This Month
93
This Year
167

No Items Found.

Add Comment
Type in a Nick Name here
 
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Nothing, to my way of thinking, is a better proof of a well ordered mind than a man's ability to stop just where he is and pass some time in his own company.
Seneca
Latest News
## 🚀 AI Giants Hit Bullseye: Anthropic & OpenAI Achieve Product-Market Fit Anthropic and OpenAI have reached a significant milestone, finding product-market fit with their AI technologies, which means their products effectively meet the needs of their customers, driving growth and adoption. This achievement showcases the practical value of their innovations, enabling businesses and individuals to leverage AI for enhanced productivity and efficiency. With this alignment of product and market needs, these companies are poised to transform industries and shape the future of technology.