首页 > 代码库 > java script 实现像素小鸟
java script 实现像素小鸟
用java script 实现像素小鸟
<html部分>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flybird</title>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/bird.css"/>
</head>
<body>
<div class="canvas">
<!--游戏开始-->
<div class="game_start">
<div class="head">
<img class=‘big_bird‘ src="http://www.mamicode.com/images/head.jpg"/>
<span class=‘small_bird‘></span>
</div>
<div class="btns">
<span class="start_btn"></span>
<span class="submit_btn"></span>
</div>
</div>
<!--移动条-->
<div class="slider">
<img src="http://www.mamicode.com/images/slider.jpg"/>
<img src="http://www.mamicode.com/images/slider.jpg"/>
</div>
<!--鸟-->
<div id="flybird" class="bird">
<img src="http://www.mamicode.com/images/bird0.png"/>
</div>
<!--管道-->
<div class="conduti_group">
</div>
<!--游戏结束-->
<div class="gameover">
<div class="overimg">
<img src="http://www.mamicode.com/images/game_over.jpg"/>
</div>
<div class="overmessage">
<span class=‘thisscore‘>1</span>
<span class=‘historyscore‘>2</span>
</div>
<div class="game_restart">
<img src="http://www.mamicode.com/images/ok.jpg"/>
</div>
</div>
<!--积分-->
<div id="scroing" class="scroing">
<img src="http://www.mamicode.com/images/0.jpg"/>
</div>
</div>
<script src="http://www.mamicode.com/js/game1.js" type="text/javascript">
</script>
</body>
</html>
<css部分>
/*背景画布*/
*{
cursor:pointer;
}
.canvas {
position: relative;
width: 343px;
height: 480px;
margin: auto;
overflow: hidden;
background: url(../images/bg.jpg) no-repeat;
}
/*游戏开始*/
.game_start {
display: block;
}
.head {
position: absolute;
top: 100px;
left: 60px;
animation: birdmove 2s infinite;
}
.head .small_bird {
display: inline-block;
width: 40px;
height: 30px;
position: absolute;
right: 0px;
top: 20px;
animation: birdbg 0.5s infinite;
}
/*btns 按钮组*/
.btns {
width: 100%;
text-align: center;
position: absolute;
top: 250px;
}
.btns .start_btn {
width: 85px;
height: 29px;
display: inline-block;
background: url(../images/start.jpg) no-repeat;
margin-left: 10px;
}
.btns .submit_btn {
width: 85px;
height: 29px;
display: inline-block;
background: url(../images/submit.jpg) no-repeat;
margin-left: 10px;
}
/*移动条*/
.slider {
width: 686px;
height: auto;
font-size: 0px;
position: absolute;
left: 0;
top: 423px;
animation: slidermove 5s infinite linear;
}
.slider img {
display: inline-block;
}
/*鸟*/
.bird {
position: absolute;
top: 250px;
left: 50px;
width: 50px;
height: 50px;
display: none;
}
/*管道*/
.conduitItem{
width: 62px;
height: 423px;
/*background: red;*/
/*opacity: 0.7;*/
position: absolute;
top: 0;
/*right: -100px;*/
}
.top_conduit{
position: absolute;
width: 100%;
top: 0;
background: url(../images/up_mod.png) ;
}
.top_conduit div{
background: url(../images/up_pipe.png) 0 bottom no-repeat;
}
.bottom_conduit{
position: absolute;
width: 100%;
bottom: 0;
background: url(../images/down_mod.png);
}
.bottom_conduit div{
background: url(../images/down_pipe.png) 0 top no-repeat;
}
/*游戏结束*/
.gameover {
display: none;
}
.gameover .overimg {
position: absolute;
left: 60px;
top: 100px;
animation: overmove 1s 1;
}
.gameover .overmessage {
background: url(../images/message.jpg) no-repeat;
width: 269px;
height: 135px;
position: absolute;
bottom: 200px;
left: 40px;
animation: messagemove 1s 1;
}
.gameover .overmessage .thisscore {
position: absolute;
right: 30px;
top: 35px;
font-size: 2.5em;
color: black;
}
.gameover .overmessage .historyscore {
position: absolute;
right: 30px;
top: 85px;
font-size: 2em;
color: red;
}
.gameover .game_restart {
position: absolute;
left: 120px;
top: 300px;
animation: okmove 1s 1;
}
/*积分*/
.scroing {
position: absolute;
text-align: center;
width: 100%;
top: 40px;
}
/*动画*/
@keyframes birdmove {
0% {
top: 100px;
}
50% {
top: 130px;
}
100% {
top: 100px;
}
}
@keyframes birdbg {
0% {
background: url(../images/bird0.png) no-repeat;
}
100% {
background: url(../images/bird1.png) no-repeat;
}
}
@keyframes slidermove {
0% {
left: 0
}
100% {
left: -343px;
}
}
/*gameover*/
@keyframes overmove {
0% {
top: 0;
}
100% {
top: 110px;
}
}
/*message*/
@keyframes messagemove {
0% {
bottom: 0px;
}
100% {
bottom: 210px;
}
}
/*ok*/
@keyframes okmove {
0% {
left: 0px;
}
100% {
left: 130px;
}
}
重点的来了
<js部分>
//获取
var bird = document.getElementById(‘flybird‘);
var bird_ = document.querySelector(‘.bird img‘);
var game_start = document.querySelector(‘.game_start‘);
var game_restart = document.querySelector(‘.game_restart‘);
var gameover_ = document.querySelector(‘.gameover‘);
var thisscore = document.querySelector(‘.thisscore‘);
var historyscore_ = document.querySelector(‘.historyscore‘);
var speed = 0,
speedmax = 8;
var score = 0;
var downtimer = null; //向上定时器
var uptimer = null; //向下定时器
var conduittimer = null //管道时间
var floortesttimer = null;
var crashtesttimer = null;
var isgame = true;
//鸟向下移动
function down() {
speed += 1;
if(speed >= speedmax) {
speed = speedmax;
}
bird_.src = http://www.mamicode.com/‘images/down_bird1.png‘;
bird.style.top = bird.offsetTop + speed + ‘px‘;
floortest();
}
//小鸟上升
function up() {
speed -= 1;
if(speed <= 0) {
speed = 0;
clearInterval(uptimer);
downtimer = setInterval(down, 30);
}
bird_.src = http://www.mamicode.com/‘images/up_bird1.png‘;
bird.style.top = bird.offsetTop - speed + ‘px‘;
}
//鸟跳动的函数
function birdjump() {
speed = speedmax;
if(isgame) {
clearInterval(uptimer);
clearInterval(downtimer); //先清除向下降落的定时器
uptimer = setInterval(up, 30)
}
}
//触底碰撞检测
function floortest() {
var t1 = bird.offsetTop;
// console.log(t1);
var b1 = t1 + bird.offsetHeight;
if(t1 >= 396) {
// 游戏结束
gameover();
}
}
//碰撞检测
function crashtest(obj, objpar) {
// 鸟
var l1 = bird.offsetLeft;
var r1 = l1 + bird.offsetWidth;
var t1 = bird.offsetTop;
var b1 = t1 + bird.offsetHeight;
// 管道
var l2 = objpar.offsetLeft;
var r2 = l2 + obj.offsetWidth;
var t2 = obj.offsetTop;
var b2 = t2 + obj.offsetHeight;
if(r1 > l2 && l1 < r2 && b1 > t2 && t1 < b2) {
gameover();
}
}
//清除所有定时器
function cleartimer() {
var timer = setInterval(function() {}, 30);
for(var i = 0; i < timer; i++) {
clearInterval(i);
}
}
//游戏结束
function gameover() {
isgame = false;
clearInterval(conduittimer);
clearInterval(downtimer);
clearInterval(crashtesttimer);
cleartimer();
bird.style.webkitTransition = "all 0.5s linear";
bird.style.top = ‘397px‘;
bird_.src = http://www.mamicode.com/‘images/down_bird1.png‘;
// document.removeEventListener(‘click‘, birdjump, false);
document.querySelector(‘.gameover‘).style.display = ‘block‘;
var historyscore=localStorage.getItem(‘maxscore‘);
if(historyscore==null||historyscore<score){
localStorage.setItem(‘maxscore‘,score);
historyscore=score;
}
historyscore_.innerHTML=historyscore;
}
game_restart.onclick = function() {
canvas.innerHTML = history.go(‘0‘);
}
//随机函数
function rand(min, max) {
return parseInt(Math.random() * (max - min)) + min;
}
var canvas = document.querySelector(‘.canvas‘);
function scorefn(score) {
var scorethis = score.toString();
// scorethis=scorethis.split(‘‘);
var scorediv = document.querySelector(‘#scroing‘);
scorediv.innerHTML = ‘‘;
for(var i = 0; i < scorethis.length; i++) {
var img = document.createElement(‘img‘);
img.src = http://www.mamicode.com/‘images/‘ + scorethis[i] + ‘.jpg‘;
scorediv.appendChild(img);
}
// function teo(){
// var scorethis=score.toString();
// scorethis=scorethis.split();
// var scorediv=document.querySelector(‘#scroing‘);
// var contentimg
// }
// var scoreimg=document.querySelector(‘#scroing img‘);
}
//创建管道
function createconduit() {
var conduitgroup = document.querySelector(‘.conduti_group‘);
var conduitItem = document.createElement(‘div‘);
conduitItem.className = ‘conduitItem‘;
conduitgroup.appendChild(conduitItem);
var topheight = rand(60, 213);
var bottomheight = 273 - topheight;
conduitItem.innerHTML = "<div class=‘top_conduit‘>" +
"<div style=‘height:" + topheight + "px;‘></div>" +
"</div>" +
"<div class=‘bottom_conduit‘>" +
"<div style=‘height:" + bottomheight + "px;‘></div>" +
"</div>";
var maxwidth = canvas.offsetWidth;
conduitItem.style.left = maxwidth + ‘px‘;
conduitItem.toscore = true;
conduitItem.movetimer = setInterval(function() {
maxwidth -= 3;
conduitItem.style.left = maxwidth + ‘px‘;
if(maxwidth <= -70) {
clearInterval(conduitItem.movetimer);
conduitgroup.removeChild(conduitItem);
}
// 计算积分
if(maxwidth <= 50 && conduitItem.toscore) {
score++;
scorefn(score);
thisscore.innerHTML = score;
conduitItem.toscore = false;
}
}, 30)
}
//游戏初始化
function init() {
var start_btn = document.querySelector(‘.start_btn‘);
var game_start = document.querySelector(‘.game_start‘);
// 添加点击事件 开始按钮
start_btn.onclick = function() {
game_start.style.display = ‘none‘;
bird.style.display = ‘block‘
//创建管道
conduittimer = setInterval(createconduit, 2000);
//碰撞检测
crashtesttimer = setInterval(function() {
var conduitItem = document.querySelector(‘.conduti_group‘).querySelectorAll(‘.conduitItem‘);
for(var i = 0; i < conduitItem.length; i++) {
var top_conduit = conduitItem[i].querySelector(‘.top_conduit‘);
var bottom_conduit = conduitItem[i].querySelector(‘.bottom_conduit‘);
crashtest(bottom_conduit, conduitItem[i]);
crashtest(top_conduit, conduitItem[i]);
}
}, 1000 / 60)
// 鸟 降落
downtimer = setInterval(down, 30);
document.addEventListener(‘click‘, birdjump, false);
}
}
init();
java script 实现像素小鸟