-
Notifications
You must be signed in to change notification settings - Fork 0
/
report.html
executable file
·897 lines (797 loc) · 39.9 KB
/
report.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB" xml:lang="en-GB">
<head>
<meta charset="UTF-8"/>
<meta content="application/xhtml+xml"/>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<title>My Game Boo-Chee-Q</title>
<link href="css3.css" rel="stylesheet" type="text/css" />
<script src="js.js" type="text/javascript"></script>
<link rel="shortcut icon" href="jets2.png" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="betterinnerhtml.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- -->
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "0f2a4bad-960d-4d9a-9899-0bd15a1ec6f7", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
</head>
<body class="body">
<header class="mainHeader">
<img src="logo.png" />
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li class="active" ><a href="report.html">Report</a></li>
<li><a href="game.html">Game</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="reportContent">
<div class="reportContentuseless">
<article class="topcontent">
<header>
<h2><a href="#" title="First post">Project Report (Client)</a></h2>
</header>
<footer>
<p class="post-info">This report is written by Ping Wang</p>
</footer>
<content>
This report explains the client project which includes a XHTML5 webpage and a XHTML5 game. <br/><br/>
I haven't done CSS and Javascript developing before and game developing as well. This is a great chance for me to learn these technologies.
In order to learn those new languages, I did not use any third party libraries and frameworks. All logics and styles were only managed by Javascript and CSS, and all codes were
developed by myself.<br/><br/>
This application was developed by Eclipse, Inscape and GIMP.<br/>
<div class="subtoc">
<p>Contents</p>
<ol>
<li><a href="#h-1">XHTML5 webpage (spent 16 hours)</a></li>
<ol>
<li><a href="#h-1-1">XHTML5</a></li>
<ol>
<li><a href="#h-1-1-a">Mobile Devices Consideration</a></li>
<li><a href="#h-1-1-b">Favicon</a></li>
<li><a href="#h-1-1-c">All Involved Tabs</a></li>
<li><a href="#h-1-1-d">HTML + CSS</a></li>
<li><a href="#h-1-1-e">IE9 Supported</a></li>
<li><a href="#h-1-1-f">Handling HTML Reserved Characters</a></li>
</ol>
<li><a href="#h-1-2">CSS3</a></li>
<ol>
<li><a href="#h-1-2-a">CSS Inheritance</a></li>
<li><a href="#h-1-2-b">Layout and Mobile Devices Consideration</a></li>
<li><a href="#h-1-2-c">Multi Styles for Links(for different status)</a></li>
<li><a href="#h-1-2-d">Units</a></li>
<li><a href="#h-1-2-e">Main CSS Styles</a></li>
</ol>
<li><a href="#h-1-3">Form</a></li>
<ol>
<li><a href="#h-1-3-a">HTML Form</a></li>
<li><a href="#h-1-3-b">Validation</a></li>
</ol>
<li><a href="#h-1-4">Video</a></li>
</ol>
<li><a href="#h-2">Game (spent 200 hours)</a></li>
<ol>
<li><a href="#h-2-1">Drawings</a></li>
<ol>
<li><a href="#h-2-1-a">Tutorials</a></li>
<li><a href="#h-2-1-b">Jet</a></li>
<li><a href="#h-2-1-c">Enemy jet</a></li>
<li><a href="#h-2-1-d">Bullet</a></li>
<li><a href="#h-2-1-e">Explosing</a></li>
<li><a href="#h-2-1-f">Background</a></li>
<li><a href="#h-2-1-g">Start Page</a></li>
<li><a href="#h-2-1-h">Sprite</a></li>
<li><a href="#h-2-1-i">Moving Background</a></li>
</ol>
<li><a href="#h-2-2">XHTML5</a></li>
<li><a href="#h-2-3">Javascript</a></li>
<ol>
<li><a href="#h-2-3-a">Mechanism</a></li>
<li><a href="#h-2-3-b">Touch Screen for Tablet</a></li>
<li><a href="#h-2-3-c">Social Network Sharing</a></li>
<li><a href="#h-2-3-d">Javascript Trick</a></li>
<ol>
<li><a href="#h-2-3-d-1">Event</a></li>
<li><a href="#h-2-3-d-2">Single Javascript Function</a></li>
<li><a href="#h-2-3-d-3">Innerhtml</a></li>
</ol>
<li><a href="#h-2-3-e">Object-Oriented Programming</a></li>
<li><a href="#h-2-3-f">Game Level</a></li>
<li><a href="#h-2-3-g">Jet Zpath Moving</a></li>
<li><a href="#h-2-3-h">Moving Background</a></li>
<li><a href="#h-2-3-i">Looping</a></li>
<li><a href="#h-2-3-j">Sprite</a></li>
<li><a href="#h-2-3-k">Mouse Event Handling</a></li>
<li><a href="#h-2-3-l">Memory Management</a></li>
<li><a href="#h-2-3-m">Auto Scale</a></li>
</ol>
</ol>
<li><a href="#h-3">Development Environment</a></li>
<li><a href="#h-4">Testing</a></li>
<li><a href="#h-5">SAFE Error Handling</a></li>
<li><a href="#h-6">Google Cloud</a></li>
</ol>
</div>
<h2><a name="h-1">1,</a> XHTML5 Webpage (spent 20 hours)</h2>
<h3><a name="h-1-1">1.1,</a> XHTML5</h3>
This XHTML5 section was developed by XHTML5 + CSS3. The main technology solutions were learnt from an online <a href="http://alturl.com/e5rfw">tutorial.</a>
Except XHTML5 basic functionalities,several features will be highlighted as below:
<h4><a name="h-1-1-a">1.1.1</a> Mobile Devices Consideration.</h4>
Mobile devices were supported by meta tag which was learnt from <a href="https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag">an online post</a>. Small screen was also considered, a mobile layout was also managed by CSS, which will be illustrated in the CSS section.
<h4><a name="h-1-1-b">1.1.2</a> Favicon.</h4>
Favicon is a browser sensitive feature. The solution of this project was learnt from http://en.wikipedia.org/wiki/Favicon.
Researching online, most posts mention that “.icon” image is recommended format. However, the ".icon" image generated by GIMP was not recognized. So this project used png format for the favicon.
<img src="1_html_0.png" class="reportImg"/>
<h4><a name="h-1-1-c">1.1.3</a> All Involved Tabs:</h4>
<li><header> was used for containing logo and navigation bar.</li>
<li><footer> was a footer of HTML section which was used for containing "Acknowledge".</li>
<li><nav> and <ul> were used to build the navigation bar.</li>
<li><articl> was the container for managing the main content of this project.</li>
<li><aside> was the container for sidebars which displayed beside the main contents.</li>
<li><pre> was a container which preserved both spaces and line breaks. Therefore, it was boradly used in report section for displaying source codes.</li>
<li><canvas> was used for developing game which will be introduced in the <a href="#h-2">game</a> section</li>
<li><form> elements was included in this project for building a HTML form.</li>
<li><img> tags were used for displaying snapshots in the report section.</li>
<li><h1>, <h2>, <h3>... and <a></li>
<h4><a name="h-1-1-d">1.1.4</a> HTML + CSS</h4>
All XHTML elements displayed on this webpage were created by HTML tags but the layout was managed by CSS.
<img src="1_html_1.png" class="reportImg"/>
<h4><a name="h-1-1-e">1.1.5</a> IE9 Support</h4>
For IE9's html5 supporting, a part of xml was added into XHTML file:
<pre class="code">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</pre>
<h4><a name="h-1-1-f">1.1.6</a> Handling HTML Reserved Characters</h4>
In this report, numbers of code segments were displayed. However, there were several HTML reserved characters in code segments.
To display them, <b>"<"</b> and <b>">"</b> were replaced by <b>&lt;</b> <b>&gt;</b>. Addtionally, to display "&gt;", it was wrote as "(and sign)amp;gt".
<h3><a name="h-1-2">1.2,</a> CSS3</h3>
CSS played a significant role in this project. It was used to add styles and control layouts. Several technology solutions will be highlighted in this report:<br />
<h4><a name="h-1-2-a">1.2.1</a> CSS Inheritance </h4>
CSS inheritance is commonly recognized as sub tags inheriting styles from parent tags (more <a href="http://dorward.me.uk/www/css/inheritance/">explanations</a>).
However, a CSS style inherited from another CSS style was expected in this project.
For example, corner radius styles were boardly used styles for all containers.
Without CSS inheritance, developers have to copy styles into other CSS sectors. But there will be a lot of copies in CSS files.
If a setting needs to be changed, that change needs
to be implemented into all places. Therefore, a CSS inheritance feature was needed.<br />
The CSS inheritance mechanism was expected to work as this:
<pre class="code">
.rounded_corners {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#header {
.rounded_corners; <span class="comment">/* header inherits rounded corners styles </span>
}
#footer {
.rounded_corners; <span class="comment">/* header inherits rounded corners styles </span>
}
</pre>
After research, there were three solutions: <br/>
<h5>Solution 1:</h5> Creating a base style and appling it to HTML tags. However, this was not a real inheritance solution.
<pre class="code">
<article class='content rounded_corners'>
</pre>
<h5>Solution 2:</h5> Overriding existing styles. Nevertheless, the base styles were only able to be shared to one sub CSS sector with the same name.
<pre class="code">
.topcontent {
border-radius : 5px;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
}
.topcontent {
background-color: #FFF;
}
</pre>
<h5>Solution 3:</h5> Firstly, coding CSS files and adding extendsion and inheritance. Subsequently, using preprocess application to process CSS files.
There were several preprocess applications: <a href="http://lesscss.org/"> less </a> and <a href="http://sass-lang.com/install"> sass </a>
<br/><br/>
After considering all solutions, this project did not adopt any of them. The final solution was to make copies.
<h4><a name="h-1-2-b">1.2.2</a> Layout and Mobile Devices Consideration</h4>
As this report mentioned above, CSS was used for controlling the layout of this project.
This project was designed for adapting different size of browsers, the following diagram shows the layout design (fluid layout):
<img src="1_css_0.png" class="reportImg"/>
The thinner layout was designed for smaller screen devices like mobiles.
"@media" was the mainly technology which was used for adapting to screen sizes. This tag offers an alternative CSS style settings if users' screen is smaller than a specific size.
Basing on this technology, this project was able to offer mobile styles controlling ability.
<pre class="code">
@media only screen and (max-width: 480px) and (min-width: 150px){ }
</pre>
All styles in @media will be activated when the screen smaller than 480px. All CSS were used for overriding the default styles.
For example, below styles were used for making navigations to display vertically. It only overrided partial CSS styles, but still keep other styles, such as coner radius.
<pre class="code">
@media only screen and (max-width: 480px) and (min-width: 150px){
.body{
width: 90%;
font-size:95%;
}
.mainHeader img{
width : 100%;
}
.mainHeader nav{
height:160px;
}
.mainHeader nav ul {
<span class="comment">/*height:100%;</span>
padding-left:0;
}
.mainHeader nav ul li{
width:100%;
text-align:center;
}
.mainHeader nav a:link,.mainHeader nav a:visited{
padding:10px 25px;
display:block;
}
}
</pre>
<img src="1_css_1.png" class="reportImg"/>
<h4><a name="h-1-2-c">1.2.3</a> Multi Styles for Links(for different status)</h4>
“a:link” for the style of a normal link, “a:visited” for a clicked link, “a:hover” for links mouse over. For example:
<pre class="code">
.mainHeader nav a:link,.mainHeader nav a:visited{
color:#FFF;
display: inline-block;
padding:10px 25px;
height: 20px;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited{
background-color:#CF5C3F;
text-shadow: none;
}
</pre>
<h4><a name="h-1-2-d">1.2.4</a>Units</h4>
Px is a commonly used units on web page design. Px depends on the screen's resolution, it provides good across platforms ability. But it is not recommended to be used, because the text does not scale when the visitor changes the default text size. "em" and percentage were widely used units in this project. 1em = 100% = current font size. By default, 1em equals to 16px. To avoid using px directly, “font-size : 87.5%;” was used to control the font size. If “font-size = 87.5%”, then 1em = 16px * 87.5%.
<h4><a name="h-1-2-e">1.2.5</a>Main CSS Styles:</h4>
<pre class="code">
background-color: #FFF; <span class="comment">/*background color</span>
border-radius : 5px; <span class="comment">/*border coner radius</span>
-moz-border-radius : 5px; <span class="comment">/* for firefox</span>
-webkit-border-radius : 5px; <span class="comment">/* for webkit</span>
padding : 3% 5%; <span class="comment">/* padding top=bottom</span>
margin-top : 2%;
</pre>
Above CSS styles were used to control styles of corner radius, margins and paddings.
To adapt to different browsers, corner radius were set by several settings for different browsers separately.<br />
Padding and margin were boardly used in this project for controlling the layout.
Padding was used to control the space from the boundary to inset contents.
Margin was use to control the space out of the boundary.
Margin and padding accept below settings:
<pre class="code">
margin:10px 5px 15px 20px;
<span class="comment">/*
top margin is 10px
right margin is 5px
bottom margin is 15px
left margin is 20px
</span>
margin:10px 5px 15px;
<span class="comment">/*
top margin is 10px
right and left margins are 5px
bottom margin is 15px
</span>
margin:10px 5px;
<span class="comment">/*
top and bottom margins are 10px
right and left margins are 5px
</span>
margin:10px;
<span class="comment">/*
all four margins are 10px
</span>
</pre>
<pre class="code">
padding-top:2em; <span class="comment">/*Specific top padding </span>
padding-left:2em; <span class="comment">/*Specific left padding </span>
padding-right:2em; <span class="comment">/*Specific right padding </span>
padding-bottom,:2em; <span class="comment">/*Specific bottom padding </span>
</pre>
Regarding Font, below are the global settings for text styles.
<pre class="code">
body{ <span class="comment">/*basic style</span>
color : #000305; <span class="comment">/*text colour</span>
font-size : 87.5%; <span class="comment">/* the base font is 14px</span> <span class="comment">/*relative units </span>
font-family: Arial,"Liberation Sans",sans-serif;
<span class="comment">/*Arial is a Windows font, therefore i supply different fonts.</span>
line-height: 1.5;
text-align: left;
background-color:#CCCCCC;
}
</pre>
<h3><a name="h-1-3">1.3,</a> Form</h3>
<h3><a name="h-1-3-a">1.3.1,</a>HTML Form</h3>
This project has a HTML form. This form's layout was managed by a table. Date fields' name located in the first columns and all HTML input tags
located in the second columns.
<img src="1_html_2.png" class="reportImg"/>
<h3><a name="h-1-3-b">1.3.2,</a>Validation</h3>
<a href="http://parsleyjs.org/">Parsleyjs</a> was adopted in this project. Parsleyjs is a very simple Javascript library,
To add this ability into a HTML web page, developers can simply add "data-parsley-validate" into "form" tags.<br/>
"required" is used for configurating a compulsion field.<br />
"type="email"" is used for setting a email field, this field will be validated as an email address.<br />
<pre class="code">
<form id="demo-form" data-parsley-validate>
<input type="password" name="password" class="input" required/>
</pre>
<h3><a name="h-1-4">1.3,</a>Video</h3>
This project also embeded a video for demostrating video capbility.<br />
HTML5 offers video features by:
<pre class="code">
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
</pre>
New browsers support HTML5 video element, but old browsers like IE8 does not support it.
Alternatively, Flash player is a commonly used video solution.
Recognizing browsers' supporting and offering Flash for playing was a panic issue for developers.
However, Youtube has already solved that. Developers can upload videos onto Youtube, and embed the vedio into their websit by:
<pre class="code">
<iframe class="video" src="//www.youtube.com/embed/DhLNO3XlbJs" frameborder="0" allowfullscreen></iframe>
</pre>
Youtube will use the proper video player to play the video. Addtionaly, Youtube offers a <a href="http://www.youtube.com/html5">web page</a> to users for setting video players.
<img src="1_html_3.png" class="reportImg"/>
Once users set "Requet HTML5 player" all videos from Youtube will be played by HTML5 video player.
<h2><a name="h-2">2,</a> Game (spent 200 hours)</h2>
The basic knowledges were learnt from <a href="http://alturl.com/8dwmc"> a Youtube video</a>.
In the following sections, this report will illustrate in which aspects the project enhanced the game after being learnt from the video.
<h3><a name="h-2-1">2.1,</a> Drawings</h3>
<h4><a name="h-2-1-a">2.1.1</a> Tutorials</h4>
Learning how to draw cartoon from a <a href="http://alturl.com/rzyp6">tutorialst</a><br/>
Learning to use inkscape from a <a href="http://inkscape.org/doc/advanced/tutorial-advanced.html">tutorialst</a><br/>
<h4><a name="h-2-1-b">2.1.2</a> Jet</h4>
<h5>Firstly, drawing sketch by inkscape:</h5>
<img src="3_pic_1.png" class="reportImg"/>
<h5>Secondly, filling colours by GIMP</h5>
<img src="3_pic_2.png" class="reportImg"/>
<h4><a name="h-2-1-c">2.1.3</a> Enemy Jet</h4>
<img src="3_pic_3.png" class="reportImg"/>
Antialias were learnt from a <a href="http://docs.gimp.org/en/plug-in-antialias.html">tutorialst</a>
<h4><a name="h-2-1-d">2.1.4</a> Bullet</h4>
First, creating a blank layer and drawing blend colour.
Then, using "Fuzzy select tool" to select the bullet in bullet layer.
Subsequently, selecting blend layer in the layer view and using "ctrl + c" to copy.
Finally, pasting into a new file which has transparent background.
<img src="3_pic_4.png" class="reportImg"/>
<h4><a name="h-2-1-e">2.1.5</a> Explosing</h4>
<img src="3_pic_5.png" class="reportImg"/>
<h4><a name="h-2-1-f">2.1.6</a> Background</h4>
Regarding the drawing background, the drawing was learnt from a <a href="http://www.how-to-draw-cartoons-online.com/cartoon-desert.html">tutorials</a>.<br />
<br />
One thing worths to mention was that deleting segment of lines in Inkscape was difficult. It was solved by drawing "brush strokes" and “cut path”
<img src="3_pic_6.png" class="reportImg"/>
Colours were filled by GIMP. Sunshine was created by "smudge tool". Airbrush was used to create shadow and "pencil tool" was used to change the drawing in details.
<img src="3_pic_7.png" class="reportImg"/>
<h4><a name="h-2-1-g">2.1.7</a> Start Page</h4>
<img src="3_pic_8.png" class="reportImg"/>
<img src="3_pic_9.png" class="reportImg"/>
<img src="3_pic_10.png" class="reportImg"/>
<h4><a name="h-2-1-h">2.1.8</a> Sprite</h4>
<img src="3_pic_11.png" class="reportImg"/>
<h4><a name="h-2-1-i">2.1.9</a> Moving Background</h4>
<img src="3_pic_12.png" class="reportImg"/>
<h3><a name="h-2-2">2.2,</a> XHTML5</h3>
HTML5 canvas was used for game animation. But in the HTML file, the only code is:
<pre class="code">
<div id="inner" class="inner">
</div>
</pre>
The Html5 canvas was not here, it was in the Javascript file (will be explained in Javascript section).
The purpose of the design was to make the game easily to be shared.
By this solution, users can embed this game into other web pages by copying this "inner" HTML tag and the game.js.
<h3><a name="h-2-3">2.3,</a> Javascript</h3>
<h4><a name="h-2-3-a">2.3.1</a> Mechanism</h4>
The mechanism of this html5 game was "canvas drawing" + "looping". Regarding the looping principle, it will be introduced in details in later sections.<br />
About the canvas drawing, five canvases were created for drawing different characters, such as the jet, enemies, the background, bullets, explosions and the game score.
They were all transparent and overlaping with each others.<br /><br />
This is the code of canvas drawing:
<pre class="code">
anJetCtx.drawImage(bgImage,this.srcX,this.srcY,this.imageWidth,this.imageheight,this.targetX,this.targetY,this.objWidth,this.objHeight);
</pre>
This function was used to draw a segment of a image into a canvas. The segment was specified by srcX and srcY.
Hence, all animataion characters could be put into a single image.
There were several Javascript classes designed for each characters and signed with different srcX and srcY.
This design matched the Object-Oriented programming (more about Object-Oriented programming will be introduced in later section).
<h4><a name="h-2-3-b">2.3.2</a> Touch Screen for Tablet</h4>
To support touch screen devices, HTML and Javascript were both modified:<br />
Adding the "viewport" into meta (viewport was introducted in earler chapter) and adding touching event listeners (events will be explained in the event section below).
All those solutions were learnt from an online <a href="http://www.onlywebpro.com/2012/01/28/game-development-mouse-and-touch-event-detection/">post</a>.
<h4><a name="h-2-3-c">2.3.3</a> Social Network Sharing</h4>
<img src="4_game_2.png" class="reportImg"/>
To make this project more popular, social network connectivity was added into this project.
However, it did not work in the SAFE. But it worked well in local environment and Google Cloud (http://1.boocheeq.appspot.com/game.html).
<img src="4_game_3.png" class="reportImg"/>
All relative information was learnt from :<br/>
http://www.practicalecommerce.com/articles/3817-Top-10-Social-Sharing-Buttons-for-Your-Website<br/>
http://www.sharethis.com/<br/>
<h4><a name="h-2-3-d">2.3.4</a> Javascript Trick</h4>
<h4><a name="h-2-3-d-1">2.3.4.1</a> Event</h4>
This project adopted adaptable event solution:
<pre class="code">
if (addEventListener) addEventListener("load",allMyCode,false);
else attachEvent("onload", allMyCode);
<span class="comment">// window.addEventListener("load",loadFn,false);</span>
</pre>
<h4><a name="h-2-3-d-2">2.3.4.2</a> Single Javascript Function</h4>
All codes were located in "allMyCode" function, the advatage was if variables or functions' name were conflict with other Javascripts "moudles".
However, that would disable the ability of checking variables in Google chrome.
<h4><a name="h-2-3-d-3">2.3.4.3</a> Innerhtml</h4>
As this report mentioned above, to make this game easliy to be shared, all htmls were located in Javascript section.
Innterhtml was used to add HTML tags into main HTML file. However, it was not a safe solution. Therefore "<a href="// http://www.optimalworks.net/resources/betterinnerhtml/">BetterInnerHTML</a>" was adopted.
<pre class="code">
BetterInnerHTML(document.getElementById("inner"),
'<canvas id="canvasBg" class="canvasBg" width="800" height="500"></canvas>'+
'<canvas id="canvasJet" class="canvasJet" width="800" height="500"></canvas>' +
'<canvas id="canvasEnemy" class="canvasEnemy" width="800" height="500"></canvas>' +
'<canvas id="canvasText" class="canvasText" width="800" height="500"></canvas>' +
'<canvas id="canvasBullet" class="canvasBullet" width="800" height="500"></canvas>'
);
</pre>
<h4><a name="h-2-3-e">2.3.5</a> Object-Oriented Programming</h4>
By default, Javascript is not a Object-Oriented language, but it can be implimented by somehow. There are several different ways to achive that.
To practice Javascript Object-Oriented programming (OOP), this project used two ways to do OOP in Javascript.
<pre class="code">
<span class="comment">//---------prototype based</span>
function Enemy() {
this.gameWidth = canvasBg.width;
this.gameHeight = canvasBg.height;
}
Enemy.prototype.draw = function(){
}
function createANewBullet(){
var item;
if(Object){
item = Object.create(Bullet);
}else{
item = new Bullet();
}
item.init();
return item;
}
</pre>
And
<pre class="code">
var Explosion ={
srcX : 0,
srcY : 0,
init : explosionInit,
draw : explosionDraw
};
function explosionInit(){
}
</pre>
Both solutions were adobted in this project. but the second soution was highly recommended. <br/><br/>
The differences of these two solutions are: the function Enemy() in the first solution is a constructor, developers can do computing here.
All codes in this function will not be invoked until an object of this class is created.
In the second solution, there is no constructor for the class, the first paragraph is a class definition, all code here will be excuted
when the Javascript file is loaded. Therefore,logic code should not be put here. An init() function can be created for doing initialized computing.<br/><br/>
To an instance of those classes,"Object" was used to do this. However, the "Ojbect" is a new feature. So, to be compatible with elder browsers,
the solution of this project was:
<pre class="code">
function createANewBullet(){
var item;
if(Object){
item = Object.create(Bullet);
}else{
item = new Bullet();
}
item.init();
return item;
}
</pre>
<h4><a name="h-2-3-f">2.3.6</a> Game Level</h4>
The game level system relied on the game score system. Meanwhile it affected the game difficulty.
<pre class="code">
function updateGameLevel(){
gameLavel = jet1.score/100;
if(gameLavel > 0){
spawnAmount = gameLavel;
}
}
</pre>
The game level will be increased when the game score increases 100.<br />
Gamelevel raising will cause the game to spawn more enemies. Meanwhile, Enemies' moving path will be more complex -- zpath.
<pre class="code">
if(gameLavel > 3){
if(this.ifZpathX){
this.score = this.score_zpath;
this.zPathX();
}
}
</pre>
<h4><a name="h-2-3-g">2.3.7</a> Jet Zpath Moving</h4>
Zpath moving was used to make enemies moving zigzag.
The game will randomly spawn enemies from the right side of the game stage. The spawning position was random.
The zpath moving range was also random. (for more details please see the comments below)
<pre class="code">
Enemy.prototype.zPathX = function(){
if(!this.zStepY){
this.zStepY = zStepY;
if(returnNChance(50)){ <span class="comment">// randomly generate the init direction</span>
this.zStepY = 0 - this.zStepY;
}
}
if(!this.zstepYRangeA){ <span class="comment">//generate a random moving range. (y-y/2 -- y + y/2)</span>
if(this.targetY < this.objHeight *3){
<span class="comment">//to avoid shaking. if the plane locates at the top of screen, then make the range from the top of screen to the botton.</span>
this.zstepYRangeA = this.flyingYRangeA;
this.zstepYRangeZ = this.flyingYRangeZ;
}else{
this.zstepYRangeA = this.targetY - Math.floor(this.targetY/2); <span class="comment">// the moving range is from currentY - currentY to currentY + currentY/2</span>
this.zstepYRangeZ = this.targetY + Math.floor(this.targetY/2);
if(this.zstepYRangeA < 0){
this.zstepYRangeA = 0;
}
if(this.zstepYRangeZ > this.flyingYRangeZ){
this.zstepYRangeZ = this.flyingYRangeZ;
}
}
}
this.targetY = this.targetY - this.zStepY;
if(this.targetY < this.zstepYRangeA || this.targetY >this.zstepYRangeZ ){ <span class="comment">//zigzag in the moving range. //change direction.</span>
this.zStepY = 0 - this.zStepY;
}
};
function returnNChance(n){ <span class="comment">//my random function.</span>
if(n > 100){
alert("returnNChance cannot bigger than 100");
}
return Math.floor(Math.random() *100) < n;
}
</pre>
<h4><a name="h-2-3-h">2.3.8</a> Moving Background</h4>
This game offered a constantly moving background by looping the background image.
Two copies of background images were moving simultaneously one after another.
<pre class="code">
var bgDrawX1 = 0; <span class="comment">//the first copy located at the left boundary,</span>
var bgDrawX2 = bgWidth; <span class="comment">// the second copy just located at the rear of the first image</span>
function drawDynamicBg(){
bgDrawX1 -= 5; <span class="comment">//moving left</span>
bgDrawX2 -= 5;
if (bgDrawX1 <= -bgWidth) { <span class="comment">//if it moved out of the boundary.</span>
bgDrawX1 = bgWidth;
} else if (bgDrawX2 <= -bgWidth) { <span class="comment">//if it moved out of the boundary.</span>
bgDrawX2 = bgWidth;
}
realDrawGameBg(bgImage);
}
function realDrawGameBg(bgImagex){
var bgImage = bgImagex;
var srcX = 0;
var srcY = 0;
var targetX = 0;
var targetY = 0;
var gameWidth = canvasBg.width;
var gameHeight = canvasBg.height;
var imageWidth = bgWidth;
var imageheight = 500;
canBgCtx.clearRect(0, 0, gameWidth, gameHeight);
canBgCtx.drawImage(bgImage,srcX,srcY,imageWidth,imageheight,bgDrawX1,targetY,imageWidth,gameHeight);
canBgCtx.drawImage(bgImage,srcX,srcY,imageWidth,imageheight,bgDrawX2,targetY,imageWidth,gameHeight);
}
</pre>
<h4><a name="h-2-3-i">2.3.9</a> Looping</h4>
There were two looping solutions: <br />
Animationframe:
<pre class="code">
var requestAnimFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame || <span class="comment">// for webkit</span>
window.mozRequestAnimationFrame || <span class="comment">// for firefox</span>
window.msRequestAnimationFrame || <span class="comment">// for ie</span>
window.oRequestAnimationFrame; <span class="comment">// for opera</span>
function loop() {
requestAnimFrame(loop);
}
</pre>
Interval:
<pre class="code">
function startShooting(){
cleanBulletInterval();
bulletInterval = setInterval(function(){shootxxx()},bulletFps);
}
function cleanBulletInterval(){
clearInterval(bulletInterval);
}
</pre>
Both of them were implemented in this project, but the first solution was recommended.
Because the first solution was more efficent, it folllowed the broswer's animation frame.
<h4><a name="h-2-3-j">2.3.10</a> Sprite</h4>
All pictures were integrated into one sprite picture.
The main purpose of this mergining was to reduce the network transactions and lower the network loading error risk.
Meanwhile, the whole program was waiting for assets loading.
It was hard to monitor all pictures loading progreses. One picture was much easier to handle.
<h4><a name="h-2-3-k">2.3.11</a> Mouse Event Handling</h4>
There were several mouse event handlers of canvas in this project. The aims of these handlers were:
"click to start game", "drag for moving jet", "touch for moving jet" and "key down for moving jet".
<pre class="code">
touchCanvas.addEventListener("mousedown",mouseDown, false);
touchCanvas.addEventListener("mousemove",mouseXY, false);
touchCanvas.addEventListener("touchstart", touchDown, false);
touchCanvas.addEventListener("touchmove", touchXY, true);
touchCanvas.addEventListener("touchend", touchUp, false);
function mouseXY(e) { <span class="comment">//handler</span>
e.preventDefault();
touchX = e.pageX - touchCanvas.offsetLeft;
touchY = e.pageY - touchCanvas.offsetTop;
processPos();
}
function processPos() {<span class="comment">// control jet's position</span>
if(touchIsDown ){
if(!touchLockingJet){
var left = jet1.targetX;
var right = jet1.imageWidth + jet1.targetX;
var top = jet1.targetY;
var bottom = jet1.imageheight + jet1.targetY;
if(left <= touchX && touchX <= right && top <= touchY && touchY <= bottom){
console.log("touchLockingJet");
touchLockingJet = 1;
jet1TouchedX = touchX - left;
jet1TouchedY = touchY - top;
}
}
}else{
touchLockingJet = 0;
}
}
</pre>
e.preventDefault(); was used for blocking the default event handler. For example, "touchmove" would only be able to move the jet on the canvas, but the system handler to scroll the web page was blocked.<br/>
processPos function was used to adjust jet location according to touchX and touchY.
<h4><a name="h-2-3-l">2.3.12</a> Memory Management</h4>
As a shotting game, enemies and bullets were infinite.
The memory issue was a big challenge for this project.
This project adopted two memory management solutions:<br />
<h5>Object disposing (remove enemies from enemies list):</h5>
<pre class="code">
function disposeEnimy (enimy){
enemies.splice(enemies.indexOf(enimy),1);
totalEnemies--;
}
</pre>
Once the enemy jets moved out of the game stage, it would be removed from enemy list,
the memory of this enemy would be released automatically by the browser.
<h5>Object recycling </h5>
<pre class="code">
if(bullet.targetY > bullet.gameWidth){
bullet.recycle();
}
function bulletRecycle(){
this.targetY = -20;
}
</pre>
If bullets moved out of the game boundary, they would be recycled.
The recycled bullet would be moved to a waiting area. When a new bullet was fired, a bullet from waiting area would be reused.
<h4><a name="h-2-3-m">2.3.13</a> Auto Scale</h4>
This game was designed for auto scaling to fit different screen sizes.
<pre class="code">
.canvasBg{
height: 80%;
width: 80%;
display:block;
background:#CCCCCC;
margin: 10px auto 0px; <span class="comment">/*for margin</span>
min-width: 400px;
min-height: 250px;
}
.inner{
max-width: auto; <span class="comment">/*with maxWidth and maxHeight,</span>
max-height: auto;
<span class="comment">/*background: red;</span>
}
.canvasJet,.canvasEnemy,.canvasBullet,.canvasText{
height: 80%;
width: 80%;
display:block;
margin: -500px auto 0px; <span class="comment">/*for margin</span>
}
</pre>
Height=80% and width=80% of ".canvasJet" were designed to make the game automatically fit browser's size. The background canvas worked well.
However, it was not able to control the margin of canvasJet. the canvasJet should display just over this background canvas to draw jet.
So the auto scale functionality was failed. Instead of auto scaling, the margin was hard coded. it would be fixed in the further project.<br />
The width and height were hard coded in the HTML. It should be in the CSS sheet, but it did not work as expected.
<pre class="code">
<canvas id="canvasBullet" class="canvasBullet" width="800" height="500"></canvas>
</pre>
<h2><a name="h-3">3,</a>Development Environment</h2>
This project offers mobile ability. To test this project in mobile devices, it was uploaded into the cloud.
Codenvy is a cloud based IDE which supports HTML and Javascript development.
Meanwhile, Codenvy supports web based IDE. Developers can do developing by browsers anytime anywhere.
Additionally, GitHub can synchronize the source code between local developement enviroment and online IDE.
<img src="3_pic_13.png" class="reportImg"/>
<h2><a name="h-4">4,</a>Testing</h2>
This project was tested by IE6, Firefox, Safari, Chrome and Opera. Because there are several new CSS features such as coner radius. They are
not supported by IE6 but the layout and content can work as normal. <br /><br />
Regarding the Html5 canvas, old browsers do not supprt it, like IE6. A notification will display on the web page if Html5 canvas is not supprted.
There are several solutions for checking HTHML5 canvas supporting:
<pre class="code">
<canvas>
Your browser does not support the HTML5 canvas tag.
</canvas>
</pre>
Above solution is the easiest way to check HTML5 canvas ability. Nevertheless, this project adopted a challenging method -- checking by Javascript:
<pre class="code">
var canvasEl = document.createElement('canvas'); <span class="comment">//create the canvas object</span>
if(!canvasEl.getContext) <span class="comment">//if the method is not supported, i.e canvas is not supported</span>
{
document.write("HTML5 Canvas Not Supported By Your Browser");
return;
}
</pre>
Or
<pre class="code">
if (Modernizr.canvas) {
<span class="comment">// let's draw some shapes!</span>
} else {
<span class="comment">// no native canvas support available :(</span>
}
</pre>
However, above solutions were failed the testing in IE6. The Javascript was collapsed. Alternatively, the solution of this project was adding a Label tag
to notice users that the current brower does not support Html5 canvas. If it supports Html5 canvas, the Label tag will be removed.
<pre class="code">
<label id="html5checker_my"> Dear user, your browser does not support html5, please use Chrome for this game. Thanks!</label>
function html5checking(){
var test_canvas = document.createElement("canvas"); <span class="comment">//try and create sample canvas element</span>
var canvascheck=(test_canvas.getContext)? true : false; <span class="comment">//check if object supports getContext() method, a method of the canvas element</span>
if(canvascheck){
document.getElementById('html5checker_my').style.display='none';
}else{
alert("Dear user, your browser does not support html5, please use Chrome for this game. Thanks!");
}
}
</pre>
One thing was worth noting, this code segement used Javascript to control CSS style.<br/>
Testing on IE6 for XHTML section: (Lost "border-radius" style, because it is a new CSS3 feature. But the web page can display without problems.)
<img src="5_test_ie_1.png" class="reportImg"/>
Testing on IE6 for the game section: (IE6 does not support HTML5 canvas. The application showed proper notification)
<img src="5_test_ie_2.png" class="reportImg"/>
IE 8 for the XHTML section:
<img src="5_test_ie_3.png" class="reportImg"/>
IE 9 for the XHTML section:
<img src="5_test_ie_4.png" class="reportImg"/>
IE 9 for the game section:
<img src="5_test_ie_6.png" class="reportImg"/>
Testing on Opera, Chrome, Firefox, Safari.
<img src="5_test_1.png" class="reportImg"/>
Mobile devices.
<img src="5_test_2.png" class="reportImg"/>
Opera had issues with Html5 canvas, so it failed on game testing.
<h2><a name="h-5">5,</a>SAFE Error Handling</h2>
<img src="6_safe_1.png" class="reportImg"/>
As above snapshots show, SAFE does not support "=" in URL. A url <a href="http://www.shorturl.com/">redirect service</a> was adopted in this projct to make a short url without illegal characters.
<pre class="code">
<input required/>
</pre>
The attribute "required" was coded in HTML style. In XHTML, attribute minimization is forbidden. It was fixed by:
<pre class="code">
<input required="required"/>
</pre>
<h2><a name="h-6">6,</a>Google Cloud</h2>
This project was also synchronized onto Google Cloud which can be accessed by : http://boocheeq.appspot.com/
<img src="7_cloud_1.png" class="reportImg"/>
</content>
</article>
</div>
</div>
<footer class="mainFooter">
<p>
Acknowledge:
http://www.optimalworks.net/
</p>
</footer>
</body>
</html>