2012-03-27 17:54:30 +00:00
<!DOCTYPE html>
< html >
2012-03-27 17:57:59 +00:00
< head >
2012-04-04 09:59:06 +00:00
< title > Space Invaders< / title >
2012-03-27 17:57:59 +00:00
< meta http-equiv = "Content-type" content = "text/html; charset=utf-8" >
< style type = "text/css" >
@font-face {
font-family: "arcadeFont";
src: url(data:font/woff;charset=utf-8;base64,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
url(data:font/truetype;charset=utf-8;base64,AAEAAAAQAQAABAAARkZUTWAh3toAAAEMAAAAHEdERUYBGQAkAAABKAAAAChPUy8yzYih1QAAAVAAAABgY21hcJ+9QgQAAAGwAAAB0mN2dCAJAAYAAAADhAAAAA5mcGdtD7QvpwAAA5QAAAJlZ2FzcAAAABAAAAX8AAAACGdseWYbiEhnAAAGBAAAttxoZWFkDMu8qQAAvOAAAAA2aGhlYR8CGMIAAL0YAAAAJGhtdHgPm2wAAAC9PAAAA6Zsb2NhhftYIgAAwOQAAAHWbWF4cAIOAbAAAMK8AAAAIG5hbWUrAUanAADC3AAAAgZwb3N0jnNrjQAAxOQAAALWcHJlcBrYVOoAAMe8AAAAeQAAAAEAAAAAyYlvMQAAAADLTDfSAAAAAMtMN9YAAQAAAA4AAAAYACAAAAACAAEAAQDpAAEABAAAAAIAAAABAAAAAQAAAAQH2AH0AAUAAAUyBZgAAAEeBTIFmAAAA9YAZgISAAACAAUDAAAAAAAAgAAAr1AAYEoAAAAAAAAAAFBmRWQAwAAg+wQIAAAAAAAIAAAoYAAAkwAAAAAGAAgAAAAAIAABAAAAAwAAAAMAAAAcAAEAAAAAAMwAAwABAAAAHAAEALAAAAAoACAABAAIAH4A/wFTAXgCxgLcIAogFCAaIB4gIiAmIC8gOiBfIKwhIuAA+wT//wAAACAAoAFSAXgCxgLcIAAgECAYIBwgIiAmIC8gOSBfIKwhIuAA+wH////j/8L/cP9M/f/96uDH4MLgv+C+4LvguOCw4Kfgg+A338Ig5QXlAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAADBAUGBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYnKCkqKywtLi8wMTIzNDU2Nzg5Ojs8PT4/QEFCQ0RFRkdISUpLTE1OT1BRUlNUVVZXWFlaW1xdXl9gYQCGh4mLk5ieo6KkpqWnqauqrK2vrrCxs7W0tri3vLu9vgByZGVp3XihcGvkdmoAiJoAcwAAZ3cAAAAAAGx8AKi6gWNuAAAAAG193mKChZfCw9XW2tvX2LkAwcQA4+Dh5ucAedncAISMg42Kj5CRjpWWAJScnZsAxcZxAAAAegAAAAAAAAABAAIAAwAFAAIAAgAAALAALLAAE0uwKlBYsEp2WbAAIz8YsAYrWD1ZS7AqUFh9WSDUsAETLhgtsAEsINqwDCstsAIsS1JYRSNZIS2wAyxpGCCwQFBYIbBAWS2wBCywBitYISMheljdG81ZG0tSWFj9G+1ZGyMhsAUrWLBGdllY3RvNWVlZGC2wBSwNXFotsAYssSIBiFBYsCCIXFwbsABZLbAHLLEkAYhQWLBAiFxcG7AAWS2wCCwSESA5Ly2wCSwgfbAGK1jEG81ZILADJUkjILAEJkqwAFBYimWKYSCwAFBYOBshIVkbiophILAAUlg4GyEhWVkYLbAKLLAGK1ghEBsQIVktsAssINKwDCstsAwsIC+wBytcWCAgRyNGYWogWCBkYjgbISFZGyFZLbANLBIRICA5LyCKIEeKRmEjiiCKI0qwAFBYI7AAUliwQDgbIVkbI7AAUFiwQGU4GyFZWS2wDiywBitYPdYYISEbINaKS1JYIIojSSCwAFVYOBshIVkbISFZWS2wDywjINYgL7AHK1xYIyBYS1MbIbABWViKsAQmSSOKIyCKSYojYTgbISEhIVkbISEhISFZLbAQLCDasBIrLbARLCDSsBIrLbASLCAvsAcrXFggIEcjRmFqiiBHI0YjYWpgIFggZGI4GyEhWRshIVktsBMsIIogiocgsAMlSmQjigewIFBYPBvAWS2wFCyzAEABQEJCAUu4EABjAEu4EABjIIogilVYIIogilJYI2IgsAAjQhtiILABI0JZILBAUliyACAAQ2NCsgEgAUNjQrAgY7AZZRwhWRshIVktsBUssAFDYyOwAENjIy0AAAAAAQAB//8ADwADAQABAAcACAAABwAXAB8AWgCwBy+xGAHpsB4vsRAB6bAOL7EJAemwFi+xAgHpAbAgL7AA1rEYBemwDjK0CAUABwQrsggACiuzQAgMCSuwGBCxEgErtAUFAAcEK7EhASuxEhgRErAaOQAwMQEZASkBGQEhASkBHQEpAR0BKQEZASkBFQE7AT0BKwEVAQADAAMA/QD+AAGAAYD/AP8AAYABgP4A/gABAICAgIABAAOAA4D8gPyABQCAgICAAYABgID7gICAgAAAAAICAAEABQAIAAAHABMAMQCwAC+xAgHpAbAUL7AA1rAIMrQOBQAIBCuwDDK0DgUACAQrsQYF6bAQMrEVASsAMDEBPQEpAR0BIQEZASkBGQErARkBIQIAAQABAP8A/wABgAGAgID/AAEAgICAgAIAAoACgP6A/oD/AP8AAAACAQAFAAYACAAABwAPAC8AsAAvsAgzsQID6bAKMrECA+kBsBAvsADWsQYF6bAGELEIASuxDgXpsREBKwAwMQEZASkBGQEpARkBKQEZASEBAAEAAQD/AAIAAQABAP8ABQABgAGA/oD+gAGAAYD+gP6AAAAAAAIAAAEABwAIAAA3AD8AjACwAC+xJi4zM7ECAemxIjgyMrIAAgors0AANAkrsCoysAgvsR48MzOxCgHpsRIaMjKyCggKK7NACg4JK7AWMgGwQC+wNNaxBAwyMrEyBemxEDgyMrI0Mgors0A0AAkrsAgysDIQsSwBK7EUOjIysSoF6bEYIDIysiosCiuzQComCSuwHDKxQQErADAxET0BOwEZASsBPQE7AT0BKQEdATsBPQEpAR0BOwEdASsBGQE7AR0BKwEdASkBPQErAR0BKQE9ASMBOwEZASsBEYCAgICAgAEAAQCAgAEAAQCAgICAgICAgP8A/wCAgP8A/wCAAoCAgICAAgCAgAGAAYCAgICAgICAgICAgID+gP6AgICAgICAgICAgAEAAYABgP6AAAADAAABAAcACAAANwA/AEcAjQCwAC+wLjOxAgHpsEAysgACCiuzQAA0CSuwLC+xJgHpsAcvsEQzsTgB6bAiMrAML7EOAemwPi+wHjOxEwHpsBoyshM+CiuzQBMWCSsBsEgvsDTWsgQUOjIyMrQyBQAHBCuyGCBAMjIysjI0CiuzQDIuCSuxHCQyMrI0Mgors0A0AAkrsAwysUkBKwAwMRE9ASkBPQEpAT0BKwE9ATsBPQEpAT0BOwEdASkBHQEpAR0BKQEdATsBHQErAR0BKQEdASsBPQEhEzsBPQErARUBOwE9ASsBFQGAAYD/AP8AgICAgAEAAQCAgAEAAQD/AP8AAQABAICAgID/AP8AgID+gICAgICAAgCAgICAAgCAgICAgICAgICAgICAgICAgICAgICAgICAgICAAwCAgID9gICAgAAFAAABAAcACAAANwBHAE8AXwBnAOMAsAAvsFAzsQIB6bBgMrA0L7BaM7EGAemwUjKwMC+wZDOxCgHpsFYysCwvsQ4B6bBHL7AmM7FIAemwEjKwJC+wQjOxFgHpsDoysE4vsB4zsT4B6bAaMgGwaC+wANawODK0NgUABwQrsEgysDYQsQQLK7A8MrQyBQAHBCuwRDKwMhCxCAsrsEoytC4FAAcEK7BAMrAuELEMCyu0KgUABwQrsCoQsVELK7AQMrRgBQAHBCuwJDKwYBCxFAsrsFQytCIFAAcEK7BcMrAiELFiCyuwGDK0WgUABwQrsBwysWkBKwAwMRE9ATsBPQE7AT0BOwE9ATsBPQE7AT0BOwE9ATsBHQErAR0BKwEdASsBHQErAR0BKwEdASsBHQEjAxkBOwE9ASkBGQErAR0BIRE7AT0BKwEVARkBOwE9ASkBGQErAR0BIRE7AT0BKwEVgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAAQABAICA/wCAgICAAwCAgAEAAQCAgP8AgICAgAEAgICAgICAgICAgICAg
font-weight: normal;
font-style: normal;
}
* {margin: 0; padding: 0;}
html, body {width: 100%; height: 100%; text-align: center; overflow: hidden;}
canvas {display: block; width: 100%; height: 100%; background: #000; overflow: hidden;}
#game {width: 100%; height: 100%; overflow: hidden;}
ol li {list-style-position: inside; line-height: 1.5em;}
p {font-family: arcadeFont, monospace;}
p.text {display: block; color: #fff; font-family: arcadeFont, monospace; font-weight: normal; font-size: 1.3em; text-transform: uppercase; padding: 0; margin: 0;}
p.menuText {line-height: 2em;}
p.instructionsText {padding-bottom: 0.5em;}
p.scoreText {padding-bottom: 1em;}
p.scoreAdvanceText {line-height: 1.5em;}
p.creditText, p.livesText {padding: 0 1em 0.5em 0;}
p.menuHeaderText {font-weight: bold; font-size: 2em; line-height: 3em;}
p.smallText {font-size: 0.8em; line-height: 2em;}
p#insertCoins {line-height: 2em;margin-top: 2em;}
p#copyright {padding-bottom: 0.5em;}
p#copyright a {text-decoration: none; color: #fff;}
div.field {display: block; position: absolute; text-align: center;}
div.livesField {padding-left: 1em;}
div.scoreField {padding: 1em;}
div.menuFieldFrame {padding: 3em; border: 3px solid #0f0; background: #000;}
div.instructionsFieldFrame {padding: 3em; border: 3px solid #0f0; background: #000; text-align: left;}
.clickText {cursor: pointer;}
p#copyright a:hover, .clickText:hover {color: #0f0;}
/*===================================
"play" and alien intro animations
===================================*/
p#play {
display: block;
overflow: hidden;
}
#span_container {
display: inline-block;
position: relative;
line-height: 50px;
transition: left 4s linear 2s;
-webkit-transition: left 4s linear 2s;
-moz-transition: left 4s linear 2s;
}
#span_y {
display: inline-block;
position: relative;
top: -5px;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
#span_y.end {
top: 0px;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
#span_img {
display: inline-block;
width: 32px;
height: 32px;
position: absolute;
margin-left: 25px;
background-position: -4px 0px;
background-repeat: no-repeat;
}
#span_img.slide {
transition: left 4s linear 1s;
animation: animate 8s infinite;
-webkit-transition: left 4s linear 1s;
-webkit-animation: animate 8s infinite;
-moz-transition: left 4s linear 1s;
-moz-animation: animate 8s infinite;
}
#span_img.end {
transition: opacity 1s linear 1s;
-webkit-transition: opacity 1s linear 1s;
-moz-transition: opacity 1s linear 1s;
}
@-webkit-keyframes animate {
0% {background-position: -4px 0px;}
1.99% {background-position: -4px 0px;}
2% {background-position: -40px 0px;}
3.99% {background-position: -40px 0px;}
4% {background-position: -4px 0px;}
5.99% {background-position: -4px 0px;}
6% {background-position: -40px 0px;}
7.99% {background-position: -40px 0px;}
8% {background-position: -4px 0px;}
9.99% {background-position: -4px 0px;}
10% {background-position: -40px 0px;}
11.99% {background-position: -40px 0px;}
12% {background-position: -4px 0px;}
13.99% {background-position: -4px 0px;}
14% {background-position: -40px 0px;}
15.99% {background-position: -40px 0px;}
16% {background-position: -4px 0px;}
17.99% {background-position: -4px 0px;}
18% {background-position: -40px 0px;}
19.99% {background-position: -40px 0px;}
20% {background-position: -4px 0px;}
21.99% {background-position: -4px 0px;}
22% {background-position: -40px 0px;}
23.99% {background-position: -40px 0px;}
24% {background-position: -4px 0px;}
25.99% {background-position: -4px 0px;}
26% {background-position: -40px 0px;}
27.99% {background-position: -40px 0px;}
28% {background-position: -4px 0px;}
29.99% {background-position: -4px 0px;}
30% {background-position: -40px 0px;}
31.99% {background-position: -40px 0px;}
32% {background-position: -4px 0px;}
33.99% {background-position: -4px 0px;}
34% {background-position: -40px 0px;}
35.99% {background-position: -40px 0px;}
36% {background-position: -4px 0px;}
37.99% {background-position: -4px 0px;}
38% {background-position: -40px 0px;}
39.99% {background-position: -40px 0px;}
40% {background-position: -4px 0px;}
41.99% {background-position: -4px 0px;}
42% {background-position: -40px 0px;}
43.99% {background-position: -40px 0px;}
44% {background-position: -4px 0px;}
45.99% {background-position: -4px 0px;}
46% {background-position: -40px 0px;}
47.99% {background-position: -40px 0px;}
48% {background-position: -4px 0px;}
49.99% {background-position: -4px 0px;}
50% {background-position: -40px 0px;}
51.99% {background-position: -40px 0px;}
52% {background-position: -4px 0px;}
53.99% {background-position: -4px 0px;}
54% {background-position: -40px 0px;}
55.99% {background-position: -40px 0px;}
56% {background-position: -4px 0px;}
57.99% {background-position: -4px 0px;}
58% {background-position: -40px 0px;}
59.99% {background-position: -40px 0px;}
60% {background-position: -4px 0px;}
61.99% {background-position: -4px 0px;}
62% {background-position: -40px 0px;}
63.99% {background-position: -40px 0px;}
64% {background-position: -4px 0px;}
65.99% {background-position: -4px 0px;}
66% {background-position: -40px 0px;}
67.99% {background-position: -40px 0px;}
68% {background-position: -4px 0px;}
69.99% {background-position: -4px 0px;}
70% {background-position: -40px 0px;}
71.99% {background-position: -40px 0px;}
72% {background-position: -4px 0px;}
73.99% {background-position: -4px 0px;}
74% {background-position: -40px 0px;}
75.99% {background-position: -40px 0px;}
76% {background-position: -4px 0px;}
77.99% {background-position: -4px 0px;}
78% {background-position: -40px 0px;}
79.99% {background-position: -40px 0px;}
80% {background-position: -4px 0px;}
81.99% {background-position: -4px 0px;}
82% {background-position: -40px 0px;}
83.99% {background-position: -40px 0px;}
84% {background-position: -4px 0px;}
85.99% {background-position: -4px 0px;}
86% {background-position: -40px 0px;}
87.99% {background-position: -40px 0px;}
88% {background-position: -4px 0px;}
89.99% {background-position: -4px 0px;}
90% {background-position: -40px 0px;}
91.99% {background-position: -40px 0px;}
92% {background-position: -4px 0px;}
93.99% {background-position: -4px 0px;}
94% {background-position: -40px 0px;}
95.99% {background-position: -40px 0px;}
96% {background-position: -4px 0px;}
97.99% {background-position: -4px 0px;}
98% {background-position: -40px 0px;}
99.99% {background-position: -40px 0px;}
100% {background-position: -40px 0px;}
}
@-moz-keyframes animate {
0% {background-position: -4px 0px;}
1.99% {background-position: -4px 0px;}
2% {background-position: -40px 0px;}
3.99% {background-position: -40px 0px;}
4% {background-position: -4px 0px;}
5.99% {background-position: -4px 0px;}
6% {background-position: -40px 0px;}
7.99% {background-position: -40px 0px;}
8% {background-position: -4px 0px;}
9.99% {background-position: -4px 0px;}
10% {background-position: -40px 0px;}
11.99% {background-position: -40px 0px;}
12% {background-position: -4px 0px;}
13.99% {background-position: -4px 0px;}
14% {background-position: -40px 0px;}
15.99% {background-position: -40px 0px;}
16% {background-position: -4px 0px;}
17.99% {background-position: -4px 0px;}
18% {background-position: -40px 0px;}
19.99% {background-position: -40px 0px;}
20% {background-position: -4px 0px;}
21.99% {background-position: -4px 0px;}
22% {background-position: -40px 0px;}
23.99% {background-position: -40px 0px;}
24% {background-position: -4px 0px;}
25.99% {background-position: -4px 0px;}
26% {background-position: -40px 0px;}
27.99% {background-position: -40px 0px;}
28% {background-position: -4px 0px;}
29.99% {background-position: -4px 0px;}
30% {background-position: -40px 0px;}
31.99% {background-position: -40px 0px;}
32% {background-position: -4px 0px;}
33.99% {background-position: -4px 0px;}
34% {background-position: -40px 0px;}
35.99% {background-position: -40px 0px;}
36% {background-position: -4px 0px;}
37.99% {background-position: -4px 0px;}
38% {background-position: -40px 0px;}
39.99% {background-position: -40px 0px;}
40% {background-position: -4px 0px;}
41.99% {background-position: -4px 0px;}
42% {background-position: -40px 0px;}
43.99% {background-position: -40px 0px;}
44% {background-position: -4px 0px;}
45.99% {background-position: -4px 0px;}
46% {background-position: -40px 0px;}
47.99% {background-position: -40px 0px;}
48% {background-position: -4px 0px;}
49.99% {background-position: -4px 0px;}
50% {background-position: -40px 0px;}
51.99% {background-position: -40px 0px;}
52% {background-position: -4px 0px;}
53.99% {background-position: -4px 0px;}
54% {background-position: -40px 0px;}
55.99% {background-position: -40px 0px;}
56% {background-position: -4px 0px;}
57.99% {background-position: -4px 0px;}
58% {background-position: -40px 0px;}
59.99% {background-position: -40px 0px;}
60% {background-position: -4px 0px;}
61.99% {background-position: -4px 0px;}
62% {background-position: -40px 0px;}
63.99% {background-position: -40px 0px;}
64% {background-position: -4px 0px;}
65.99% {background-position: -4px 0px;}
66% {background-position: -40px 0px;}
67.99% {background-position: -40px 0px;}
68% {background-position: -4px 0px;}
69.99% {background-position: -4px 0px;}
70% {background-position: -40px 0px;}
71.99% {background-position: -40px 0px;}
72% {background-position: -4px 0px;}
73.99% {background-position: -4px 0px;}
74% {background-position: -40px 0px;}
75.99% {background-position: -40px 0px;}
76% {background-position: -4px 0px;}
77.99% {background-position: -4px 0px;}
78% {background-position: -40px 0px;}
79.99% {background-position: -40px 0px;}
80% {background-position: -4px 0px;}
81.99% {background-position: -4px 0px;}
82% {background-position: -40px 0px;}
83.99% {background-position: -40px 0px;}
84% {background-position: -4px 0px;}
85.99% {background-position: -4px 0px;}
86% {background-position: -40px 0px;}
87.99% {background-position: -40px 0px;}
88% {background-position: -4px 0px;}
89.99% {background-position: -4px 0px;}
90% {background-position: -40px 0px;}
91.99% {background-position: -40px 0px;}
92% {background-position: -4px 0px;}
93.99% {background-position: -4px 0px;}
94% {background-position: -40px 0px;}
95.99% {background-position: -40px 0px;}
96% {background-position: -4px 0px;}
97.99% {background-position: -4px 0px;}
98% {background-position: -40px 0px;}
99.99% {background-position: -40px 0px;}
100% {background-position: -40px 0px;}
}
/*=========================/
typewriting animations
/=========================*/
ul#scoreAdvanceTable {text-align: left;}
ul#scoreAdvanceTable li {margin-left: 19%; line-height: 2em;}
ul#scoreAdvanceTable li span {display: inline-block; height: 32px; width: 48px; text-align: center;}
p.typewrite {display: inline-block; white-space: nowrap; overflow: hidden; margin-left: 1em;}
.startTypewrite {width: 0;}
ul#scoreAdvanceTable li span#span_score_mystery {width: 88px; width: 48px;}
ul#scoreAdvanceTable li span#span_score_30 {width: 32px;}
ul#scoreAdvanceTable li span#span_score_20 {width: 44px;}
ul#scoreAdvanceTable li span#span_score_10 {width: 48px;}
< / style >
< script type = "text/javascript" >
2013-02-25 13:38:19 +00:00
/* #############################################################################################################
Matteo Piazza, 2013
matteopiazza.org/blog
This work is licensed under a Creative Commons Attribution - Share Alike 3.0 - Unported license (CC BY-SA 3.0).
The text of the license is available at http://creativecommons.org/licenses/by-sa/3.0/
############################################################################################################# */
2012-03-27 17:57:59 +00:00
var microSpaceInvaders = function() {
// element selector
var $ = function(selector, el) {
if (!el) {el = document;}
return el.querySelector(selector);
};
2013-02-03 22:20:21 +00:00
2013-02-11 18:24:24 +00:00
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
2013-02-12 18:29:57 +00:00
for(var x = 0; x < vendors.length & & ! window . requestAnimationFrame ; + + x ) {
window.requestAnimationFrame = window[vendors[x]+'requestAnimationFrame'];
2013-02-11 18:24:24 +00:00
window.cancelAnimationFrame =
2013-02-12 18:29:57 +00:00
window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelrequestAnimationFrame'];
2013-02-11 18:24:24 +00:00
}
2013-02-12 18:29:57 +00:00
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
2013-02-11 18:24:24 +00:00
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
2012-03-27 17:57:59 +00:00
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// game objects
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
var container = $("#game");
var img, canvas, context, frameCounter, isGameOver;
//var spriteSheet = "si_sprite_sheet_bw.png";
var spriteSheet = "data:image/png;base64,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%3D";
var sprites = {
alien_1: { id: "alien_1",
width: 32,
height: 32,
tiles: [{x: 4, y: 4}, {x: 40, y: 4}]
},
alien_2: { id: "alien_2",
width: 44,
height: 32,
tiles: [{x: 4, y: 40}, {x: 56, y: 40}]
},
alien_3: { id: "alien_3",
width: 48,
height: 32,
tiles: [{x: 4, y: 76}, {x: 60, y: 76}]
},
flyingSaucer: { id: "flyingSaucer",
width: 48,
height: 28,
tiles: [{x: 4, y: 128}]
},
cannon: { id: "cannon",
width: 52,
height: 32,
tiles: [{x: 4, y: 160}, {x: 60, y: 160}]
},
cannonBullet: { id: "cannonBullet",
width: 4,
height: 28,
tiles: [{x: 4, y: 200}]
},
alienBullet: { id: "alienBullet",
width: 12,
height: 28,
tiles: [{x: 12, y: 200}]
},
alienExplosion: { id: "alienExplosion",
width: 52,
height: 28,
tiles: [{x: 32, y: 200}]
},
saucerExplosion: { id: "saucerExplosion",
width: 52,
height: 28,
tiles: [{x: 88, y: 200}]
},
bunkerFull: { id: "bunkerFull",
width: 24,
height: 24,
tiles: [{x: 4, y: 232}, {x: 32, y: 232}, {x: 60, y: 232}, {x: 88, y: 232}]
},
bunkerTopLeft: { id: "bunkerTopLeft",
width: 24,
height: 24,
tiles: [{x: 4, y: 260}, {x: 32, y: 260}, {x: 60, y: 260}, {x: 88, y: 260}]
},
bunkerTopRight: { id: "bunkerTopRight",
width: 24,
height: 24,
tiles: [{x: 4, y: 288}, {x: 32, y: 288}, {x: 60, y: 288}, {x: 88, y: 288}]
},
bunkerBottomLeft: { id: "bunkerBottomLeft",
width: 24,
height: 24,
tiles: [{x: 4, y: 316}, {x: 32, y: 316}, {x: 60, y: 316}, {x: 88, y: 316}]
},
bunkerBottomRight: { id: "bunkerBottomRight",
width: 24,
height: 24,
tiles: [{x: 4, y: 344}, {x: 32, y: 344}, {x: 60, y: 344}, {x: 88, y: 344}]
}
};
var sprite = function(e) {
this.typeOf = "sprite";
this.sprite = e.sprite;
this.tileId = 0;
this.x = e.x;
this.y = e.y;
};
var ship = function(e) {
this.base = new sprite(e);
for (var i in this.base) {this[i] = this.base[i];}
this.typeOf = "ship";
this.points = e.points;
this.state = "alive";
this.collide = function(o) {
return (this.state == "alive" & & o.y >= this.y & & o.y < = this.y+this.sprite.height & & o.x >= this.x & & o.x < = this.x+this.sprite.width);
};
this.touchBorder = function() {
return ( this.x+aliens.alienSquareWidth+5 >= canvas.width || (this.x-(aliens.alienSquareWidth-this.sprite.width)/2 < = 0) );
};
this.setSprite = function(sprite) {
this.sprite = sprite;
};
this.setState = function(state) {
this.state = state;
};
};
var flyingSaucerShip = function(e) {
this.base = new ship(e);
for (var i in this.base)
{
if (i == "base") continue;
this[i] = this.base[i];
}
this.typeOf = "flyingSaucerShip";
};
var bullet = function(e) {
this.base = new sprite(e);
for (var i in this.base) {this[i] = this.base[i];}
this.typeOf = "bullet";
this.collide = function(o) {
return (
// aliens
(this.y+this.sprite.height >= o.y & & this.y < = o.y & & this.x+this.sprite.width >= o.x & & this.x < = o.x+o.sprite.width)
||
// human
(o.state == "alive" & & this.y < = o.y+o.sprite.height & & this.y >= o.y & & this.x+this.sprite.width >= o.x & & this.x < = o.x+o.sprite.width)
);
};
};
var bunker = function(e) {
this.typeOf = "bunker";
this.x = e.x;
this.y = e.y;
this.blocks = [ new sprite({sprite: sprites.bunkerTopLeft, x: this.x, y: this.y}),
new sprite({sprite: sprites.bunkerFull, x: this.x + sprites.bunkerFull.width, y: this.y}),
new sprite({sprite: sprites.bunkerFull, x: this.x + 2*sprites.bunkerFull.width, y: this.y}),
new sprite({sprite: sprites.bunkerTopRight, x: this.x + 3*sprites.bunkerFull.width, y: this.y}),
new sprite({sprite: sprites.bunkerFull, x: this.x, y: this.y + sprites.bunkerFull.height}),
new sprite({sprite: sprites.bunkerBottomRight, x: this.x + sprites.bunkerFull.width, y: this.y + sprites.bunkerFull.height}),
new sprite({sprite: sprites.bunkerBottomLeft, x: this.x + 2*sprites.bunkerFull.width, y: this.y + sprites.bunkerFull.height}),
new sprite({sprite: sprites.bunkerFull, x: this.x + 3*sprites.bunkerFull.width, y: this.y + sprites.bunkerFull.height}),
new sprite({sprite: sprites.bunkerFull, x: this.x, y: this.y + 2*sprites.bunkerFull.height}),
new sprite({sprite: sprites.bunkerFull, x: this.x + 3*sprites.bunkerFull.width, y: this.y + 2*sprites.bunkerFull.height}) ];
};
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// sky background
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
var sky = {
stars: null,
starsLayer: 3,
k_star_number: 30,
init: function() {
this.stars = [];
for (var n = 0; n < this.starsLayer ; n + + ) {
this.stars.push([]);
// star params: [0]: x, [1]: y, [2]: random starRadius, [3]: random star transparency, [4]: max star radius, [5]: speed
for (var i = 0; i < this.k_star_number ; i + + ) {
this.stars[n].push([Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * (n*2+3), Math.random()/2, (n*2+3), (n*2+3)-2]);
}
}
},
drawStars: function() {
var star, x, y, radius, alpha, maxRadius, speed;
for (var n = 0, nl = this.stars.length; n < nl ; n + + ) {
for (var i = 0, il = this.stars[n].length; i < il ; i + + ) {
star = this.stars[n][i];
x = star[0];
y = star[1];
radius = star[2];
alpha = star[3];
maxRadius = star[4];
speed = star[5];
// draw
context.fillStyle = 'rgba(255, 255, 255, ' + alpha + ')';
context.beginPath();
context.arc(x, y, radius, 0, Math.PI * 2, true);
context.closePath();
context.fill();
// draw 8 bit
// square style stars
/*
context.fillStyle = 'rgba(255, 255, 255, ' + alpha + ')';
context.fillRect(x, y, radius, radius);
*/
/*
// plus style stars
context.fillStyle = 'rgba(255, 255, 255, ' + alpha + ')';
context.lineWidth = 1;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x+radius, y);
context.lineTo(x+radius, y+radius);
context.lineTo(x+(2*radius), y+radius);
context.lineTo(x+(2*radius), y+(2*radius));
context.lineTo(x+radius, y+(2*radius));
context.lineTo(x+radius, y+(3*radius));
context.lineTo(x, y+(3*radius));
context.lineTo(x, y+(2*radius));
context.lineTo(x-radius, y+(2*radius));
context.lineTo(x-radius, y+radius);
context.lineTo(x, y+radius);
context.lineTo(x, y);
context.fill();
*/
// recreate if out of screen
if (x - radius < 0 ) {
star[0] = canvas.width - radius;
star[2] = Math.random() * maxRadius;
star[1] = Math.random() * canvas.height;
star[3] = Math.random() / 2;
}
// move
else {
star[0] -= speed;
}
}
}
}
};
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// aliens
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
var aliens = {
flyingSaucer: null,
alienBullet: null,
flyingSaucerTimer: null,
arrAliens: null,
alienBorderCollision: null,
alienBulletSpeed: 10,
nAlienRows: 5,
nAliensByRow: 11,
alienSquareWidth: 60,
alienSquareHeight: 40,
alienSpeedX: 10,
alienSpeedY: 40,
alienInitialY: 160,
flyingSaucerInitialY: 100,
flyingSaucerSpeed: 4,
init: function() {
this.alienBorderCollision = true;
this.flyingSaucer = null;
this.flyingSaucerTimer = new Date().getTime();
this.alienBullet = null;
this.arrAliens = [];
this.alienSpeedX = 10;
var sprite, points;
for (var r = 0; r < this.nAlienRows ; r + + )
{
if (r == 0)
{
sprite = sprites.alien_1;
points = 30;
}
if (r > 0 & & r < 3 )
{
sprite = sprites.alien_2;
points = 20;
}
if (r > 2 & & r < 5 )
{
sprite = sprites.alien_3;
points = 10;
}
for (var a = 0; a < this.nAliensByRow ; a + + )
{
this.arrAliens.push(new ship({ sprite: sprite,
x: (a*this.alienSquareWidth)+(this.alienSquareWidth-sprite.width)/2,
y: r*this.alienSquareHeight+this.alienInitialY,
points: points }));
}
}
},
updateAliens: function() {
var a;
var upd = {x: 0, y: 0, tile: 1};
var moveX = this.alienSpeedX;
var moveY = 0;
for (var i = 0; i < this.arrAliens.length ; i + + )
{
a = this.arrAliens[i];
if (a.state == "striked")
{
this.arrAliens.splice(i, 1);
i = 0;
continue;
}
// check alien collision with canvas borders
if (a.touchBorder() & & !this.alienBorderCollision)
{
this.alienBorderCollision = !this.alienBorderCollision;
moveX = 0;
moveY = this.alienSpeedY;
this.alienSpeedX *= -1;
break;
}
// check alien collision with player
if (a.y+a.sprite.height >= human.cannon.y)
isGameOver = true;
}
if (moveX != 0)
this.alienBorderCollision = !this.alienBorderCollision;
upd.x = moveX;
upd.y = moveY;
return upd;
},
drawAlienShips: function(upd) {
var a;
for (var i = 0; i < this.arrAliens.length ; i + + )
{
a = this.arrAliens[i];
if (a.state == "striked")
a.setSprite(sprites.alienExplosion);
a.x += upd.x;
a.y += upd.y;
a.tileId += upd.tile;
if (a.tileId >= a.sprite.tiles.length)
a.tileId = 0;
context.drawImage(img, a.sprite.tiles[a.tileId].x, a.sprite.tiles[a.tileId].y, a.sprite.width, a.sprite.height, a.x, a.y, a.sprite.width, a.sprite.height);
}
},
updateFlyingSaucer: function() {
return (this.flyingSaucer & & this.flyingSaucer.state == "striked");
},
drawFlyingSaucer: function(fs) {
var time = new Date().getTime();
if (!this.flyingSaucer)
{
if (time - this.flyingSaucerTimer >= 10000)
{
this.flyingSaucer = new flyingSaucerShip({ sprite: sprites.flyingSaucer,
x: canvas.width,
y: this.flyingSaucerInitialY,
points: 100 });
}
}
else
{
if (this.flyingSaucer.state == "striked")
this.flyingSaucer.sprite = sprites.saucerExplosion;
if (this.flyingSaucer.x < = -sprites.flyingSaucer.width || fs)
{
this.flyingSaucer = null;
this.flyingSaucerTimer = time;
}
else
{
this.flyingSaucer.x -= this.flyingSaucerSpeed;
context.drawImage(img, this.flyingSaucer.sprite.tiles[0].x, this.flyingSaucer.sprite.tiles[0].y, this.flyingSaucer.sprite.width, this.flyingSaucer.sprite.height, this.flyingSaucer.x, this.flyingSaucer.y, this.flyingSaucer.sprite.width, this.flyingSaucer.sprite.height);
}
}
},
drawAliens: function() {
var fs;
var al = {x: 0, y: 0, tile: 0};
if (frameCounter == 33)
{
al = this.updateAliens();
fs = this.updateFlyingSaucer();
frameCounter = 0;
}
else
{
frameCounter++;
}
this.drawAlienShips(al);
this.drawFlyingSaucer(fs);
},
drawAlienBullet: function() {
if (this.alienBullet) {
var bulletOnScreen = true;
this.alienBullet.y += this.alienBulletSpeed;
// alienBullet outside borders
if (this.alienBullet.y >= canvas.height)
bulletOnScreen = false;
// alienBullet hits cannon
if (bulletOnScreen) {
if (this.alienBullet.collide(human.cannon))
{
lives.nLives--;
if (lives.nLives == 0) human.cannon.tileId++;
bulletOnScreen = false;
}
}
// alienBullet hits bunker
if (bulletOnScreen) {
var bk, block;
for (var i = 0, j = bunkers.arrBunker.length; i < j ; i + + )
{
bk = bunkers.arrBunker[i];
for (var k = 0, x = bk.blocks.length; k < x ; k + + )
{
block = bk.blocks[k];
if (this.alienBullet.collide(block))
{
block.tileId++;
if (block.tileId >= block.sprite.tiles.length)
{
bk.blocks.splice(k, 1);
}
bulletOnScreen = false;
break;
}
}
}
}
// alienBullet on bottom line
if (bulletOnScreen & & this.alienBullet.y+this.alienBullet.sprite.height >= lives.lineY) {
var strInterrupts = lives.lineInterrupts.join();
if (strInterrupts.indexOf(this.alienBullet.x.toString()) < 0 )
lives.lineInterrupts.push(this.alienBullet.x);
}
// draw or remove bullet
if (bulletOnScreen)
context.drawImage(img, this.alienBullet.sprite.tiles[0].x, this.alienBullet.sprite.tiles[0].y, this.alienBullet.sprite.width, this.alienBullet.sprite.height, this.alienBullet.x, this.alienBullet.y, this.alienBullet.sprite.width, this.alienBullet.sprite.height);
else
this.alienBullet = null;
}
else {
var alienIdx = Math.floor((this.arrAliens.length+1)*Math.random());
if (this.arrAliens[alienIdx]) {
this.alienBullet = new bullet({ sprite: sprites.alienBullet,
x: this.arrAliens[alienIdx].x+this.arrAliens[alienIdx].sprite.width/2,
y: this.arrAliens[alienIdx].y });
}
}
}
};
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// cannon
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
var human = {
cannon: null,
cannonBullet: null,
moveCannon: null,
cannonFire: null,
cannonSpeed: 8,
cannonBulletSpeed: 10,
score: 0,
credit: 0,
init: function() {
this.moveCannon = "N";
this.cannonFire = false;
this.cannonBullet = null;
this.score = 0;
this.cannon = new ship({ sprite: sprites.cannon,
x: (canvas.width/2) - (sprites.cannon.width/2),
y: (canvas.height-55) - sprites.cannon.height });
},
drawCannon: function() {
if (!isGameOver) {
switch (this.moveCannon)
{
case "L":
if (this.cannon.x >= 0)
this.cannon.x += -this.cannonSpeed;
break;
case "R":
if (this.cannon.x < = canvas.width-this.cannon.sprite.width)
this.cannon.x += this.cannonSpeed;
break;
default:
this.cannon.x += 0;
break;
}
}
// update for window resizing
this.cannon.y = (canvas.height-55) - sprites.cannon.height;
context.drawImage(img, this.cannon.sprite.tiles[this.cannon.tileId].x, this.cannon.sprite.tiles[this.cannon.tileId].y, this.cannon.sprite.width, this.cannon.sprite.height, this.cannon.x, this.cannon.y, this.cannon.sprite.width, this.cannon.sprite.height);
},
drawCannonBullet: function() {
// cannonBullet exists
if (this.cannonBullet) {
var bulletOnScreen = true;
this.cannonBullet.y -= this.cannonBulletSpeed;
// collision with canvas upper border
if (this.cannonBullet.y < = 0)
bulletOnScreen = false;
// collision with alien bullet
if (bulletOnScreen) {
if (aliens.alienBullet & & this.cannonBullet.collide(aliens.alienBullet)) {
aliens.alienBullet = null;
bulletOnScreen = false;
}
}
// collision with flyingSaucer
if (bulletOnScreen) {
if (aliens.flyingSaucer & & this.cannonBullet.collide(aliens.flyingSaucer))
{
aliens.flyingSaucer.setState("striked");
this.score += aliens.flyingSaucer.points;
bulletOnScreen = false;
}
}
// collision with alien
if (bulletOnScreen) {
var a;
for (var i = 0; i < aliens.arrAliens.length ; i + + )
{
a = aliens.arrAliens[i];
if (this.cannonBullet.collide(a))
{
a.setState("striked");
this.score += a.points;
bulletOnScreen = false;
break;
}
}
}
// collision with bunker
if (bulletOnScreen) {
var bk, block;
for (var i = 0, j = bunkers.arrBunker.length; i < j ; i + + )
{
bk = bunkers.arrBunker[i];
for (var k = 0, x = bk.blocks.length; k < x ; k + + )
{
block = bk.blocks[k];
if (this.cannonBullet.collide(block))
{
block.tileId++;
if (block.tileId >= block.sprite.tiles.length)
{
bk.blocks.splice(k, 1);
}
bulletOnScreen = false;
break;
}
}
}
}
// draw or remove bullet
if (bulletOnScreen)
context.drawImage(img, this.cannonBullet.sprite.tiles[0].x, this.cannonBullet.sprite.tiles[0].y, this.cannonBullet.sprite.width, this.cannonBullet.sprite.height, this.cannonBullet.x, this.cannonBullet.y, this.cannonBullet.sprite.width, this.cannonBullet.sprite.height);
else
this.cannonBullet = null;
}
// create bullet
else if (this.cannonFire)
{
if (!isGameOver) {
this.cannonBullet = new bullet({ sprite: sprites.cannonBullet,
x: this.cannon.x+(this.cannon.sprite.width/2)-sprites.cannonBullet.width/2,
y: this.cannon.y });
}
}
}
};
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// bunkers
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
var bunkers = {
arrBunker: null,
nBunkers: 4,
init: function() {
this.arrBunker = [];
var x, y;
for (var i = 0; i < this.nBunkers ; i + + )
{
x = (canvas.width / (this.nBunkers*2)) - ((sprites.bunkerFull.width*4) / 2) + (i * (canvas.width / this.nBunkers));
y = (canvas.height-180);
this.arrBunker.push(new bunker({x: x, y: y}));
}
},
drawBunkers: function() {
var bk, block;
for (var i = 0, b = this.arrBunker.length; i < b ; i + + )
{
bk = this.arrBunker[i];
for (var j = 0, t = bk.blocks.length; j < t ; j + + )
{
block = bk.blocks[j];
context.drawImage(img, block.sprite.tiles[block.tileId].x, block.sprite.tiles[block.tileId].y, block.sprite.width, block.sprite.height, block.x, block.y, block.sprite.width, block.sprite.height);
}
}
}
};
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// lives
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
var lives = {
nLives: 3,
lineY: 0,
lineHeight: 5,
lineInterrupts: [],
lineImageData: null,
init: function() {
this.nLives = 3;
this.lineInterrupts = [];
this.lineImageData = null;
this.lineY = canvas.height-50;
var txtArea = new textHelper.textArea({ cls: "field livesField",
childs: [textHelper.writeText({cls: "text livesText", id: "livesPlayer1", text: this.nLives})],
appendTo: container,
left: "0px",
bottom: "0px" });
},
sortInterrupts: function(a, b) {
return a - b;
},
drawLine: function() {
// draw a line (with interrupts due to alienBullet fall)
context.fillStyle = "rgba(0,255,0,255)";
var rectX = 0,
rectWidth = canvas.width;
lives.lineInterrupts.sort(this.sortInterrupts);
for(var i = 0; i < this.lineInterrupts.length ; i + + ) {
rectWidth = this.lineInterrupts[i] - rectX;
context.fillRect(rectX, this.lineY, rectWidth, this.lineHeight);
rectX = this.lineInterrupts[i]+sprites.alienBullet.width;
}
rectWidth = canvas.width - rectX;
context.fillRect(rectX, this.lineY, rectWidth, this.lineHeight);
},
drawLives: function() {
this.drawLine();
var x, y;
for (var i = 0; i < this.nLives ; i + + ) {
y = (canvas.height-sprites.cannon.height-7);
x = (sprites.cannon.width+i*(sprites.cannon.width*1.5));
c = new ship({ sprite: sprites.cannon,
x: (canvas.width/2)-(sprites.cannon.width/2),
y: (canvas.height-sprites.cannon.height) });
context.drawImage(img, sprites.cannon.tiles[0].x, sprites.cannon.tiles[0].y, sprites.cannon.width, sprites.cannon.height, x, y, sprites.cannon.width, sprites.cannon.height);
}
if (!isGameOver)
textHelper.updateText("#livesPlayer1", this.nLives);
}
};
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// text on screen
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
var textHelper = {
textArea: function(o) {
this.div = document.createElement("div");
if (o.id) this.div.id = o.id;
this.div.className = o.cls;
this.childs = o.childs;
this.appendTo = o.appendTo;
if (o.width) this.div.style.width = o.width + "px";
this.appendTo.appendChild(this.div);
if (this.childs) {
for (var i=0, j=this.childs.length; i < j ; i + + )
this.div.appendChild(this.childs[i]);
}
this.set = function(o) {
var left, top, right, bottom;
if (o.position)
{
switch(o.position)
{
case "centerBottom":
left = (canvas.width/2 - this.div.offsetWidth/2) + "px";
bottom = 0 + "px";
break;
case "centerHV":
left = (canvas.width/2 - this.div.offsetWidth/2) + "px";
top = (canvas.height/2 - this.div.offsetHeight/2) + "px";
break;
case "centerH":
left = (canvas.width/2 - this.div.offsetWidth/2) + "px";
break;
}
}
if (o.left) left = o.left;
if (o.top) top = o.top;
if (o.bottom) bottom = o.bottom;
if (o.right) right = o.right;
this.div.style.left = left;
this.div.style.top = top;
this.div.style.bottom = bottom;
this.div.style.right = right;
};
this.set(o);
return this;
},
removeTextArea: function(id) {
container.removeChild(document.querySelector("#" + id));
},
writeText: function(o) {
var p = document.createElement("p");
p.className = o.cls;
if (o.id) p.id = o.id;
if (o.text) p.appendChild(document.createTextNode(o.text));
if (o.innerhtml) p.innerHTML = o.innerhtml;
if (o.onclick) {p.onclick = o.onclick;}
return p;
},
// instruction sequence is important in Firefox
typewrite: function(str) {
var p, nChar, d = 2;
var arrP = document.querySelectorAll(str);
for (var i = 0; i < arrP.length ; i + + )
{
p = arrP[i];
p.className += " typewrite ";
nChar = p.textContent.length;
// set @keyframes using CSSOM: "from" and "to" are derived from < p > offsetWidth
var style = document.documentElement.appendChild(document.createElement("style"));
var rule = p.id + "_typing {from {width: 0} to {width: " + nChar + "em}}"; // setting width this way avoids problems due to @fontface loading delay
if (CSSRule.KEYFRAMES_RULE) { // W3C
style.sheet.insertRule("@keyframes " + rule, 0);
}
else if (CSSRule.WEBKIT_KEYFRAMES_RULE) { // WebKit
style.sheet.insertRule("@-webkit-keyframes " + rule, 0);
}
else if (CSSRule.MOZ_KEYFRAMES_RULE) { // WebKit
style.sheet.insertRule("@-moz-keyframes " + rule, 0);
}
///
// set .end class for animation end
//rule = "{width: " + nChar + "em;}";
rule = "{width: auto;}";
style.sheet.insertRule("#" + p.id + ".end" + rule, 0);
///
// set animation: steps # is derived from text length inside < p >
p.style["animation"] = p.id + "_typing " + d + "s steps(" + nChar + ", end) " + i * d + "s";
p.style["-webkit-animation"] = p.id + "_typing " + d + "s steps(" + nChar + ", end) " + i * d + "s";
p.style["MozAnimation"] = p.id + "_typing " + d + "s steps(" + nChar + ", end) " + i * d + "s";
p.style["-ms-animation"] = p.id + "_typing " + d + "s steps(" + nChar + ", end) " + i * d + "s";
///
p.className += " startTypewrite ";
p.addEventListener("animationend", this.typewrite_cb, false);
p.addEventListener("webkitAnimationEnd", this.typewrite_cb, false);
}
return d*arrP.length;
},
typewrite_cb: function(e) {
e.target.className += " end ";
},
changeTextColor: function(id, color) {
var p = $(id);
if (!color) {
var blocks = "0123456789ABCDEF";
color = "#";
for (var i = 0; i < 3 ; i + + ) {
color += blocks.substr(Math.random()*blocks.length, 1);
}
}
if (p) p.style.color = color;
},
updateText: function(id, val, pad) {
var txt = $(id);
txt.innerHTML = (pad == null) ? val : textHelper.pad(val, 4, '0', 'L');
},
removeText: function(id) {
var txt = $(id);
if (txt) txt.parentNode.removeChild(txt);
},
pad: function(str, len, chr, side) {
var add = '';
str = str.toString();
while (add.length < (len-str.length)) {
add += chr;
}
switch (side)
{
case "L":
str = add + str;
break;
case "R":
str = str + add;
break;
}
return str;
}
};
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// game
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
var keyPressed = function(e) {
if(!e) e = window.event;
switch (e.keyCode)
{
case 37: // left arrow
human.moveCannon = (e.type == "keyup") ? "N" : "L";
break;
case 39: // right arrow
human.moveCannon = (e.type == "keyup") ? "N" : "R";
break;
case 32: // spacebar
human.cannonFire = (e.type == "keyup") ? false : true;
break;
case 67: // 'c'
if (e.type == "keydown")
insertCoin();
break;
}
};
var gameLoop = function() {
context.clearRect(0, 0, canvas.width, canvas.height);
sky.drawStars();
human.drawCannon();
aliens.drawAliens();
bunkers.drawBunkers();
human.drawCannonBullet();
aliens.drawAlienBullet();
textHelper.updateText("#scorePlayer1", human.score, true);
lives.drawLives();
if (isGameOver) {
screens.gameOver();
}
if (lives.nLives == 0)
isGameOver = true;
};
var setCanvas = function() {
canvas = document.createElement("canvas");
container.appendChild(canvas);
context = canvas.getContext('2d');
};
var resizeCanvas = function() {
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;
context.fillRect(0, 0, canvas.width, canvas.height);
};
var insertCoin = function() {
human.credit++;
textHelper.updateText("#credit", textHelper.pad(human.credit, 2, '0', 'L'));
textHelper.removeText("#insertCoins");
};
var checkcredit = function(e) {
// stop event propagation on "play" button
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
if (human.credit > 0) {
human.credit--;
screens.game();
}
};
var _game = function() {
clearScreen();
img = new Image();
img.onload = function() {
// init game objects
setCanvas();
resizeCanvas();
frameCounter = 0;
isGameOver = false;
sky.init();
lives.init();
human.init();
aliens.init();
bunkers.init();
// score
var txtArea = new textHelper.textArea({ cls: "field scoreField",
childs: [ textHelper.writeText({cls: "text scoreText", text: "score < 1 > "}),
textHelper.writeText({cls: "text scoreText", id: "scorePlayer1", text: textHelper.pad(human.score, 4, '0', 'L')}) ],
appendTo: container,
left: "0px",
top: "0px" });
// credit
txtArea = new textHelper.textArea({ cls: "field",
childs: [textHelper.writeText({cls: "text creditText", innerhtml: "credit < span id = 'credit' > " + textHelper.pad(human.credit, 2, '0', 'L') + "< / span > "})],
appendTo: container,
right: "0px",
bottom: "0px" });
// animation loop
var gameWrapper = $("#game");
2013-02-12 21:00:21 +00:00
//var startTime = window.performance.now() || window.mozAnimationStartTime || +new Date;
//startTime = (window.performance & & window.performance.now) ? performance.now() : (window.mozAnimationStartTime ? window.mozAnimationStartTime : +new Date());
//requestAnimationFrame(loop, gameWrapper);
(function loop(timestamp) {
2012-03-27 17:57:59 +00:00
// time since last draw
2013-02-12 21:00:21 +00:00
//var drawStart = (timestamp || +new Date);
//var diff = drawStart - startTime;
2012-03-27 17:57:59 +00:00
// update frame rate
2013-02-12 21:00:21 +00:00
//if (diff > 1000/33)
//{
2012-03-27 17:57:59 +00:00
// animation
gameLoop();
// reset startTime
2013-02-12 21:00:21 +00:00
//startTime = drawStart;
//}
2012-03-27 17:57:59 +00:00
2013-02-11 18:24:24 +00:00
requestAnimationFrame(loop, gameWrapper);
2013-02-12 21:00:21 +00:00
}());
2012-03-27 17:57:59 +00:00
}
img.src = spriteSheet;
}
var _intro = function() {
clearScreen();
setCanvas();
resizeCanvas();
sky.init();
// game menu
var txtArea = new textHelper.textArea({ cls: "field",
childs: [ textHelper.writeText({id: "play", cls: "text clickText menuText", innerhtml: "pla< span id = 'span_container' > < span id = 'span_y' > y< / span > < span id = 'span_img' > < / span > < / span > ", onclick: checkcredit}),
textHelper.writeText({id: "SpaceInvadersText", cls: "text", text: "space invaders"}),
textHelper.writeText({id: "insertCoins", cls: "text clickText insertCoins", text: "insert coin(s)", onclick: insertCoin}) ],
appendTo: container,
width: canvas.width,
position: "centerH",
top: "20%" });
// score advance
txtArea = new textHelper.textArea({ cls: "field scoreAdvanceTableField",
childs: [ textHelper.writeText({cls: "text scoreAdvanceText", text: "*score advance table*"}),
textHelper.writeText({innerhtml: "< ul id = 'scoreAdvanceTable' > " +
"< li > < span > < span id = 'span_score_mystery' > < / span > < / span > < p id = 'score_mystery' class = 'text scoreAdvanceText' > = ? mystery< / p > < / li > " +
"< li > < span > < span id = 'span_score_30' > < / span > < / span > < p id = 'score_30' class = 'text scoreAdvanceText' > = 30 points< / p > < / li > " +
"< li > < span > < span id = 'span_score_20' > < / span > < / span > < p id = 'score_20' class = 'text scoreAdvanceText' > = 20 points< / p > < / li > " +
"< li > < span > < span id = 'span_score_10' > < / span > < / span > < p id = 'score_10' class = 'text scoreAdvanceText' > = 10 points< / p > < / li > " +
"< / ul > "}) ],
appendTo: container,
width: 450,
position: "centerH",
top: "50%" });
// credit
txtArea = new textHelper.textArea({ cls: "field",
childs: [textHelper.writeText({cls: "text creditText", innerhtml: "credit < span id = 'credit' > " + textHelper.pad(human.credit, 2, '0', 'L') + "< / span > "})],
appendTo: container,
right: "0px",
bottom: "0px" });
// copyright
txtArea = new textHelper.textArea({ cls: "field",
childs: [ textHelper.writeText({id: "instructionsLink", cls: "text clickText smallText", text: "instructions", onclick: screens.instructions}),
2012-03-28 18:02:28 +00:00
textHelper.writeText({id: "copyright", cls: "text smallText", innerhtml: "[ < a href = 'http://www.matteopiazza.org/blog/post/2012/03/28/Space-Invaders-HTML5-porting.aspx' > JH5 binary arts< / a > ]"}) ],
2012-03-27 17:57:59 +00:00
appendTo: container,
width: 400,
position: "centerBottom" });
// typewriting animation
// set score advance table background images
$("#span_score_mystery").style["background"] = "url('" + spriteSheet + "') -4px -122px no-repeat";
$("#span_score_30").style["background"] = "url('" + spriteSheet + "') -4px -4px no-repeat";
$("#span_score_20").style["background"] = "url('" + spriteSheet + "') -4px -40px no-repeat";
$("#span_score_10").style["background"] = "url('" + spriteSheet + "') -4px -76px no-repeat";
// start typewriting
var t = textHelper.typewrite("#score_mystery, #score_10, #score_20, #score_30");
/// "play" and alien intro animation
var setEventListener = function(id, ev, cb) {
var el = $(id);
switch (ev)
{
case "transitionend":
el.addEventListener("transitionend", cb, false); // firefox
el.addEventListener("webkitTransitionEnd", cb, false); // chrome/safari
el.addEventListener("oTransitionEnd", cb, false); // opera
el.addEventListener("MSTransitionEnd", cb, false); // IE
break;
}
};
var animatePlay = function() {
var span_container = $("#span_container");
var span_img = $("#span_img");
var span_y = $("#span_y");
var rightEdge = container.offsetWidth/2 + aliens.alienSquareWidth + "px";
span_img.style["background-image"] = "url('" + spriteSheet + "')";
// animation callback
var animate = function(e) {
switch (e.target.id) {
case "span_img":
if (e.propertyName == "left")
span_container.style["left"] = rightEdge;
break;
case "span_container":
if ($("#span_y.end") != null)
span_img.className = "end";
if ($("#span_img.end") != null)
span_img.style["opacity"] = "0";
span_container.style["left"] = "0";
span_y.className = "end";
break;
}
};
// eventhandlers
setEventListener("#span_img", "transitionend", animate);
setEventListener("#span_container", "transitionend", animate);
// start animation
span_img.style["left"] = rightEdge; // set image position on window right border
setTimeout(function(){
span_img.className = "slide"; // set transition/animation properties
span_img.style["left"] = "0"; // start transition
}, t);
}();
///
// animation loop
var gameWrapper = $("#game");
2013-02-12 21:00:21 +00:00
//var startTime = window.performance.now() || window.mozAnimationStartTime || +new Date;
//startTime = (window.performance & & window.performance.now) ? performance.now() : (window.mozAnimationStartTime ? window.mozAnimationStartTime : +new Date());
//requestAnimationFrame(loop, gameWrapper);
(function loop(timestamp) {
2013-02-11 18:24:24 +00:00
2012-03-27 17:57:59 +00:00
// time since last draw
2013-02-12 21:00:21 +00:00
//var drawStart = (timestamp || +new Date);
//var diff = drawStart - startTime;
2012-03-27 17:57:59 +00:00
// update frame rate
2013-02-12 21:00:21 +00:00
//if (diff > 1000/30)
//{
2012-03-27 17:57:59 +00:00
// animation
context.clearRect(0, 0, canvas.width, canvas.height);
sky.drawStars();
textHelper.changeTextColor("#insertCoins");
if (human.credit > 0) textHelper.changeTextColor("#play");
// reset startTime
2013-02-12 21:00:21 +00:00
//startTime = drawStart;
//}
2012-03-27 17:57:59 +00:00
2013-02-11 18:24:24 +00:00
requestAnimationFrame(loop, gameWrapper);
2013-02-12 21:00:21 +00:00
}());
2012-03-27 17:57:59 +00:00
};
var _instructions = function() {
// game over menu
var txtArea = new textHelper.textArea({ id: "divInstructions",
cls: "field instructionsFieldFrame",
childs: [ textHelper.writeText({cls: "text instructionsText", innerhtml: "< ol > " +
"< li > press 'c' or click 'insert coin(s)'< / li > " +
"< li > press 'play' to start game< / li > " +
"< li > left/right keys to move cannon< / li > " +
"< li > 'spacebar' to shot< / li > " +
"< / ol > "}),
textHelper.writeText({cls: "text clickText menuText", text: "close", onclick: function(){textHelper.removeTextArea("divInstructions");}}) ],
appendTo: container,
position: "centerHV" });
};
var _gameOver = function() {
// game over menu
if (!$("#divGameOver")) {
var txtArea = new textHelper.textArea({ id: "divGameOver",
cls: "field menuFieldFrame",
childs: [ textHelper.writeText({cls: "text menuHeaderText", text: "game over"}),
textHelper.writeText({cls: "text clickText menuText", text: "play again", onclick: checkcredit}) ],
appendTo: container,
position: "centerHV" });
}
};
var clearScreen = function() {
while (container.hasChildNodes())
container.removeChild(container.lastChild);
};
var screens = {
intro: function() {
_intro();
},
instructions: function() {
_instructions();
},
game: function() {
_game();
},
gameOver: function() {
_gameOver();
}
};
var initGame = function() {
human.credit = 0;
screens.intro();
};
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// start game
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// event handlers
window.addEventListener("keydown", keyPressed, true);
window.addEventListener("keyup", keyPressed, true);
window.addEventListener("resize", resizeCanvas, true);
initGame();
};
document.onreadystatechange = function() {
if (document.readyState === "complete") {
microSpaceInvaders();
}
};
< / script >
< / head >
< body >
< div id = "game" > < / div >
< / body >
2013-02-03 22:15:36 +00:00
< / html >
