分享一个比较简单的canvas+js 飞翔的小鸟小游戏

来源：互联网发布：80端口和8080端口区别编辑：程序博客网时间：2024/05/18 01:57
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>canvas{border: 1px solid #000;}</style></head><body><canvas width="456" height="512" id="canvas">对不起,您的浏览器不支持画布,请升级!</canvas><script>//版本 1.0//没有完成的任务//1,小鸟倾斜//2,开始画面//3,2位以上的分数 //4,多个排水管同时出现var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');//获取最优执行频率的变量var raf;//整个界面的图片绘制var pipeup = new Image();//上下水道var pipedown = new Image();//下下水道var sky = new Image();//天空var land = new Image();//大地var birds = new Image();//小鸟var count = new Image(); //分数var count1 = new Image(); //分数var b = parseInt(Math.random()*2.99);  //0,1,2var d = parseInt(Math.random()*1.99);  //0,1//取值pipeup.src = 'images/pipe_up.png';pipedown.src = 'images/pipe_down.png';sky.src = 'images/bg_' + d + '.png'; //白天或者黑夜land.src = 'images/land.png';birds.src = 'images/bird' + b + '_0.png';count.src = 'images/font_048.png';count1.src = 'images/font_048.png';//地图function map(){for (var i = 0; i < 2; i++) {ctx.drawImage(sky,i*288,0,288,512);ctx.drawImage(land,i*266,400,336,112);}ctx.drawImage(count1,20,20,34,64);ctx.drawImage(count,54,20,34,64);}//小鸟对象var bird = {x:100,y:220,vx:5,vy:2,src:'images/bird' + b + '_0.png',draw:function(){birds.src = this.src;ctx.drawImage(birds,this.x,this.y,60,60);// ctx.save();// ctx.translate(bird.x*1.2,bird.y*1.2);// ctx.rotate(bird.vy/ 7);// ctx.drawImage(birds,-birds.width / 4,-birds.height / 4);// ctx.restore();}}//下水道var pipe = {x:456,upy:220,downy:-220,vx:1.5,upsrc:'images/pipe_up.png',downsrc:'images/pipe_down.png',draw:function(){pipeup.src = this.upsrc;pipedown.src = this.downsrc;ctx.drawImage(pipeup,this.x,this.upy,80,320);ctx.drawImage(pipedown,this.x,this.downy,80,320);}};//游戏结束的函数function gameover(){ctx.fillStyle = 'rgba(255,255,255,0.5)';ctx.fillRect(0,0,canvas.width,canvas.height);var over = new Image();over.src = 'images/text_game_over.png';over.onload = function(){//确定图片位置,显示图片ctx.drawImage(over,80,100,300,80);}canvas.addEventListener('click',function(){location.reload();})}var m = 0;var n = 0;var score = 0;var aa = 0//这是一个核心函数function draw(){//清屏ctx.clearRect(0,0,456,512);//重新加载地图map();m++;// 每15帧 让小鸟翅膀动一次if (m % 4 == 0) {n++;if (n > 2) {n = 0;}bird.src = 'images/bird' + b + '_' + n + '.png';bird.draw();}//每帧小鸟都会下降0.35pxbird.vy += 0.25;//小鸟水平是不会运动的bird.y += bird.vy;//下水道一直在运动pipe.x -= bird.vx;if (pipe.x < -80) {pipe.upy = Math.random() * 150 +140;pipe.downy = pipe.upy - 440;pipe.x = 456;}//得分if (pipe.x == 46) {score++;if (score > 9) {score = 0;aa++;}count.src = 'images/font_0'+(48 + score) + '.png';count1.src = 'images/font_0'+(48 + aa) + '.png';}//画小鸟bird.draw();pipe.draw();//以最优的频率运动raf = window.requestAnimationFrame(draw);//判断碰撞//没有使用像素检测if ((bird.y < pipe.downy + 305 || bird.y + 50 > pipe.upy) && (pipe.x < 150 && pipe.x > 50)) {//停止动画window.cancelAnimationFrame(raf);gameover();}}//点击画布开始游戏//每次点击都会给小鸟能量,得到能量小鸟会向上移动7canvas.addEventListener('click',function(e){//停止动画window.cancelAnimationFrame(raf);bird.vy = -7;raf = window.requestAnimationFrame(draw);});sky.onload = function(){//初始化map();bird.draw();}</script></body></html>
阅读全文
0 0