$(document).ready(function(){ // #19bd9b // #f66 // #f33 // #cfc // #396 // #333 // #3F3F3F var canvas = document.getElementById("rounded-rect"); var ctx = document.getElementById("rounded-rect").getContext("2d"); var rWidth = screen.width; var width = canvas.width, height = canvas.height; var cX = (canvas.width)/2, cY = (canvas.height)/2, r = 25; var dir = 4; var h = [0,60,110,160,220,280,330,390,450,510]; var side=0, side2=25, i=0; var gravity = 0.3, velocity = 0; var upPressed = false; var dSPX = 0, dSPY = 0, dSpyy = 20; var color = "#ED2B4D",colorPic = "#808080", colorBG = "#EBEBEB"; var score = 0, best = 0, games = 0, dispS; var sW = (width/2)-20, sH = (height/2)+28; var pic, Pics = []; var die = false; function inGame() { // function get Random Int function rand(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min +1)) + min; } // function listen to event function handler() { if(rWidth<=1300) { $('#wrapper').on("touchstart", ok); } else { $('#wrapper').on("mouseup", ok); } } function ok(){ velocity = -7; } // function draw a pic *up and down* function drawSidePics() { ctx.beginPath(); ctx.moveTo(dSPX,dSPY); ctx.lineTo(dSPX+20, dSPY+dSpyy); ctx.lineTo(dSPX+40, dSPY); ctx.fillStyle = colorPic; ctx.fill(); ctx.closePath(); } // function draw a pic *left and right* var newPic = function(x, y){ pic = { x:0, y:side }; pic.draw = function(){ ctx.beginPath(); ctx.moveTo(x, h[y]); ctx.lineTo(x+side2, h[y]+25); ctx.lineTo(x, h[y]+50); ctx.fillStyle = colorPic; ctx.fill(); ctx.closePath(); } Pics.push(pic); } // function draw those up and down pics function constructSidePics(){ for(i=0;i<8;i++) { drawSidePics(); dSPX+=50; } dSPY = canvas.height; dSPX = 0; dSpyy = -20; for(i=0;i<8;i++) { drawSidePics(); dSPX+=50; } dSPX = 0; dSPY = 0; dSpyy = 20; } // function draw the pink ball function bird() { ctx.beginPath(); ctx.arc(cX,cY,r,0,2*Math.PI); ctx.fillStyle = color; ctx.fill(); ctx.closePath(); } // function fly and check the direction of the bird + create side pics *left and right* function fly() { cX +=dir; if(cX==width-r-1) { dir = -4; side2 = 25; Pics = []; for(i=0;i<6;i++) { side = rand(0,8); newPic(0,side); } score++; } if(cX==r+1) { dir = 4; side2 = -25; Pics = []; for(i=0;i<6;i++) { side = rand(0,8); newPic(width,side); } score++; } if(score<25) { color = "#ED2B4D"; colorPic = "#808080"; colorBG = "#EBEBEB"; $('canvas') .css({background:'#EBEBEB'}); $('body') .css({background:'#808080'}); } else if(score<50){ colorPic = "#FFF"; colorBG = "#727272"; $('canvas') .css({background:'#727272'}); $('body') .css({background:'#727272'}); } else if(score<100) { colorPic = "#03F"; colorBG = "#00A"; $('canvas') .css({background:'#00A'}); $('body') .css({background:'#00A'}); } else { color = "#252525"; colorPic = "#333"; colorBG = "#222"; $('canvas') .css({background:'#222'}); $('body') .css({background:'#222'}); } velocity+=gravity; cY+=velocity; if (cY >= canvas.height-r) { cY = canvas.height-r; } else if (cY+r <= r) { cY = r; if (cY !== r) { cY = r; } } if (upPressed) { velocity = -7; } bird(); } // function check if you touch pics function check() { if(cY<=30 || cY >= height-40) { die = true; } else { die = false; } if(dir==4){ if(cX>width-2*r) { for(i=0;i=picYmin && cY<=picYmax) { } //alert(picYmin+' '+picYmax+' '+cY); } } } else { if(cX<2*r) { } } } // function drawing the score function drawScore() { if(score<=9) { sW = (width/2)-70; dispS = "0"+score.toString(); } else if(score>9 && score<100) { sW = (width/2)-60; dispS = score; } else { sW = (width/2)-65; } if(score >9 && score<20) { sW = (width/2)-50; } ctx.beginPath(); ctx.arc(width/2,(height/2)-10,110,0,2*Math.PI); ctx.fillStyle = "#FFF"; ctx.fill(); ctx.closePath(); ctx.font="120px Kanit"; ctx.fillStyle = colorBG; ctx.fillText(dispS, sW,sH); } // **** // // execute the function alive while you don't toucj pic else dead function play() { if(!die) { alive(); } else { dead(); } } // all function are execute here function alive() { ctx.clearRect(-222,-10,width+222,height+10); drawScore(); handler(); constructSidePics(); for(i=0;ibest)?best=score:best=best; $('.best span').text(best); $('.games span').text(games); $('.score span').text(score); $('#scoreBoard').fadeIn(1000); return false; } for(i=0;i<6;i++) { side = rand(0,8); newPic(width,side); } play(); } alert('Thanks to watch my code\nPlease leave a like :)\nIt\'s my first canvas'); alert('Please help me, I don\'t know how to to the collision with sides spikes... comment how to do thanks') inGame(); // wait you press restart button $('.restart').click(function() { if(die) { cX = (canvas.width)/2; cY = (canvas.height)/2; r = 25; touch = 4; FPS = 60; h = [0,60,110,160,220,280,330,390,450,510]; side=0, side2=25, i=0; gravity = 0.3; velocity = 0; upPressed = false; dSPX = 0, dSPY = 0, dSpyy = 20; color = "#ED2B4D",colorPic = "#808080", colorBG = "#EBEBEB"; score = 0; sW = (width/2)-20; sH = (height/2)+28; die = false; $('#scoreBoard').fadeOut(500); setTimeout(function(){ inGame(); },800); } }); });

Dont touch the spikes !