分享一个比较简单的canvas+js 飞翔的小鸟小游戏
2017-06-23 14:36
721 查看
<!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,2
var 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.35px
bird.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();
}
}
//点击画布开始游戏
//每次点击都会给小鸟能量,得到能量小鸟会向上移动7
canvas.addEventListener('click',function(e){
//停止动画
window.cancelAnimationFrame(raf);
bird.vy = -7;
raf = window.requestAnimationFrame(draw);
});
sky.onload = function(){
//初始化
map();
bird.draw();
}
</script>
</body>
</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,2
var 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.35px
bird.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();
}
}
//点击画布开始游戏
//每次点击都会给小鸟能量,得到能量小鸟会向上移动7
canvas.addEventListener('click',function(e){
//停止动画
window.cancelAnimationFrame(raf);
bird.vy = -7;
raf = window.requestAnimationFrame(draw);
});
sky.onload = function(){
//初始化
map();
bird.draw();
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- css+js实现一个弹出层，完成注册功能 带有遮罩层，比较简单
- 【分享】曾经做的一个JS小游戏——《Battle City》
- 一个简单JS小游戏
- 通过js写的一个比较简单的点击切换图片效果
- 分享实现类似QQ的自动登陆的方法，代码比较简单，主要是给大家提供一个实现逻辑，具体的要结合自身的app来做
- 如何开发一个简单的HTML5 Canvas 小游戏
- 分享一个灰常简单好用的jQuery弹出层插件:jquery.artwl.thickbox.js
- Other_7.一个比较简单的HTML+JS图片轮播效果
- 一个简单的基于canvas小游戏
- 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎
- 分享一个超酷的开源html5 canvas互动网络图形效果javascript类库 - sigma.js
- 如何开发一个简单的HTML5 Canvas 小游戏
- 比较简单的一个符合web标准的JS调用flash方法
- 今晚发现一个比较有趣的js过关游戏，分享下
- 一个简单的购物车结算js分享
- 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎
- 分享一个 jsPDF的简单使用以及中文编码问题的解决
- 分享一个介绍8款js框架比较的链接
- 今晚发现一个比较有趣的js过关游戏，分享下