Javascript, HTML5 Canvas, Score function -
so have simple snake game set in score increments +1 every time player collides right piece(you know game). anyway.
i want background change image every multiple of 5 on score represent new level. possible? i'm assuming along lines of;
if score > = 5 var img = document.getelementbyid("anid"); ctx.drawimage(img, 0, 0, w, h); i know syntax there wrong thinking behind right?
// javascript document
$(document).ready(function(){ //canvas stuff var canvas = $("#canvas")[0]; var ctx = canvas.getcontext("2d"); var w = $("#canvas").width(); var h = $("#canvas").height(); //lets save cell width in var easy control var cw =10; var d; var food; var score; if (score % 5 == 0) { //score divisor of 5, new level! var img = document.getelementbyid("scream1"); ctx.drawimage(img, 0, 0, w, h); //do want } var obstacle; var snd = new audio("sfx1.wav"); // buffers automatically when created var snd2 = new audio("sfx2.wav"); var snd3 = new audio("sfx.wav"); var snd4 = new audio("poke.mp3"); snd4.play(); //timer var max_timer = 15; var current_timer; var show_timer = (function () { current_timer--; $("#timer").text(current_timer); if (current_timer < 0) { $("#bonus").empty(); init(); return; } }); var timer_interval = setinterval(show_timer, 1000); //lets create snake var snake_array; // array of cells make snake function init() { d = "right";//default direction create_snake(); create_food(); create_obstacle(); create_obstacle2(); create_obstacle3(); create_obstacle4(); score = 0; current_timer = max_timer; //lets move snake using timer //which trigger paint function //eevery 60ms if(typeof game_loop != "undefined") clearinterval(game_loop); game_loop =setinterval(paint, 60); } init(); function create_snake() { var length = 5; //length of snake snake_array = []; //empty array start for(var = length-1; i>=0; i--) { //this create horizontal snake starting top left snake_array.push({x: i,y:0}); } } //lets create food function create_food() { food = { x: math.round(math.random()*(w-cw)/cw), y: math.round(math.random()*(h-cw)/cw), }; //this create x/y between 0-44 //because there 45(450/10) positions //accross rows , columns } //create next level function function next_level() { var img = document.getelementbyid("scream1"); ctx.drawimage(img, 0, 0, w, h); } //lets create obstacle function create_obstacle() { obstacle = { x: math.round(math.random()*(w-cw)/cw), y: math.round(math.random()*(h-cw)/cw), }; } //lets create second obstacle function create_obstacle2() { obstacle2 = { x: math.round(math.random()*(w-cw)/cw), y: math.round(math.random()*(h-cw)/cw), }; } //lets create third obstacle function create_obstacle3() { obstacle3 = { x: math.round(math.random()*(w-cw)/cw), y: math.round(math.random()*(h-cw)/cw), }; } //lets create fourth obstacle function create_obstacle4() { obstacle4 = { x: math.round(math.random()*(w-cw)/cw), y: math.round(math.random()*(h-cw)/cw), }; } //lets paint snake function paint() { //to avoid snake trail need paint //the bgon every frame //lets paint canvas var img = document.getelementbyid("scream"); ctx.drawimage(img, 0, 0, w, h); //the movement code snake come here //the logic simple //pop out tail cell //place in front of head cell var nx = snake_array[0].x; var ny = snake_array[0].y; //these posiiton of head cell. //we increment new position //lets add proper direction based movement if(d == "right")nx++; else if(d == "left")nx--; else if(d == "up") ny--; else if(d == "down") ny ++; //lets add game on clauses //this restart game if snake hits wall //lets add code body collision if(nx == -1 || nx == w/cw || ny == -1|| ny == h/cw|| check_collision(nx,ny, snake_array)) { //restart game $("#bonus").empty(); snd3.play(); init(); //lets organise code bit return; } //if snake collides obstacle, restart game if (nx == obstacle.x && ny == obstacle.y) { $("#bonus").empty(); snd3.play(); init(); return; } //if snake collides obstacle, restart game if (nx == obstacle3.x && ny == obstacle3.y) { $("#bonus").empty(); snd3.play(); init(); return; } //if snake collides obstacle, restart game if (nx == obstacle4.x && ny == obstacle4.y) { $("#bonus").empty(); snd3.play(); init(); return; } //if snake collides obstacle, more time if (nx == obstacle2.x && ny == obstacle2.y) { current_timer = max_timer create_obstacle2(); snd2.play(); $("#bonus").append("<h2>time bonus!</h2>"); $( '#bonus' ).show(function(){ $(this).fadeout(2000); }); } //lets write code make snake eat food //the logic simple //if new head position matches of food //create new head instead of moving tail if(nx == food.x && ny == food.y) { var tail = {x:nx, y:ny}; score++; if (score % 2 == 0) { next_level(); } create_food(); create_obstacle(); create_obstacle3(); create_obstacle4(); snd.play(); $("#bonus").empty(); } else { var tail = snake_array.pop();//pops out last cell tail.x = nx;tail.y = ny; } //the snake can eat food snake_array.unshift(tail);//puts tail first cell for(var i= 0;i<snake_array.length; i++) { var c = snake_array[i]; //lets paint 10px wide cells paint_cell(c.x, c.y); } //lets paint food paint_cell(food.x, food.y); //lets paint obstacle paint_cell2(obstacle.x, obstacle.y); //lets paint second obstacle paint_cell3(obstacle2.x, obstacle2.y); //lets paint third obstacle paint_cell2(obstacle3.x, obstacle3.y); //lets paint fourth obstacle paint_cell2(obstacle4.x, obstacle4.y); //lets paint score var score_text = "score:" + score; ctx.filltext(score_text, 5, h-5); } //lets first create generic function paint cells function paint_cell(x,y) { ctx.fillstyle="white"; ctx.fillrect(x*cw,y*cw, cw, cw); ctx.strokestyle = "black"; ctx.strokerect(x*cw,y*cw, cw, cw); } function paint_cell2(x,y) { ctx.fillstyle="orange"; ctx.fillrect(x*cw,y*cw, cw, cw); ctx.strokestyle = "black"; ctx.strokerect(x*cw,y*cw, cw, cw); } function paint_cell3(x,y) { ctx.fillstyle="red"; ctx.fillrect(x*cw,y*cw, cw, cw); ctx.strokestyle = "black"; ctx.strokerect(x*cw,y*cw, cw, cw); } function check_collision(x, y, array) { //this function check provided x/y //coordinates exist in array of cells or not for(var = 0; i<array.length; i++) { if(array[i].x == x && array[i].y == y) return true; } return false; } //lets addd keyboard controls $(document).keydown(function(e){ var key = e.which; //we add clause prevent reverse gear if(key == "37" && d!= "right") d = "left"; else if(key == "38" && d!= "down") d="up"; else if(key == "39" && d!= "left") d="right"; else if(key == "40" && d!= "up") d="down"; //the snake keyboard controllable }) })
you can use % operator solve this. msdn: http://msdn.microsoft.com/en-us/library/ie/9f59bza0(v=vs.94).aspx
code
if (score % 5 == 0) { //score divisor of 5, new level! var img = document.getelementbyid("anid"); //do want } here's fiddle demonstrating concept: http://jsfiddle.net/vchcg/
Comments
Post a Comment