javascript - On canvas, a way to make it so multiple apples fall in game? -
i creating game (using html5 canvas) involves catching falling apples, know, how original! having trouble finding way make multiple apples fall?
here link jsfiddle: https://jsfiddle.net/pgkl09j7/14/
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_y++; if (apple_x > c.width) { apple_x = 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_apple(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); }
i posted on previous question, i'll repeat here. need maintain array of apples, want check out requestanimationframe in order improve performance. things going janky you, , noticed when move bucket around. i've modified fiddle demonstrate how might modify program support multiple apples falling @ different rates of speed. (set apples_per_level 2 or more see multiple apples -- or play game, , watch accumulate!).
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