jquery - Canvas drawImage() not working - Javascript game -
i have been working on snake game in javascript using html 5 canvas. game works no errors , image being loaded webpage, image not drawn.
<script> $(document).ready(function(){ // canvas context var cvs = $("canvas").get(0); var ctx = cvs.getcontext("2d"); // declare variables var food; var snake; var grid = 20; var h = cvs.height; var w = cvs.width; var apple = new image(); //makes canvas sharp cvs.width *= 2; cvs.height *= 2; cvs.style.width = cvs.width / 2; cvs.style.height = cvs.height / 2; ctx.scale(2, 2); function init(){ apple.src = "food.png"; keypress(); reset(); setinterval(draw, 1000 / 10); } function reset(){ snake = { direction: "right", x: 0, y: 0, length: 5, pieces: [], score: 0 }; food = []; addfood(); } function draw() { // calls functions , clears squares updatesnake(); movesnake(); ctx.clearrect(0, 0, w, h); drawfood(); drawsnake(); // stores score string var snaketext = snake.score.tostring(); // add 0's counter while (snaketext.length < 3) { snaketext = "0" + snaketext; } // displays score counter ctx.fillstyle = "red"; ctx.textbaseline= "top"; ctx.font = "20px monospace"; ctx.filltext("score: " + snaketext, 5, 0); } // draw visible snake function drawsnake(){ ctx.fillstyle = "green"; ctx.strokestyle = "black"; ctx.linewidth = 1; // draw square on snakes head ctx.beginpath(); ctx.rect(snake.x, snake.y, grid, grid); ctx.stroke(); ctx.fill(); // draws square on of snakes body piecees (var = 0; < snake.pieces.length; i++) { ctx.beginpath(); ctx.rect(snake.pieces[i].x, snake.pieces[i].y, grid, grid); ctx.stroke(); ctx.fill(); } } function updatesnake(){ // detects collision snakes head , body (var = 0; < snake.pieces.length; i++) { if(snake.x == snake.pieces[i].x && snake.y == snake.pieces[i].y){ reset(); } } // last element of food array var foodindex = food.length - 1; // go through food array while (foodindex >= 0) { // detects snake collision food, increase snake length, remove food, increase score if(snake.x == food[foodindex].x && snake.y == food[foodindex].y){ snake.length +=1; food.splice(foodindex, 1); snake.score+=1; //add new food addfood(); } // go next piece of food foodindex--; } // clamps down array length of snake snake.pieces.length = math.min(snake.pieces.length, snake.length - 1); // adds snake pieces beeginning of array, @ snakes head location snake.pieces.unshift({ x: snake.x, y: snake.y }); } // generates food in random locations function addfood(){ var valid; // generates food if allowed while (true) { valid = true; var newfood = { x: math.floor(math.random()*(w / grid)) * grid, y: math.floor(math.random()*(h / grid)) * grid }; // stops food being put on snakes head if (snake.x == newfood.x && snake.y == newfood.y) { console.log("head"); valid = false; } // stops food being put on sankes body (var = 0; < snake.pieces.length; i++) { if(newfood.x == snake.pieces[i].x && newfood.y == snake.pieces[i].y){ console.log("body"); valid = false; } } // stops food being out on top of each other (var = 0; < food.length; i++) { if(newfood.x == food[i].x && newfood.y == food[i].y){ valid = false; } } // add new food array if (valid) { food.push(newfood); break; } } } window.addfood = addfood; // draws visible food function drawfood(){ ctx.fillstyle = "salmon"; ctx.strokestyle = "black"; //draws @ foods location (var = 0; < food.length; i++) { ctx.drawimage(apple, food.x, food.y, grid, grid); } } function movesnake(){ if(snake.direction == "right"){ snake.x+= grid; } if(snake.direction == "left"){ snake.x-= grid; } if(snake.direction == "up"){ snake.y-= grid; } if(snake.direction == "down"){ snake.y+= grid; } if(snake.x < 0){ reset(); } if(snake.x > w-20){ reset(); } if(snake.y > h-20){ reset(); } if(snake.y < 0){ reset(); } } // detects keys pressed function keypress(){ $(document).keydown(function(e){ if(e.keycode == 37 && snake.direction != "right"){ snake.direction = "left"; } if(e.keycode == 39 && snake.direction != "left"){ snake.direction = "right"; } if(e.keycode == 38 && snake.direction != "down"){ snake.direction = "up"; } if(e.keycode == 40 && snake.direction != "up"){ snake.direction = "down"; } }) } init(); }); </script> <canvas width="400" height="400" style="border: solid black 1px"> sorry, no canvas support! </canvas>
the image created in variablees , given source in init() function:
var cvs = $("canvas").get(0); var ctx = cvs.getcontext("2d"); // declare variables var food; var snake; var grid = 20; var h = cvs.height; var w = cvs.width; var apple = new image(); //makes canvas sharp cvs.width *= 2; cvs.height *= 2; cvs.style.width = cvs.width / 2; cvs.style.height = cvs.height / 2; ctx.scale(2, 2); function init(){ apple.src = "food.png"; keypress(); reset(); setinterval(draw, 1000 / 10); } drawimage() called here in drawfood() function:
function drawfood(){ ctx.fillstyle = "salmon"; ctx.strokestyle = "black"; //draws @ foods location (var = 0; < food.length; i++) { ctx.drawimage(apple, food.x, food.y, grid, grid); } } i have tried using onload function / eventlisteners cannot work.
thanks.
the problem in draw food function
function drawfood(){ ctx.fillstyle = "salmon"; ctx.strokestyle = "black"; //draws @ foods location (var = 0; < food.length; i++) { // had ctx.drawimage(apple, food.x, food.y, grid, grid); // should ctx.drawimage(apple, food[i].x, food[i].y, grid, grid); } } but should still check images have loaded before try draw them. there plenty of examples of how load images here on stackoverflow.
Comments
Post a Comment