javascript - How can i get the multiple apple/s to fall? -
i creating game (using html5 canvas) involves catching falling apples, know, how original! having trouble finding way make multiple apples fall?
here code in jsfiddle: https://jsfiddle.net/pgkl09j7/12/
var apple_x = 100; var apple_y = 0; var basket_x = 100; var basket_y = 100; var points = 0; var basket_img = new image(); basket_img.src = "http://s18.postimg.org/h0oe1vj91/basket.png"; var countable = function () {} //background colour of canvas var c = document.getelementbyid("c"); var ctx = c.getcontext("2d"); ctx.fillstyle = "#000"; ctx.fillrect(0, 0, 500, 500); //here event listener c.addeventlistener("mousemove", seenmotion, false); ////////////////////// function seenmotion(e) { //this code mouse //moving on canvas. var bounding_box = c.getboundingclientrect(); basket_x = (e.clientx - bounding_box.left) * (c.width / bounding_box.width) - basket_img.width / 2; basket_y = (e.clienty - bounding_box.top) * (c.height / bounding_box.height) - basket_img.height / 2; } function start_game() { setinterval(game_loop, 50); } function game_loop() { // code above called every 50ms , // frame-redraw-game-animation loop. c.width = c.width; // below code draws objects draw_apple(apple_x, apple_y); draw_basket(basket_x, basket_y); // below code updates balloons location apple_x++; if (apple_y > c.height) { apple_y = 0; } //here collision detection code if (collision(apple_x, apple_y, basket_x, basket_y)) { points -= 0.5; } //here code point system points += 1; // , let's stick in top right. var integerpoints = math.floor(points); // make integer ctx.font = "bold 24px sans-serif"; ctx.filltext(integerpoints, c.width - 50, 50); } context.clearrect(0, 0, 500, 500); function collision(basket_x, basket_y, apple_x, apple_y) { if (apple_y + 85 < basket_y) { return false; } if (apple_y > basket_y + 91) { return false; } if (apple_x + 80 < basket_x) { return false; } if (apple_x > basket_x + 80) { return false; } return true; } // code stop game when we're finished playing function stop_game() { } //code ball function draw_app le(x, y) { var apple_img = new image(); apple_img.src = "http://s15.postimg.org/3nwjmzsiv/apple.png"; ctx.drawimage(apple_img, x, y); } //code basket function draw_basket(x, y) { ctx.drawimage(basket_img, x, y); }
you've accepted answer, looked fun. check out fiddle.
https://jsfiddle.net/h82gv4xn/
improvements include:
- fixed scoreboard
- added level progression (level increases every 10 apples)
- allowance many many more apples on screen (play level 9).
- apples fall @ different speeds , speed levels increase.
- uses animation frame system much smoother animations.
- relaxed collision handling (the center of bucket must touch apple)
it gets silly levels wind upwards, should nice example improve upon. relevant javascript follows (this go onload function):
var game = create_game(); game.init(); function create_game() { debugger; var level = 1; var apples_per_level = 1; var min_speed_per_level = 1; var max_speed_per_level = 2; var last_apple_time = 0; var next_apple_time = 0; var width = 500; var height = 500; var delay = 1000; var item_width = 50; var item_height = 50; var total_apples = 0; var apple_img = new image(); var apple_w = 50; var apple_h = 50; var basket_img = new image(); var c, ctx; var apples = []; var basket = { x: 100, y: 100, score: 0 }; function init() { apple_img.src = "http://s15.postimg.org/3nwjmzsiv/apple.png"; basket_img.src = "http://s18.postimg.org/h0oe1vj91/basket.png"; level = 1; total_apples = 0; apples = []; c = document.getelementbyid("c"); ctx = c.getcontext("2d"); ctx.fillstyle = "#000"; ctx.fillrect(0, 0, 500, 500); c.addeventlistener("mousemove", function (e) { //moving on canvas. var bounding_box = c.getboundingclientrect(); basket.x = (e.clientx - bounding_box.left) * (c.width / bounding_box.width) - basket_img.width / 2; basket.y = (e.clienty - bounding_box.top) * (c.height / bounding_box.height) - basket_img.height / 2; }, false); setupapples(); requestanimationframe(tick); } function setupapples() { var max_apples = level * apples_per_level; while (apples.length < max_apples) { initapple(apples.length); } } function initapple(index) { var max_speed = max_speed_per_level * level; var min_speed = min_speed_per_level * level; apples[index] = { x: math.round(math.random() * (width - 2 * apple_w)) + apple_w, y: -apple_h, v: math.round(math.random() * (max_speed - min_speed)) + min_speed, delay: date.now() + math.random() * delay } total_apples++; } function collision(apple) { if (apple.y + apple_img.height < basket.y + 50) { return false; } if (apple.y > basket.y + 50) { return false; } if (apple.x + apple_img.width < basket.x + 50) { return false; } if (apple.x > basket.x + 50) { return false; } return true; } function maybeincreasedifficulty() { level = math.max(1, math.ceil(basket.score / 10)); setupapples(); } function tick() { var i; var apple; var datenow = date.now(); c.width = c.width; (i = 0; < apples.length; i++) { apple = apples[i]; if (datenow > apple.delay) { apple.y += apple.v; if (collision(apple)) { initapple(i); basket.score++; } else if (apple.y > height) { initapple(i); } else { ctx.drawimage(apple_img, apple.x, apple.y); } } } ctx.font = "bold 24px sans-serif"; ctx.fillstyle = "#2fff2f"; ctx.filltext(basket.score, c.width - 50, 50); ctx.filltext("level: " + level, 20, 50); ctx.drawimage(basket_img, basket.x, basket.y); maybeincreasedifficulty(); requestanimationframe(tick); } return { init: init }; }
Comments
Post a Comment