-
Notifications
You must be signed in to change notification settings - Fork 0
/
rev-0.1.html
132 lines (112 loc) · 3.79 KB
/
rev-0.1.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Revision 0.1</title>
<style>
* { padding: 0; margin: 0; }
canvas { background: #eee; display: block; margin: 0 auto; }
</style>
</head>
<body>
<canvas id="game-window" width="256px" height="256px"></canvas>
<script>
var canvas = document.getElementById("game-window"); //store a reference to the canvas element
var ctx = canvas.getContext('2d'); // create a variable to store the 2d rendering context
var canvasWidth = 256; //set the canvas width...
var canvasHeight = 256; //... and height
var boat = new Image(); //create new image element for boat
var boatWidth = 16; //define the sprites width...
var boatHeight = 16; //... and height
boat.src = 'crappy-placeholder.png'; //set souce of boat image
var map = new Image(); //create a new image element for the map
var mapWidth = 768; //define the maps width...
var mapHeight = 768; //... and height
map.src = 'crappy-placeholder-map.png' //set source of the map image
var rightPressed = false;
var leftPressed = false;
var heading = 0;
var vHeading = 0.1;
var boatPosX = canvasWidth/2;
var boatPosY = canvasHeight/2;
var boatDX = 0;
var boatDY = 0;
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
function keyDownHandler(e) {
if(e.keyCode == 39) {
rightPressed = true;
}
else if(e.keyCode == 37) {
leftPressed = true;
}
}
function keyUpHandler(e) {
if(e.keyCode == 39) {
rightPressed = false;
}
else if(e.keyCode == 37) {
leftPressed = false;
}
}
function adjustBoatPos() {
boatDX = Math.cos((heading - 90) * (Math.PI / 180));
boatDY = Math.sin((heading - 90) * (Math.PI / 180));
boatPosX = boatPosX + boatDX * vHeading;
boatPosY = boatPosY + boatDY * vHeading;
}
function calcHeading() {
if (heading>360 ) {
heading = 0;
} else if (rightPressed) {
heading++
} else if (leftPressed) {
heading--
}
if (heading<0) {
heading = 359;
}
}
function debugText(x,y) {
ctx.fillStyle = "grey";
ctx.fillRect(x, y+17, 80, 100);
ctx.font = "bold 16px Arial";
ctx.fillStyle = "#FB5167";
ctx.fillText(" X:"+Math.round(boatPosX * 100) / 100, x+2, (y+25) +8);
ctx.fillStyle = "#FBE551";
ctx.fillText(" Y:"+Math.round(boatPosY * 100) / 100, x+2, (y+25) +24);
ctx.fillStyle = "#FB9051";
ctx.fillText("dX:"+Math.round(boatDX * 100) / 100, x+2, (y+25) +40);
ctx.fillStyle = "#FB51BC";
ctx.fillText("dY:"+Math.round(boatDY * 100) / 100, x+2, (y+25) +56);
ctx.fillStyle = "#BCFB51";
ctx.fillText(" H:"+heading, x+2, (y+25) +72);
ctx.fillStyle = "#9051FB";
ctx.fillText("vH:"+vHeading, x+2, (y+25) +88);
}
function drawImageRot(img,x,y,width,height,deg){
var rad = deg * Math.PI / 180; //Convert degrees to radian
ctx.translate(x + width / 2, y + height / 2); //Set the origin to the center of the image
ctx.rotate(rad); //Rotate the canvas around the origin
ctx.drawImage(img,width / 2 * (-1),height / 2 * (-1),width,height); //draw the image
ctx.rotate(rad * ( -1 ) );
ctx.translate((x + width / 2) * (-1), (y + height / 2) * (-1)); //reset the canvas
}
function drawBoat() {
drawImageRot(boat, boatPosX-(boatWidth/2), boatPosY-(boatHeight/2), boatWidth, boatHeight, heading);
}
function drawMap() {
ctx.drawImage(map, (mapWidth/3-canvasWidth*2), (mapHeight/3-canvasHeight*2));//draw the map
}
function draw() {
ctx.clearRect(0 ,0, canvasWidth, canvasHeight); //clear the canvas
drawMap();
calcHeading();
adjustBoatPos();
drawBoat();
debugText(0, canvasHeight/2);
}
setInterval(draw, 10);
</script>
</body>
</html>