-
Notifications
You must be signed in to change notification settings - Fork 0
/
trigmovement.html
122 lines (115 loc) · 7.04 KB
/
trigmovement.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
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
font-family: Arial;
}
</style>
</head>
<body>
<canvas style="border:1px solid #000000" id="canvas" width="600" height="300"> Something is fucked up </canvas>
<br><br>
Debug:<br/>
<textarea id="debug" style="width: 600px; height: 150px;"></textarea>
</body>
<script type="text/javascript">
var keyState = {};
window.addEventListener('keydown',function(e){keyState[e.keyCode || e.which] = true;},true);
window.addEventListener('keyup',function(e){keyState[e.keyCode || e.which] = false;},true);
function debug(stuff){
document.getElementById("debug").value += stuff+"\n"
document.getElementById("debug").scrollTop = document.getElementById("debug").scrollHeight
}
function World(canvasId, bg){
var _this = this;
this.bg = bg || "#2c3e50";
this.canvas = document.getElementById('canvas')
this.cx = this.canvas.getContext('2d');
this.objects = []
this.start = function(){
_this.timer = setInterval(function(){
_this.updateObjects();
},10);
}
this.addObject=function(newObj){
_this.objects.push(newObj);
return _this.objects[_this.objects.length-1];
}
this.updateObjects = function(){
_this.cx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
_this.objects.forEach(function(object){
object.move();
object.draw(_this.cx);
})
}
}
function Polygon(x, y, points, color, border) {
this.x = x;
this.y = y;
this.velY = 0;
this.velX = 0;
this.points = points;
this.color = color || "red";
this.border = border || ["#000000",2];
this.canvas = canvas;
this.cx = this.canvas.cx;
this.rotation = 0;
this.rotVel = 0;
var _this = this;
this.draw = function(cx) {
cx.save();
cx.fillStyle = _this.color;
cx.translate((_this.points[0][0]+_this.x),(_this.points[0][1]+_this.y))
cx.rotate(_this.rotation*Math.PI/180);
cx.translate(-1*(_this.points[0][0]+_this.x),-1*(_this.points[0][1]+_this.y))
cx.beginPath();
cx.moveTo((_this.points[0][0]+_this.x),
(_this.points[0][1]+_this.y));
for (i = 1; i < _this.points.length; i++){
///*
px = _this.points[i][0];
py = _this.points[i][1];//*/
cx.lineTo(px+_this.x,py+_this.y);
}
cx.closePath();
cx.fill();
cx.restore();
}
this.move = function(){
_this.rotation += _this.rotVel;
if (keyState[87]){
_this.velX = Math.cos(_this.rotation*(Math.PI/180));
_this.velY = Math.sin(_this.rotation*(Math.PI/180));
}
else if(keyState[83]){
_this.velX = -1*Math.cos(_this.rotation*(Math.PI/180));
_this.velY = -1*Math.sin(_this.rotation*(Math.PI/180));
}
else{
_this.velX = 0;
_this.velY = 0;
}
_this.x += _this.velX;
_this.y += _this.velY;
}
}
world = new World("canvas");
player = world.addObject(new Polygon(10, 50, [[25,25],[0,50],[12,25],[0,0]]));
input = setInterval(function(){
if (keyState[68]){//D
player.rotVel = 1
}
if (keyState[65]){//D
if (player.rotVel>-2){
player.rotVel -= .1;
}
}
if (Math.abs(player.rotVel) > 0 && !(keyState[65] || keyState[68])){
player.rotVel -= 0.1*(Math.abs(player.rotVel)/player.rotVel)
}
},10)
world.start();
</script>
</html>