Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE HTML>
- <head>
- <title>Runner</title>
- <meta charset="utf-8">
- <style>
- canvas {
- margin: auto;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- border: 2px solid #222;
- }
- </style>
- </head>
- <body>
- <img src="the_run0.png" id="img0" hidden>
- <img src="the_run1.png" id="img1" hidden>
- <img src="the_run2.png" id="img2" hidden>
- <img src="the_run3.png" id="img3" hidden>
- <img src="the_run4.png" id="img4" hidden>
- <img src="the_run5.png" id="img5" hidden>
- <img src="the_run6.png" id="img6" hidden>
- <script>
- var WIDTH, HEIGHT;
- var canvas, ctx, keystate, player_status, player_pos, t0, t1;
- var img0, img1, img2, img3, img4, img5, img6, vel;
- var b_jump, on_air, hitboxes;
- function main() {
- init();
- canvas = document.createElement("canvas");
- canvas.width = WIDTH;
- canvas.height = HEIGHT;
- ctx = canvas.getContext("2d");
- document.body.appendChild(canvas);
- document.addEventListener("keydown", function(evt) {
- keystate[evt.keyCode] = true;
- });
- var loop = function() {
- update();
- draw();
- requestAnimationFrame(loop);
- }
- requestAnimationFrame(loop);
- }
- function init() {
- keystate = {};
- hitboxes = [];
- // regular hitboxes
- hitboxes.push([21, 308, 0]);
- // normal hitboxes
- hitboxes.push([300, 290, 200]);
- hitboxes.push([600, 270, 200]);
- WIDTH = 1200;
- HEIGHT = 400;
- player_status = 0;
- vel = 0;
- on_air = false;
- player_pos = HEIGHT-92;
- b_jump = player_pos;
- img0=document.getElementById("img0");
- img1=document.getElementById("img1");
- img2=document.getElementById("img2");
- img3=document.getElementById("img3");
- img4=document.getElementById("img4");
- img5=document.getElementById("img5");
- img6=document.getElementById("img6");
- t0 = window.performance.now();
- }
- function update() {
- t1 = window.performance.now();
- for(var i=1; i<hitboxes.length; i++) {
- hitboxes[i][0] -= 2;
- }
- if(t1-t0 > 50) {
- player_status++;
- if(player_status > 6)
- player_status = 0;
- if(keystate[32] || keystate[38]) {
- if(!on_air) {
- vel = 1;
- b_jump = player_pos;
- on_air = true;
- }
- }
- keystate = {};
- var hbx = false;
- for(var i=1; i<hitboxes.length; i++) {
- if(hitboxes[i][0] < 30 && hitboxes[i][1] > player_pos-5 && hitboxes[i][0]+hitboxes[i][2] > 0) {
- b_jump = hitboxes[i][1];
- hbx = true;
- }
- }
- if(!hbx) {
- b_jump = HEIGHT-92;
- }
- if(vel == 1) {
- player_pos -= 15;
- if(player_pos < b_jump-150) {
- vel = 0;
- }
- } else {
- if(player_pos < b_jump)
- player_pos += 15;
- else
- on_air = false;
- }
- for(var i=1; i<hitboxes.length; i++) {
- if(hitboxes[i][0]+hitboxes[i][2] < 0) {
- hitboxes.splice(i-1, i);
- hitboxes.push([1200, 290, 200]);
- }
- }
- t0 = window.performance.now();
- }
- }
- function draw() {
- ctx.fillStyle = "#FFF";
- ctx.fillRect(0, 0, WIDTH, HEIGHT);
- switch(player_status) {
- case(0):
- ctx.drawImage(img0,0,player_pos);
- break;
- case(1):
- ctx.drawImage(img1,0,player_pos);
- break;
- case(2):
- ctx.drawImage(img2,0,player_pos);
- break;
- case(3):
- ctx.drawImage(img3,0,player_pos);
- break;
- case(4):
- ctx.drawImage(img4,0,player_pos);
- break;
- case(5):
- ctx.drawImage(img5,0,player_pos);
- break;
- case(6):
- ctx.drawImage(img6,0,player_pos);
- break;
- }
- for(var i=1; i<hitboxes.length; i++) {
- ctx.fillStyle = "#F00";
- ctx.fillRect(hitboxes[i][0], hitboxes[i][1]+92, hitboxes[i][2], 20);
- }
- }
- main();
- </script>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement