Proto Space Invaders

Dies ist eine grafische Ausgabe-Herausforderung, bei der es darum geht, den kürzesten Code pro Sprache anzugeben.

Aufgabe

Ihr Code sollte es dem Benutzer ermöglichen, den folgenden Außerirdischen auf dem Bildschirm / im Fenster zu bewegen.

Ihr Code kann ihn einfach aus einer lokalen Datei laden. Sie können es auch in ein anderes Standard-Bildformat konvertieren oder sogar die kleinen Pixelfehler im Bild beheben, auf die in den Kommentaren hingewiesen wurde.

Der Hintergrund sollte weiß sein und das Fenster / der Bildschirm muss mindestens 400 x 400 Pixel groß sein. Wenn Ihre Sprache keine so großen Fenster / Bildschirme unterstützt, verwenden Sie die größte Größe, sofern diese nicht kleiner als 200 x 200 ist.

Um den Außerirdischen auf dem Bildschirm zu bewegen, sollte der Code mithilfe der Pfeiltasten auf einer Standardtastatur nach oben / unten / links / rechts funktionieren.

Ihr Code sollte ein vollständiges Programm sein .

Einschränkungen / Einschränkungen

Der Alien sollte an den Grenzen anhalten. Es sollte auch mit einer einheitlichen Geschwindigkeit bewegen glatt ohne sichtbare Flackern oder Stottern und bei mindestens 24 fps dargestellt werden. Es sollte zwischen 2 und 5 Sekunden dauern, um von einer Seite des Bildschirms / Fensters zur anderen zu gelangen.

Sprachen und Bibliotheken

Sie können eine beliebige Sprache oder Bibliothek verwenden (die nicht für diese Herausforderung entwickelt wurde). Ich würde jedoch gerne in der Lage sein, Ihren Code nach Möglichkeit zu testen. Wenn Sie also klare Anweisungen zur Ausführung in Ubuntu geben können, wären Sie sehr dankbar.

Katalog

Das Stapel-Snippet am Ende dieses Beitrags generiert den Katalog aus den Antworten a) als Liste der kürzesten Lösungen pro Sprache und b) als Gesamt-Bestenliste.

Um sicherzustellen, dass Ihre Antwort angezeigt wird, beginnen Sie Ihre Antwort mit einer Überschrift. Verwenden Sie dazu die folgende Markdown-Vorlage:

## Language Name, N bytes

Wo Nist die Größe Ihres Beitrags? Wenn Sie Ihren Score zu verbessern, Sie können alte Rechnungen in der Überschrift halten, indem man sich durch das Anschlagen. Zum Beispiel:

## Ruby, <s>104</s> <s>101</s> 96 bytes

Wenn Sie mehrere Zahlen in Ihre Kopfzeile aufnehmen möchten (z. B. weil Ihre Punktzahl die Summe von zwei Dateien ist oder wenn Sie die Strafen für Interpreter-Flags separat auflisten möchten), stellen Sie sicher, dass die tatsächliche Punktzahl die letzte Zahl in der Kopfzeile ist:

## Perl, 43 + 2 (-p flag) = 45 bytes

Sie können den Namen der Sprache auch als Link festlegen, der dann im Snippet angezeigt wird:

## [><>](http://esolangs.org/wiki/Fish), 121 bytes

<style>body { text-align: left !important} #answer-list { padding: 10px; width: 290px; float: left; } #language-list { padding: 10px; width: 290px; float: left; } table thead { font-weight: bold; } table td { padding: 5px; }</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/codegolf/all.css?v=83c949450c8b"> <div id="language-list"> <h2>Shortest Solution by Language</h2> <table class="language-list"> <thead> <tr><td>Language</td><td>User</td><td>Score</td></tr> </thead> <tbody id="languages"> </tbody> </table> </div> <div id="answer-list"> <h2>Leaderboard</h2> <table class="answer-list"> <thead> <tr><td></td><td>Author</td><td>Language</td><td>Size</td></tr> </thead> <tbody id="answers"> </tbody> </table> </div> <table style="display: none"> <tbody id="answer-template"> <tr><td>{{PLACE}}</td><td>{{NAME}}</td><td>{{LANGUAGE}}</td><td>{{SIZE}}</td><td><a href="{{LINK}}">Link</a></td></tr> </tbody> </table> <table style="display: none"> <tbody id="language-template"> <tr><td>{{LANGUAGE}}</td><td>{{NAME}}</td><td>{{SIZE}}</td><td><a href="{{LINK}}">Link</a></td></tr> </tbody> </table><script>var QUESTION_ID = 62426; var ANSWER_FILTER = "!t)IWYnsLAZle2tQ3KqrVveCRJfxcRLe"; var COMMENT_FILTER = "!)Q2B_A2kjfAiU78X(md6BoYk"; var OVERRIDE_USER = 9206; var answers = [], answers_hash, answer_ids, answer_page = 1, more_answers = true, comment_page; function answersUrl(index) { return "https://api.stackexchange.com/2.2/questions/" + QUESTION_ID + "/answers?page=" + index + "&pagesize=100&order=desc&sort=creation&site=codegolf&filter=" + ANSWER_FILTER; } function commentUrl(index, answers) { return "https://api.stackexchange.com/2.2/answers/" + answers.join(';') + "/comments?page=" + index + "&pagesize=100&order=desc&sort=creation&site=codegolf&filter=" + COMMENT_FILTER; } function getAnswers() { jQuery.ajax({ url: answersUrl(answer_page++), method: "get", dataType: "jsonp", crossDomain: true, success: function (data) { answers.push.apply(answers, data.items); answers_hash = []; answer_ids = []; data.items.forEach(function(a) { a.comments = []; var id = +a.share_link.match(/\d+/); answer_ids.push(id); answers_hash[id] = a; }); if (!data.has_more) more_answers = false; comment_page = 1; getComments(); } }); } function getComments() { jQuery.ajax({ url: commentUrl(comment_page++, answer_ids), method: "get", dataType: "jsonp", crossDomain: true, success: function (data) { data.items.forEach(function(c) { if (c.owner.user_id === OVERRIDE_USER) answers_hash[c.post_id].comments.push(c); }); if (data.has_more) getComments(); else if (more_answers) getAnswers(); else process(); } }); } getAnswers(); var SCORE_REG = /<h\d>\s*([^\n,<]*(?:<(?:[^\n>]*>[^\n<]*<\/[^\n>]*>)[^\n,<]*)*),.*?(\d+)(?=[^\n\d<>]*(?:<(?:s>[^\n<>]*<\/s>|[^\n<>]+>)[^\n\d<>]*)*<\/h\d>)/; var OVERRIDE_REG = /^Override\s*header:\s*/i; function getAuthorName(a) { return a.owner.display_name; } function process() { var valid = []; answers.forEach(function(a) { var body = a.body; a.comments.forEach(function(c) { if(OVERRIDE_REG.test(c.body)) body = '<h1>' + c.body.replace(OVERRIDE_REG, '') + '</h1>'; }); var match = body.match(SCORE_REG); if (match) valid.push({ user: getAuthorName(a), size: +match[2], language: match[1], link: a.share_link, }); else console.log(body); }); valid.sort(function (a, b) { var aB = a.size, bB = b.size; return aB - bB }); var languages = {}; var place = 1; var lastSize = null; var lastPlace = 1; valid.forEach(function (a) { if (a.size != lastSize) lastPlace = place; lastSize = a.size; ++place; var answer = jQuery("#answer-template").html(); answer = answer.replace("{{PLACE}}", lastPlace + ".") .replace("{{NAME}}", a.user) .replace("{{LANGUAGE}}", a.language) .replace("{{SIZE}}", a.size) .replace("{{LINK}}", a.link); answer = jQuery(answer); jQuery("#answers").append(answer); var lang = a.language; lang = jQuery('<a>'+lang+'</a>').text(); languages[lang] = languages[lang] || {lang: a.language, lang_raw: lang, user: a.user, size: a.size, link: a.link}; }); var langs = []; for (var lang in languages) if (languages.hasOwnProperty(lang)) langs.push(languages[lang]); langs.sort(function (a, b) { if (a.lang_raw > b.lang_raw) return 1; if (a.lang_raw < b.lang_raw) return -1; return 0; }); for (var i = 0; i < langs.length; ++i) { var language = jQuery("#language-template").html(); var lang = langs[i]; language = language.replace("{{LANGUAGE}}", lang.lang) .replace("{{NAME}}", lang.user) .replace("{{SIZE}}", lang.size) .replace("{{LINK}}", lang.link); language = jQuery(language); jQuery("#languages").append(language); } }</script>

Scratch , 221 217 Bytes

Klicken Sie auf das Bild, um es in Aktion anzuzeigen. Die Bewegung wird durch Tastenanschläge bestimmt. Je schneller Sie die Tastenwiederholung einstellen, desto sanfter wird sie.

Das Bild ist im Projekt enthalten, aber die Scratch-Bytes werden in der Regel von der Textdarstellung in Golf pro gezählt dieser Meta Post . Wenn Uneinigkeit darüber besteht, ob dies akzeptabel ist (oder ob die Bewegung glatt genug ist), lassen Sie es mich wissen und ich werde versuchen, es zu umgehen.

Verarbeitung 2, 219 199 241 220 219 Bytes

int a,x=0,y=0;void setup(){size(500,500);}void draw(){background(-1);image(loadImage(".png"),x,y);if(keyPressed){a=keyCode;if(a==38)y--;if(a==37)x--;if(a==40)y++;if(a==39)x++;}x=constrain(x,0,436);y=constrain(y,0,454);}

Erfordert das Abbild, das .pngim selben Verzeichnis wie die .pde gespeichert ist

Python 2, 262 253 246 240 Bytes

from pygame import*
init()
key.set_repeat(1)
p=[0,0]
d=display
c=d.set_mode((400,)*2)
while c.fill((255,)*3):
 e=event.get(2);c.blit(image.load("I"),p);d.flip()
 if e:x=e[0].key+1;q=x&2;b=q/2;p[b]=max(0,min(336+b*16,p[b]+(1-q)*(1-(2*x&2))))

Wow. Was für eine Menge Hackery.

Verwendet das Modul 'Pygame', das unter http://pygame.org zu finden ist .

Erläuterung

key.set_repeat(1) - Senden Sie alle Millisekunden Ereignisse mit wiederholten Schlüsseln über das Ereignissystem

c=d.set_mode((400,)*2) - Erstellen Sie die Anzeigefläche 400x400

while c.fill((255,)*3):- Effektiv while 1:, löscht aber auch den Bildschirm

e=event.get(2);c.blit(image.load("I"),p);d.flip()- Sammeln Sie nur Tastaturereignisse, laden Sie das in einer PNG-Datei gespeicherte Bild Iund zeichnen Sie es. Aktualisieren Sie den Bildschirm

if e:x=e[0].key+1;q=x&2;b=q/2;p[b]=max(0,min(336+b*16,p[b]+(1-q)*(1-(2*x&2)))) - Wenn ein Ereignis aufgetreten ist, ermitteln Sie, welche Pfeiltaste gedrückt wurde (macht komische Sachen, wenn Sie andere Tasten drücken), und ändern Sie dann die Position der Oberfläche in Abhängigkeit davon, welche Taste Sie gedrückt haben.

Haskell, 410 Bytes

import Graphics.Gloss
import Graphics.Gloss.Interface.Pure.Game
main=do b<-loadBMP"b";play(InWindow""(400,400)(0,0))white 200((0,0),id)(b#)e(%)
e(EventKey(SpecialKey k)Down _ _)(c,_)|k==KeyUp=(c,fmap(+1))|k==KeyDown=(c,fmap(+(-1)))|k==KeyLeft=(c,((+(-1))?))|k==KeyRight=(c,((+1)?))
e(EventKey _ Up _ _)(c,_)=(c,id)
e _ w=w
_%(c,f)=(s?(s<$>f c),f)
s=min 200.max(-200)
b#((x,y),_)=Translate x y b
f?(a,b)=(f a,b)

Das Bild des Außerirdischen wird in einer Datei mit dem Namen erwartet b im .bmpFormat .

Ich bin neu in der Gloss-Bibliothek, daher ist dies möglicherweise nicht optimal. Weiß jemand, ob ich überprüfen kann, ob eine Taste gedrückt wird, anstatt zu verfolgenKeyUp / KeyDownEvents ?

So funktioniert es: Die letzten vier Parameter von playsind der Weltzustand (initialisiert mit ((0,0),id), eine Funktion zum Zeichnen eines Bildes aus einem Zustand ( #), eine Ereignisbehandlungsroutine ( e) und eine Funktion, die den Zustand über die Zeit ändert (% ).

Der Zustand ist ein Paar von xy-Koordinaten und eine Funktion, wie man sie wann immer ändert % Aufruf .

# verschiebt die Bitmap (b ) zu den aktuellen Koordinaten und zeichnet sie.

e sucht entweder KeyDown Ereignissen der Cursortasten und setzt entsprechende Funktionen im Status oder nach KeyUpeiner beliebigen Taste, um die Funktion im Status auf die Identitätsfunktion zurückzusetzen.

% Wendet die Funktion vom Status auf die aktuellen Koordinaten an und überprüft die Grenzen.

Ulme, 240 Bytes

import Graphics.Element as G
import Keyboard as K
import Time
import Signal exposing(..)
c=min 800>>max 64
i(x,y)=G.container x y G.middle(G.image 64 48"http://i.stack.imgur.com/CUweU.png")
main=i<~foldp(\{x,y}(v,w)->(c v+x,c w-y))(99,99)(sampleOn(Time.fps 200)K.arrows)

Probieren Sie es hier aus . Die Byteanzahl wird nach dem Ersetzen der URL durch angegeben .png.

AutoIt , 269 267 Bytes

#include<Misc.au3>
GUICreate(0,-1,-1,-1,-1,-1,34078728)
$0=GUICtrlCreatePic("b.bmp",0,0,64,48)
GUISetState()
Dim $1,$2
$3=_IsPressed
Do
$1+=$3("27")-$3("25")
$2+=$3("28")-$3("26")
$1=($1>336)?336:($1<0)?0:$1
$2=($2>352)?352:($2<0)?0:$2
GUICtrlSetPos($0,$1,$2)
Until 0

Erfordert, dass das Bild als b.bmp im Skriptverzeichnis gespeichert wird. Wenn Sie ein Bild mit tatsächlicher Transparenz verwenden möchten, müssen Sie es von PNG in eine 32-Bit-Bitmap konvertieren (OT: ein wirklich unbeachtetes Format).

Erläuterung

Wir müssen importieren Misc.au3, um Zugriff zu erhalten _IsPressed. Eine Funktion, die einen Tastencode akzeptiert und zurückkehrt Trueoder Falsewenn die Taste gedrückt wird.

Die Spezifikation der Herausforderung ist ziemlich cool, da wir ein quadratisches 400px-Fenster erstellen müssen. Die Standardgrößenparameter (bezeichnet als -1oder Default) sind 400 x 400. Der erweiterte Windows-Stil ist auf festgelegt34078728 . Dadurch wird das Fenster doppelt gepuffert und von unten nach oben gezeichnet. Dies ist erforderlich, um das Flackern gemäß der Herausforderungsanforderung zu beseitigen. In Windows 10 bricht diese ungewöhnliche (undokumentierte) Kombination von Stilen die Fenstertitelleiste (alle schwebenden Effekte sind deaktiviert).

$1und $2werden deklariert und halten den x- und y-Versatz des vom Steuerelement geladenen Bildes $0. $3wird zu einem Zeiger auf die Funktion _IsPressed, um den Code erheblich zu verkürzen.

Da es nicht erforderlich ist, das Programm zu beenden, wird dieses Skript in einer Endlosschleife ( Until 0) ausgeführt.

$1+=$3("27")-$3("25")missbraucht den varianten Datentyp in AutoIt, indem der Boolesche Wert, der von zurückgegeben wird, dynamisch _IsPressedin eine Ganzzahl umgewandelt wird, die vom x-Offset hinzugefügt oder untergeordnet werden kann. Gleiches gilt für y. $1=($1>336)?336:($1<0)?0:$1verwendet den ternären Operator, der aus C-ähnlichen Sprachen bekannt ist, um eine Begrenzungsprüfung durchzuführen, um das Alien an den Grenzen zu stoppen.

GuiCtrlSetPos Verschiebt die Bildsteuerung auf die neuen Koordinaten.

Hier ist ein Screenshot mit einem transparenten Alien (du kannst dich sogar diagonal bewegen):

Lua + LÖVE, 291 Zeichen

x=0
y=0
l=love
g=l.graphics
l.window.setMode(400,400)
i=g.newImage("i")
function l.update()d=l.keyboard.isDown
if d("left")and x>0 then x=x-1 end
if d("right")and x<336 then x=x+1 end
if d("up")and y>0 then y=y-1 end
if d("down")and y<352 then y=y+1 end
end
function l.draw()g.draw(i,x,y)end

Dies verwendet ein nicht veränderbares 400 x 400-Fenster. Ich hatte keinen Erfolg love.keyboard.setKeyRepeat()damit, mich anzupassen , um das Lesen der Schlüssel zu beschleunigen, also habe ich den empfohlenen Weg befolgt und den Status jedes Schlüssels abgefragt.

Da meine Beziehung zu Lua fornicht die beste ist, gelang es mir auch diesmal nicht, die Schleife kürzer zu machen als die Dump-Hardcodierung des Zustands jedes Schlüssels.

SpecBAS - 285 255 Bytes

1 GRAPHIC NEW v LOAD "inv8.bmp" TRANSPARENT 15
2 PALETTE COPY v,0,1 TO 5: GRAPHIC REMAP v
3 LET x,y=100
4 CLS : WINDOW PUT GRAPHIC v,0,x,y
5 LET x=x+KEYST(39)-KEYST(37),y=y+KEYST(40)-KEYST(38)
6 LET x=CLAMP(x,1 TO 400),y=CLAMP(y,1 TO 400)
7 WAIT SCREEN 
8 GO TO 4

Lädt das Bild - Farbe 15 ist hellweiß, so dass es transparent wird.

Die Verwendung des Originalbilds und der Standard-SpecBAS-Palette hat es etwas merkwürdig erscheinen lassen, sodass Zeile 2 sie so vertauscht, dass sie mit dem Eingabebild übereinstimmen. Das folgende Bild zeigt, wie es ohne Zeile 2 und danach aussieht.

Der CLAMP-Befehl begrenzt die Grafik in beide Richtungen zwischen 1 und 400 und speichert mehrere IF ... THEN-Anweisungen.

Zeile 9 wartet nur darauf, dass die Dinge aufholen und verhindert das Flackern.

Es bewegt sich jeweils um ein Pixel, basierend auf einer booleschen Prüfung, welche Taste gedrückt wird. Es dauert also etwas länger als 5 Sekunden, um sich von einer Seite zur anderen zu bewegen.

Ruby with Shoes, 252 243 Zeichen

Shoes.app{background white
i=image'i'
m=[0,0]
a=[:width,:height]
animate(99){i.left+=m[0]<=>i.left
i.top+=m[1]<=>i.top}
keypress{|k|d,v={?u=>[1,-1],?d=>[1,1],?l=>[0,-1],?r=>[0,1]}[k[0]];m[d]=[[m[d]+v*4,self.send(p=a[d])-i.send(p)].min,0].max}}

Hierbei wird ein Fenster mit einer Größe von 600 x 500 verwendet. Wenn Sie die Größe des Fensters so ändern, dass der Angreifer nicht angezeigt wird, wird es beim Drücken der nächsten Bewegungstaste wiederhergestellt.

Der Trick, um die Anforderungen zu erfüllen, besteht darin, dass die Position des Eindringlings in Schritten von 4 geändert wird, die tatsächliche Bewegung jedoch in Schritten von 1 bei 99 Bildern pro Sekunde ausgeführt wird.

Tcl / Tk , 242 Bytes

grid [canvas .c -w 400 -he 403 -bg #FFF -highlightt 0]
.c cr i 30 24 -i [image c photo -fi .png] -t p
lmap {k b x y} "Up 1]>25 0 -5 Right 0]<368 5 0 Down 1]<376 0 5 Left 0]>30 -5 0" {bind . <$k> "if \[lindex \[.c coo p] $b {.c move p $x $y}"}

JavaScript (mit paper.js), 215 Byte

v=new Raster("http://i.stack.imgur.com/CUweU.png",99,99);p=new Size(4,0)
onFrame=e=>{if(!v.isInside(view.bounds)){p=-p};v.position+=p}
onKeyDown=e=>{p=new Size([[0,-4],[0,4],[-4,0],[4,0]]["udlr".indexOf(e.key[0])])}

paper.js ist ein JS-Grafik-Framework, das viele nützliche Funktionen zur Bildmanipulation bietet. Zum Ausführen kopieren Sie einfach das Obige in den Abschnitt links hier und klicken einmal in den rechten Abschnitt, um den Alien zu bewegen, damit er den Fokus erhält. Wenn Ihr Browser damit umgehen kann, sollte er mit 60 fps laufen.