html
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
<!--
Author: 「HAPPY TO HELP」
Date: 16 March 2019
Purpose: Animations
License: CC BY-SA 4.0
https://creativecommons.org/licenses/by-sa/4.0/
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="author" content="「HAPPY TO HELP」">
<meta name="description" content="Animations">
<title>CH. 10 Animations [JS Game Dev Tutorial]</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="header">
<div class="container">
Enter to Rename, Shift+Enter to Preview
css
css
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
/*
Author: 「HAPPY TO HELP」
Date: 08 March 2019
Purpose: CH. 11 Animations
License: CC BY-SA 4.0
https://creativecommons.org/licenses/by-sa/4.0/
*/
body {
font: 15px/1.5 Consolas, Arial, sans-serif;
letter-spacing: 0.5vw;
margin: 0;
padding: 0;
background-color: #BBB;
}
.container {
width: 80%;
margin: auto;
}
#header {
background-color: #333;
color: #FFF;
padding-top: 30px;
min-height: 70px;
Enter to Rename, Shift+Enter to Preview
js
js
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
/*
Author: 「HAPPY TO HELP」
Date: 08 March 2019
Purpose: CH. 11 Animations
License: CC BY-SA 4.0
https://creativecommons.org/licenses/by-sa/4.0/
*/
var cnv = [];
var ctx = [];
var img = null;
window.onload = function(){
// Get canvases
cnv = document.getElementsByTagName("canvas");
// Get 2D contexts
for (var i = 0; i < cnv.length; i++){
ctx[i] = cnv[i].getContext('2d');
// Turn off AA
ctx[i].imageSmoothingEnabled = false;
}
img = new Image();
img.onload = function(){
var il = document.getElementById("isLoaded");
il.innerHTML ="Loaded Successfully";
il.style.color = "green";
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run