{"id":80,"date":"2010-10-31T23:35:11","date_gmt":"2010-10-31T22:35:11","guid":{"rendered":"http:\/\/thoughtflow.dk\/?p=80"},"modified":"2020-11-01T19:41:40","modified_gmt":"2020-11-01T18:41:40","slug":"space-wars-on-html-canvas","status":"publish","type":"post","link":"https:\/\/davidlebech.com\/thoughtflow\/space-wars-on-html-canvas\/","title":{"rendered":"Space Wars on html canvas"},"content":{"rendered":"<p><a href=\"\/thoughtflow\/wp-content\/uploads\/spacewars.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-thumbnail wp-image-84\" title=\"Space Wars on html canvas\" src=\"\/thoughtflow\/wp-content\/uploads\/spacewars-150x150.png\" alt=\"Space Wars screenshot\" width=\"150\" height=\"150\" srcset=\"https:\/\/davidlebech.com\/thoughtflow\/wp-content\/uploads\/spacewars-150x150.png 150w, https:\/\/davidlebech.com\/thoughtflow\/wp-content\/uploads\/spacewars-300x300.png 300w, https:\/\/davidlebech.com\/thoughtflow\/wp-content\/uploads\/spacewars.png 402w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a>I recently spent a little time testing out the <code>&lt;canvas&gt;<\/code> element which is a nice and fairly new markup element that is included in html5. I decided to take a little Asteroids-like game that I made in a group project at the University of Oregon in Fall 2009 (we called it Space Wars) and convert it to work with the <code>&lt;canvas&gt;<\/code> element and Javascript.<\/p>\n<p>This was very fun and surprisingly easy. A lot of the code could be copied almost exactly from the Java code and modified slightly to work with the <code>&lt;canvas&gt;<\/code> element. I gained the necessary background from <a href=\"https:\/\/developer.mozilla.org\/en\/Canvas_tutorial\">this excellent tutorial<\/a> and besides some differences between Firefox and Chrome\/Opera\/Safari in how to handle keyboard events there were no major obstacles along the way.<\/p>\n<p>If anyone should be interested, the game can be played here:<br \/>\n<a href=\"https:\/\/davidlebech.com\/spacewars\/\">davidlebech.com\/spacewars\/<\/a><\/p>\n<p>The <code>&lt;canvas&gt;<\/code> element is definitely a nice addition to the toolkit for online webservices and it will be interesting to see what people might use it for in the future.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I recently spent a little time testing out the &lt;canvas&gt; element which is a nice and fairly new markup element that is included in html5. I decided to take a little Asteroids-like game that I made in a group project at the University of Oregon in Fall 2009 (we called it Space Wars) and convert [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37],"tags":[42,40,41,39,38],"class_list":["post-80","post","type-post","status-publish","format-standard","hentry","category-projects","tag-asteroids","tag-canvas","tag-game","tag-html5","tag-space-wars"],"_links":{"self":[{"href":"https:\/\/davidlebech.com\/thoughtflow\/wp-json\/wp\/v2\/posts\/80","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/davidlebech.com\/thoughtflow\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davidlebech.com\/thoughtflow\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davidlebech.com\/thoughtflow\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davidlebech.com\/thoughtflow\/wp-json\/wp\/v2\/comments?post=80"}],"version-history":[{"count":0,"href":"https:\/\/davidlebech.com\/thoughtflow\/wp-json\/wp\/v2\/posts\/80\/revisions"}],"wp:attachment":[{"href":"https:\/\/davidlebech.com\/thoughtflow\/wp-json\/wp\/v2\/media?parent=80"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davidlebech.com\/thoughtflow\/wp-json\/wp\/v2\/categories?post=80"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davidlebech.com\/thoughtflow\/wp-json\/wp\/v2\/tags?post=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}