JavaScript像素鸟案例

效果图：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}#game {width: 800px;height: 600px;background: url('./images/sky.png');position: relative;overflow: hidden;}#bird {width: 34px;height: 25px;background: url('./images/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 birdEle = document.getElementById('bird');// 初始化背景图的值var sky = {x: 0}// 初始bird 的值var bird = {speedX: 5,speedY: 0,x: birdEle.offsetLeft,y: birdEle.offsetTop}// 游戏的状态var running = true;setInterval(function () {if (running) {// 移动背景让小鸟实现水平运动//backgroundPositionX 属性设置背景图像的水平位置。sky.x -= 5;game.style.backgroundPositionX = sky.x + 'px';// 实现小鸟的向下加速运动  每次增加的距离1 2 3 4 5 6……bird.speedY += 1;bird.y += bird.speedY;if (bird.y < 0) {running = false;bird.y = 0;}if (bird.y + birdEle.offsetHeight > 600) {running = false;bird.y = 600 - birdEle.offsetHeight;console.log(bird.y)}birdEle.style.top = bird.y + 'px';}//可以设置定时器的间隔来设置难度}, 30)// 点击文档的时候实现小鸟向上运动document.onclick = function () {bird.speedY = -10;//每点一次走-9 -8 -7 -6 …… 0  1 2}// 创建管道function createPipe(position) {var pipe = {};pipe.x = position;//上管道的高度在200-300之间,两个管道间距200pipe.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';//position：背景图片的定位。水平位置和垂直位置。uPipe.style.background = 'url("./images/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.dHeight + 'px';dPipe.style.background = 'url("./images/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;}//撞到上下管道的情况//bird.x + 34 > pipe.x小鸟进入管道  bird.x < pipe.x + 52没有出来管道  //bird.y < pipe.uHeight;小鸟的高度位置在上管道里面//bird.y < pipe.uHeight;小鸟的高度位置在下管道里面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>

里面的图片：

birds.png：

sky.png：

pipe1.png：

pipe2.png：

JavaScript像素鸟案例相关推荐

html5实现像素鸟,有趣的Axure案例：像素鸟游戏的设计
原标题:有趣的Axure案例:像素鸟游戏的设计这是作者第三次发布有关axure游戏的内容了,相比较前两次而言,此次的设计更加完善,难度相应的也要高很多.游戏基本上已经趋于完整,加入了game ove ...
前端案例：像素鸟小游戏（js+dom操作，完整代码，附案例素材）
目录一.案例效果二.实现思路三.完整代码+详细注释四.案例素材一.案例效果二.实现思路创建游戏背景板和小鸟,并分别设置相对定位与绝对定位: 初始化背景图的位置: 初始化小鸟的位置: 设置 ...
网页JavaScript特效之flappy bird（像素鸟）
今天用JavaScript做了一个小小的像素鸟 ,256行代码实现flappybird,虽然有很多bug,废话不多说,上源码 <!DOCTYPE html> <html>< ...
原生JS写《像素鸟》的小游戏（下落的小鸟）
相信大家都玩过<像素鸟>(又名<下落的小鸟>),今天就教大家用原生JaveScript 实现像素鸟的游戏.还在为得不到高分而苦恼吗?今天学会了,游戏难易自己控制!!! 首先明白 ...
原生JS：100行js代码带你实现【像素鸟】小游戏（完整代码+素材图片）
系列文章目录 JS:经典小游戏:像素鸟 JS:经典小游戏:贪吃蛇 JS:经典小游戏:扫雷目录系列文章目录像素鸟 1.游戏介绍 2.代码分析 3.代码实现 3.1 随机生成水管 3.2 当水管超过 ...
使用CocosCreator+JS 完成Flappybrid(像素鸟)小游戏
使用CocosCreator+JS 完成Flappybrid(像素鸟)小游戏前言这是我在刚开始学Cocos做游戏时做的第一个小游戏.当时做了两个版本数学版和碰撞组件版. 环境开发工具: Coco ...
cocoscreator练手入门 Flappy Bird 像素鸟项目（1）
好久没用cocoscreator,有点手生,做个小项目练练手. 项目已经上传至github,地址: https://github.com/ccffee-jc/CocosCreatorDemo 也可以在 ...
经典《像素鸟》游戏，难道你不想自己动手开发一个嘛(附源码免费下载)
经典的飞机大战游戏,难道你不想自己动手开发一个嘛! 语言:Java 代码的编译软件:Eclipse 如果你用的也是eclipse的话直接导入文件就可以 ,如果不是的话,自己建一个项目,将代码cop ...
【源码+图片素材+详细教程】Java游戏开发_Java开发经典游戏飞翔的小鸟_飞扬的小鸟_Java游戏项目Flappy Bird像素鸟游戏_Java课程设计项目
课程目标: 1.通过本课程的学习巩固Java的相关基础知识,例如循环判断,数组和集合的使用,对象的继承,接口的实现,窗口的创建,事件监听,图形绘制. 2.完成小鸟的移动,管道自动生成.碰撞死亡,计分系 ...

JavaScript像素鸟案例

JavaScript像素鸟案例相关推荐

最新文章

热门文章