-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathrunandjump.html
134 lines (119 loc) · 3.33 KB
/
runandjump.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
133
134
<!DOCTYPE html>
<html>
<head>
<title>Run and Jump</title>
<style>
#maincanvas {
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
</style>
</head>
<body>
<canvas id="maincanvas" width="160" height="100" style="width:640px;height:400px;" onmousedown="jump()"></canvas>
<script>
/*
/|
/ |
/ |
/| |
/ | |
/ y| |
/___|__|
1 z
http://www.extentofthejam.com/pseudo/
Y_screen = (Y_world / Z) + (y_resolution / 2)
Now, since we're given Y_screen (each line), juggle the equation so that we're finding the Z:
Z = Y_world / (Y_screen - (height_screen / 2))
Y_world is camera height, and scaling factor is just 1/z.
*/
(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
var canvas, ctx;
var playerheight = -40;
var playeryspeed = 0;
const road_screen_height = 100;
const road_screen_width = 160;
var onground = true;
var hasdoublejumped = false;
function loadHandler() {
canvas = document.getElementById("maincanvas");
ctx = canvas.getContext("2d");
render();
}
var worldoffset = 0;
var blocklist = new Array(0x100);
var run = Math.floor(Math.random() * 5) + 3;
for (var i = 0; i < blocklist.length; i++) {
if (run == 0) {
blocklist[i] = false;
run = Math.floor(Math.random() * 5) + 3;
} else {
blocklist[i] = true;
run--;
}
}
blocklist[255] = true;
//var zlist = new Array(road_screen_height);
//for (var i = 0; i < road_screen_height; i++) {
//
// zlist[i] = z;
//}
function render() {
ctx.clearRect(0, 0, 160, 100);
var width = 0;
//console.log(worldoffset);
for (var i = 50; i < road_screen_height; i++) {
var z = playerheight / ((road_screen_height/2) - i);
var block = Math.floor(worldoffset + z);
var blocksubtex = ((worldoffset + z) - block) > 0.5;
//console.log(1/z);
if (z < 0) continue;
//if (i < 55) console.log(block);
if (blocklist[block % 256]) {
width = Math.floor(road_screen_width * 1/z * 0.5);
ctx.fillStyle = blocksubtex? "black" : "grey";
} else {
ctx.fillStyle = "#964B00";
}
ctx.fillRect((road_screen_width * 0.5) - width, i, width * 2, 1);
}
worldoffset += 0.1;
var isontrail = blocklist[Math.floor(worldoffset)];
if (!onground) {
playerheight += playeryspeed;
playeryspeed += 0.3;
if (playerheight >= -40 && playerheight < -35 && isontrail) {
playerheight = -40;
onground = true;
hasdoublejumped = false;
}
} else {
if (!isontrail) onground = false;
}
if (playerheight > 10) {
losegame();
return;
}
window.requestAnimationFrame(render);
}
function jump() {
if (!onground && hasdoublejumped) return;
playeryspeed = -4;playerheight -= 2;
if (!onground) hasdoublejumped = true;
onground = false;
}
function losegame() {
alert("You ran " + Math.floor(worldoffset) + " metres before falling off.");
}
window.onload = loadHandler;
</script>
<button id="derp" onmousedown="jump()">Jump</button>
</body>
</html>