-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
51 lines (46 loc) · 1.3 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border: 1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>
var tinkerbell;
function startGame() {
myGameArea.start();
tinkerbell = new Image(); // Create new img element
tinkerbell.onerror=function(){alert(img.src+' failed');}
tinkerbell.onload=start;
tinkerbell.src = 'assets/tinkerbell.png'; // Set source path
function start(){
// start() is called AFTER the image is fully loaded regardless
// of start's position in the code
}
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480*2;
this.canvas.height = 270*2;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function updateGameArea() {
/*myGameArea.clear();*/
/*myGameArea.ctx.drawImage(tinkerbell,10,10);*/
}
</script>
<p>We have created a game area! (or at least an empty canvas)</p>
</body>
</html>