原生js实现像素鸟小游戏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
        * {
            margin: 0;
            padding: 0;
        }

        #game {
            width: 800px;
            height: 600px;
            background: url('images/bird/sky.png');
            position: relative;
            overflow: hidden;
        }

        #bird {
            width: 34px;
            height: 25px;
            background: url('images/bird/birds.png') -8px -10px no-repeat;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
	<div id="game">
        <div id="bird"></div>
    </div>
    <script>
        // 让小鸟飞起来
        // 移动的背景
        // top
        // 定时器
        // 动画原理 leader = leader + step

        // 获取相应的元素
        var game = document.getElementById('game');
        var birdElement = document.getElementById('bird');

        // 初始化背景图的值
        var sky = {
        	x: 0
        };
        // 初始化bird的值
        var bird = {
        	speedX: 5,
        	speedY: 0,
        	x: birdElement.offsetLeft,
        	y: birdElement.offsetTop
        }
         // 游戏的状态
        var running = true;
        setInterval(function() {
        	if (running) {
        		// 移动背景让小鸟实现水平运动
	        	sky.x -= bird.speedX;
	        	game.style.backgroundPositionX = sky.x + 'px';
	        	// 实现小鸟的上下运动
	        	bird.speedY += 1;
	        	bird.y += bird.speedY;
	        	// 触碰上边界
	        	if (bird.y < 0) {
	        		running = false;
                    bird.y = 0;
	        	}
	        	// 触碰下边界
	        	if (bird.y + birdElement.offsetHeight > 600) {
	        		running = false;
	        		bird.y = 600 - birdElement.offsetHeight;
	        	}
	        	birdElement.style.top = bird.y + 'px';
        	}
        }, 30);
        //点击文档,小鸟向上运动
        document.onclick = function () {
        	bird.speedY = -10;
        }
        // 创建管道
        function createPipe(position) {
        	var pipe = {};
        	pipe.x = position;
        	pipe.uHeight = 200 + parseInt(Math.random() * 100);
        	pipe.dHeight = 600 - pipe.uHeight - 200;
        	pipe.dTop = pipe.uHeight + 200;
        	var uPipe = document.createElement('div');
        	uPipe.style.width = '52px';
        	uPipe.style.height = pipe.uHeight + 'px';
        	uPipe.style.background = 'url("images/bird/pipe2.png") no-repeat center bottom';
        	uPipe.style.position = 'absolute';
        	uPipe.style.top = '0px';
        	uPipe.style.left = pipe.x + 'px';
        	game.appendChild(uPipe);

        	var dPipe = document.createElement('div');
        	dPipe.style.width = '52px';
        	dPipe.style.height = pipe.uHeight + 'px';
        	dPipe.style.background = 'url("images/bird/pipe1.png") no-repeat center top';
        	dPipe.style.position = 'absolute';
        	dPipe.style.top = pipe.dTop + 'px';
        	dPipe.style.left = pipe.x + 'px';
        	game.appendChild(dPipe);
        	// 让管道运动起来
        	setInterval(function () {
        		if (running) {
        			pipe.x -= 2;
        			uPipe.style.left = pipe.x + 'px';
        			dPipe.style.left = pipe.x + 'px';
        			if (pipe.x < -52) {
        				pipe.x = 800;
        			}
        			var uCheck = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 && bird.y < pipe.uHeight;
                    var dCheck = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 && bird.y > pipe.uHeight + 200;
                    if (uCheck || dCheck) {
                        running = false;
                    }
        		}
        	}, 30);
        }
        createPipe(400);
        createPipe(600);
        createPipe(800);
        createPipe(1000);
    </script>
</body>
</html>

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下载后可以在webstrom中打开运行。 1. underscore中random产生随机数、without从数组中移除数据 2. 在游戏开发的时候,应该始终用面向对象的思想来做。有一个游戏管控大类(Game)。 3. 用一个json文件,保存我们需要的图片数据,方便在内存中创建每一张图片对象。 4. canvas的宽度和高度不能固定,根据电脑动态设置。 5. 使用ES6语法创建类。 6. FPS (每秒传输帧数(Frames Per Second)) 刷新率FNO 记录当前走过总帧数 7. 在每一次canvas绘制之前,都要进行清屏操作。ctx.clearRect(0, 0, canvas.width, canvas.height); 8. 资源加载。通过AJAX加载资源。静态资源类StaticResourceUtil.js用来加载本地图片。 9. 图片绘制,背景类BackGround.js,用来绘制背景。 通过图片的移动实现游戏的移动。 图片的移动即不断改变图片的X坐标,不断绘制。 图片的无缝移动:绘制图片的两倍,当全部图片宽度走完的时候,将图片X重新改为0. 背景图的速度设置,事物离得越近速度越快,越远速度越慢。 10. 取整、字符串转数字:parseInt(txt); 11. 管道绘制,管道类Pipe.js,用来绘制管道。 管道的高度、位置要随机生成。 但要有最小高度与最大高度。 需要一个管道数组来保存所有的管道。 当管道移出画布,需要将管道从管道数组中移除。 12. 用gameEnd来标志游戏是否结束。 13. 鸟的绘制,鸟类bird.js,用来绘制鸟。 根据帧率不断煽动翅膀。 14. 模拟重力加速度,利用dY,不断更新鸟的y值。导致鸟的下落越来越快。 15. 鸟的旋转。利用save和restore保存和恢复画布的状态。 利用translate旋转画布的x、y轴,旋转鸟恢复。 16. 鼠标点击事件,在鸟的上升过程中,固定值模拟阻力。 17. 边界检测。上边界ycanvas.height - 地板高度 - 鸟高度 18. 碰撞检测。利用管道进行检测。首先判断鸟有没有进到管道竖着的区域,再判断鸟是在空白天空区域还是管道区域,从而进行检测。 19. 小鸟死亡,在死亡的地方绘制鲜血。鲜血撒完游戏结束。 20. 分数类。根据几位判断分数显示基准线。判断小鸟是否飞到管道竖着的部分,如果飞过,则分数加一。 21. 求一个数字有几位。num.toString().length 22. 游戏初始化。设置背景及图片,点击开始后div隐藏。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值