├── .gitattributes
├── .gitignore
├── README.md
├── assets
├── images
│ ├── screenshot-01.jpg
│ ├── screenshot-02.jpg
│ └── screenshot-03.jpg
└── sfx
│ ├── alarm.mp3
│ ├── alien.mp3
│ ├── alien_drone.mp3
│ ├── explosion.mp3
│ ├── gun.mp3
│ ├── music.mp3
│ └── ship_drone.mp3
├── gulpfile.js
├── index.html
├── index.src.html
├── package.json
├── scripts
├── alien.js
├── collisionDetector.js
├── controller.js
├── display.js
├── game.js
├── level.js
├── music.js
├── noise.js
├── sfx.js
├── ship.js
├── shot.js
├── track.js
└── visualizer.js
├── styles
├── alien.less
├── app.css
├── app.less
├── background.less
├── game.less
├── ship.less
├── shot.less
├── track.less
├── vars.less
└── visualizer.less
└── vendor
└── prefixfree.min.js
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
4 | # Custom for Visual Studio
5 | *.cs diff=csharp
6 | *.sln merge=union
7 | *.csproj merge=union
8 | *.vbproj merge=union
9 | *.fsproj merge=union
10 | *.dbproj merge=union
11 |
12 | # Standard to msysgit
13 | *.doc diff=astextplain
14 | *.DOC diff=astextplain
15 | *.docx diff=astextplain
16 | *.DOCX diff=astextplain
17 | *.dot diff=astextplain
18 | *.DOT diff=astextplain
19 | *.pdf diff=astextplain
20 | *.PDF diff=astextplain
21 | *.rtf diff=astextplain
22 | *.RTF diff=astextplain
23 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules
3 | dist
4 | google-analytics.html
5 | soundcloud-id.js
6 |
7 |
8 | # Windows image file caches
9 | Thumbs.db
10 | ehthumbs.db
11 |
12 | # Folder config file
13 | Desktop.ini
14 |
15 | # Recycle Bin used on file shares
16 | $RECYCLE.BIN/
17 |
18 | # Windows Installer files
19 | *.cab
20 | *.msi
21 | *.msm
22 | *.msp
23 |
24 | # =========================
25 | # Operating System Files
26 | # =========================
27 |
28 | # OSX
29 | # =========================
30 |
31 | .DS_Store
32 | .AppleDouble
33 | .LSOverride
34 |
35 | # Icon must end with two \r
36 | Icon
37 |
38 |
39 | # Thumbnails
40 | ._*
41 |
42 | # Files that might appear on external disk
43 | .Spotlight-V100
44 | .Trashes
45 |
46 | # Directories potentially created on remote AFP share
47 | .AppleDB
48 | .AppleDesktop
49 | Network Trash Folder
50 | Temporary Items
51 | .apdisk
52 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # CSS Space Shooter
2 |
3 | 
4 |
5 | ## [Play The Game](https://www.michaelbromley.co.uk/experiments/css-space-shooter/)
6 |
7 | This is an experiment I made to investigate the capabilities of CSS 3D transforms.
8 | Having played about with this technology a little (see [this](https://www.michaelbromley.co.uk/experiments/css-3d-butterfly/) or [this](http://www.michaelbromley.co.uk/horizonal/demo/),
9 | and having seen some very impressive demos ([CSS FPS](http://www.keithclark.co.uk/labs/css-fps/), [CSS X-Wing](http://codepen.io/juliangarnier/details/hzDAF),
10 | I wanted to explore the idea of making a simple 3D game with only DOM and CSS.
11 |
12 | ## Everything in CSS? Cool!
13 |
14 | [CSS transforms](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms) allow us to position and rotate DOM elements in 3D space. The big advantage of this over, say, using canvas or webGL is that we do not need to
15 | worry about any of the complex maths involved in projecting a 3D object onto the screen. The browser's rendering engine (with the help of your GPU) will take care of all
16 | that. You just need to specify the x, y, z coordinates as well as the rotation along any axis. This makes it really simple to map your JavaScript objects onto the
17 | screen, by just keeping track of these simple coordinate and rotation values.
18 |
19 | Having [previously played with pseudo-3D in canvas](https://www.michaelbromley.co.uk/experiments/soundcloud-vis/#muse/undisclosed-desires), I have some idea
20 | of the massive amount of calculation involved in plotting all the lines and vertices of each
21 | object manually. In this regard, the simple, declarative nature of CSS allows some really powerful 3D effects with astonishingly little code.
22 |
23 | ## ...or not so cool.
24 |
25 | That convenience comes at a cost, however. For one, in CSS it is really really hard to create any shape other than a rectangle or an ellipse. Triangles, for example, are
26 | only possible through [dirty hacks with the border property](http://davidwalsh.name/css-triangles).
27 |
28 | Secondly, performance. Despite hardware acceleration for these 3D transforms, I quickly ran into performance issues when scaling up the number of objects
29 | interacting on screen simultaneously. Certain CSS operations are also *very* expensive, such as transitioning box-shadow values or gradient backgrounds.
30 |
31 | I'm sure my code can be optimized and this performance ceiling can be raised considerably. However, I wouldn't recommend using CSS and DOM for a serious 3D game.
32 |
33 | ## Browser Compatibility
34 |
35 | * Right now this works properly in the latest version of Chrome.
36 | * In my tests with Firefox it is very jerky and then usually grinds to a complete halt after a minute or so.
37 | * Internet Explorer has a couple of fatal issues - it does not yet support a key CSS property - [`transform-style: preserve3d`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style#Browser_compatibility) -
38 | which is essential to this method of building up 3D objects and 3D scenes which all share the same perspective. Additionally, IE does not currently support the
39 | Web Audio API, which I use for the sound effects and music. The game currently won't even load for this latter reason.
40 | * I've not tested in any other browsers, but feedback is welcome.
41 |
42 | ## Credits
43 |
44 | ### Inspiration and implementation details:
45 |
46 | * [Keith Clark](http://www.keithclark.co.uk/) - seriously, check out his stuff. It's amazing. Used his advice on positioning the DOM elements in the center of the viewport and moving them only
47 | with transforms, which works well.
48 | * html5Rocks - Some really helpful tutorials [here](http://www.html5rocks.com/en/tutorials/webaudio/games/) and [here](http://www.html5rocks.com/en/tutorials/webaudio/intro/)
49 | on how to use the Web Audio API.
50 | * Dive Into HTML5 [article on the localStorage API](http://diveintohtml5.info/storage.html), which I use to store high scores.
51 |
52 | ### Sound effects
53 |
54 | I got all my sounds effects from https://www.freesound.org.
55 |
56 | * gun: https://www.freesound.org/people/afirlam/sounds/236939/
57 | * explosion: https://www.freesound.org/people/plamdi1/sounds/95058/
58 | * alien noise: https://www.freesound.org/people/mensageirocs/sounds/234442/
59 | * alien drone: https://www.freesound.org/people/klankbeeld/sounds/243702/
60 | * 1-down: https://www.freesound.org/people/leviclaassen/sounds/107789/
61 |
62 | ### Music
63 |
64 | Ludwig van Beethoven - Symphony No.7 in A major op.92 - II, Allegretto
65 |
66 |
67 | ## Developing
68 |
69 | ```
70 | npm install
71 | npm run watch // dev mode
72 | npm run compile // production build
73 | ```
74 |
75 | ## License
76 |
77 | MIT
--------------------------------------------------------------------------------
/assets/images/screenshot-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelbromley/css-space-shooter/697751ffd7980226add0e94fe74c964683274f21/assets/images/screenshot-01.jpg
--------------------------------------------------------------------------------
/assets/images/screenshot-02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelbromley/css-space-shooter/697751ffd7980226add0e94fe74c964683274f21/assets/images/screenshot-02.jpg
--------------------------------------------------------------------------------
/assets/images/screenshot-03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelbromley/css-space-shooter/697751ffd7980226add0e94fe74c964683274f21/assets/images/screenshot-03.jpg
--------------------------------------------------------------------------------
/assets/sfx/alarm.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelbromley/css-space-shooter/697751ffd7980226add0e94fe74c964683274f21/assets/sfx/alarm.mp3
--------------------------------------------------------------------------------
/assets/sfx/alien.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelbromley/css-space-shooter/697751ffd7980226add0e94fe74c964683274f21/assets/sfx/alien.mp3
--------------------------------------------------------------------------------
/assets/sfx/alien_drone.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelbromley/css-space-shooter/697751ffd7980226add0e94fe74c964683274f21/assets/sfx/alien_drone.mp3
--------------------------------------------------------------------------------
/assets/sfx/explosion.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelbromley/css-space-shooter/697751ffd7980226add0e94fe74c964683274f21/assets/sfx/explosion.mp3
--------------------------------------------------------------------------------
/assets/sfx/gun.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelbromley/css-space-shooter/697751ffd7980226add0e94fe74c964683274f21/assets/sfx/gun.mp3
--------------------------------------------------------------------------------
/assets/sfx/music.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelbromley/css-space-shooter/697751ffd7980226add0e94fe74c964683274f21/assets/sfx/music.mp3
--------------------------------------------------------------------------------
/assets/sfx/ship_drone.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelbromley/css-space-shooter/697751ffd7980226add0e94fe74c964683274f21/assets/sfx/ship_drone.mp3
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by Michael on 07/11/2014.
3 | */
4 |
5 | var gulp = require('gulp');
6 | var concat = require('gulp-concat');
7 | var less = require('gulp-less');
8 | var minifyCss = require('gulp-minify-css');
9 | var uglify = require('gulp-uglify');
10 | var inject = require('gulp-inject');
11 | var rename = require('gulp-rename');
12 | var merge = require('merge-stream');
13 |
14 |
15 | gulp.task('scripts', function() {
16 |
17 | return gulp.src([
18 | './scripts/!(game|controller|music)*.js',
19 | './scripts/music.js',
20 | './scripts/game.js',
21 | './scripts/controller.js'
22 | ])
23 | .pipe(concat('script.js'))
24 | .pipe(uglify())
25 | .pipe(gulp.dest('./dist/assets/'));
26 | });
27 |
28 | gulp.task('less', function() {
29 |
30 | return gulp.src('./styles/app.less')
31 | .pipe(less())
32 | .pipe(gulp.dest('./styles'));
33 | });
34 |
35 | gulp.task('minify-css', ['less'], function() {
36 |
37 | return gulp.src('./styles/app.css')
38 | .pipe(minifyCss())
39 | .pipe(gulp.dest('./dist/assets/'));
40 | });
41 |
42 | gulp.task('static-assets', function() {
43 | return gulp.src([
44 | './assets*/**/*',
45 | './vendor*/**/*'
46 | ])
47 | .pipe(gulp.dest('./dist/'));
48 | });
49 |
50 | gulp.task('build', ['less'], function() {
51 |
52 | var sourcesBuild = gulp.src([
53 | './scripts/!(game|controller|music)*.js',
54 | './scripts/music.js',
55 | './scripts/game.js',
56 | './scripts/controller.js',
57 | './styles/app.css'
58 | ], {read: false});
59 |
60 |
61 | return gulp.src('index.src.html')
62 | .pipe(inject(sourcesBuild, { addRootSlash: false }))
63 | .pipe(rename('index.html'))
64 | .pipe(gulp.dest('./'));
65 |
66 | });
67 |
68 | gulp.task('inject-analytics', function() {
69 |
70 | return gulp.src('index.src.html')
71 | .pipe(inject(gulp.src(['./google-analytics.html']), {
72 | starttag: '',
73 | transform: function (filePath, file) {
74 | // return file contents as string
75 | return file.contents.toString('utf8')
76 | }
77 | }))
78 | .pipe(rename('index.html'))
79 | .pipe(gulp.dest('./dist'));
80 | });
81 |
82 | gulp.task('compile', ['scripts', 'minify-css', 'static-assets', 'inject-analytics'], function() {
83 |
84 | var sourcesDist = gulp.src([
85 | 'assets/*.js',
86 | 'assets/*.css'
87 | ], {read: false, cwd: 'dist'});
88 |
89 | var index = gulp.src('index.html', {cwd: 'dist'})
90 | .pipe(inject(sourcesDist, { addRootSlash: false }))
91 | .pipe(gulp.dest('dist'));
92 |
93 | });
94 |
95 | gulp.task('default', ['static-assets', 'build'], function() {
96 | console.log('Watching JS files...');
97 | console.log('Watching Less files...');
98 | console.log('Watching index.src.html...');
99 | gulp.watch('styles/*.less', ['less']);
100 | gulp.watch('index.src.html', ['build']);
101 | gulp.watch('scripts/*.js', ['scripts']);
102 | });
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CSS Space Shooter
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 | Firepower
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
☆
96 |
☆
97 |
☆
98 |
99 |
100 |
101 |
102 |
103 |
105 |
106 |
107 |
CSS
108 |
Space
109 |
Shooter
110 |
111 |
112 |
113 |
Instructions
114 |
115 |
Pilot your ship with the
116 | ↑, ↓, ← & → keys
117 |
Shoot with space
118 |
Pause / resume with p
119 |
You have 3 lives.
120 |
Don't let the aliens get past you!
121 |
OKAY
122 |
123 |
124 |
125 |
126 |
About
127 |
128 |
CSS Space Shooter is an experiment in 3D rendering using only the DOM and CSS transforms.
129 | No canvas, webGL or images of any kind are used to render the game.
130 |
Sound effects, music and audio visualization is handled by the Web Audio API.
CSS Space Shooter is an experiment in 3D rendering using only the DOM and CSS transforms.
128 | No canvas, webGL or images of any kind are used to render the game.
129 |
Sound effects, music and audio visualization is handled by the Web Audio API.