JS小游戏———flappybird

JS代码如下：

/**

• Created by ASUS on 2019/6/24.
  */
  //创建地图
  var Map;
  function map() {
  this.map=null;
  this.createMap=function () {
  if(this.map == null){
  this.map = document.createElement(“div”);
  this.map.className=“map”;
  var back=document.createElement(“img”);
  back.className=“back”;
  back.style.position=“absolute”;
  back.src="./img/bg.jpg";
  this.map.appendChild(back);
  document.body.appendChild(this.map);
  }
  }
  //地图移动
  this.mapmove=function () {
  var line = document.createElement(“img”);
  line.className=“line”;
  Map.map.appendChild(line);
  var awidth = window.screen.availWidth;
  var aheight = window.screen.availHeight;
  line.style.width=awidth+“px”;
  line.style.height=aheight+“px”;
  line.style.left=awidth+“px”;
  line.src="./img/bg.jpg";
  var temp=0;
  setInterval(function(){
  var we = document.getElementsByClassName(“map”)[0];
  temp–;
  we.style.left=temp+“px”;
  if (temp <= (-awidth)){
  we.style.left = 0+“px”;
  temp=0;
  }
  },1)
  }
  }
  var Start;
  function start() {
  this.start=null;
  // this.title=[["./img/bird0.png",“title”,top,left,null],["./img/bird0.png",“bird”,top,left,null],
  // ["./img/bird0.png",“sta”,top,left,null],["./img/bird0.png",“submit”,top,left,null]];
  this.createStart=function () {
  if(this.startnull){
  this.start = document.createElement(“div”);
  this.start.className=“start”;
  Map.map.appendChild(this.start);
  //游戏名
  var head =document.createElement(“img”);
  head.className=“head”;
  this.start.appendChild(head);
  head.src="./img/head.jpg";
  //图标
  var pic = document.createElement(“span”);
  pic.className=“pic”;
  this.start.appendChild(pic);
  pic.src="./img/bird0.jpg";
  //开始按钮
  var begin = document.createElement(“img”);
  begin.className=“begin”;
  begin.src="./images/start.jpg";
  Map.map.appendChild(begin);
  begin.addEventListener(“click”,removething);
  function removething() {
  Start.start.remove();
  begin.remove();
  Map.mapmove();
  }
  }
  }
  //游戏开始后创建游戏角色
  this.createBird=function(){
  var begin=document.getElementsByClassName(“begin”)[0];
  begin.addEventListener(“click”,niao);
  function niao() {
  console.log(Map.map);
  var bird=document.createElement(“span”);
  var birddiv=document.createElement(“div”);
  document.body.appendChild(birddiv);
  birddiv.appendChild(bird);
  // birddiv.style.right = (awidth - 80) + “px”;
  // birddiv.style.bottom = (awidth - birddiv.style.top) + “px”;
  bird.className=“birdchild”;
  birddiv.className=“birddiv birdfirst”;
  var num = document.createElement(“img”);
  document.body.appendChild(num);
  num.className=“num”;
  num.src="./images/3.jpg";
  // var count = 3;
  // var dao = setInterval(function（）｛
  //
  // ｝，1)
  var count = 3;
  var time = setInterval(function () {
  count–;
  console.log(num);
  num.src="./images/"+count+".jpg";
  console.log(num.src);
  if(count<=0){
  var i = document.createElement(“i”);
  document.body.appendChild(i);
  i.id = “wq”;
  i.className=“symbol iconfont”;
  i.innerHTML=“?”
  num.remove();
  clearInterval(time);
  //点击开始
  i.οnclick=function () {
  i.remove();
  Birdstatus = new birdstatus();
  Birdstatus.birdup();
  var pipeTime = setInterval(function (){
  var birddiv=document.getElementsByClassName(“birddiv”)[0];
  var Pipe = new pipe();
  Pipe.createpipe();
  Pipe.pipemove();
  var awidth= window.screen.availWidth;
  var aheight = window.screen.availHeight;
  var birdtop = parseInt(birddiv.style.top);
  var birdheight = parseInt(birddiv.style.height);
  var birdwidth = parseInt(birddiv.style.width);
  var birdright = awidth-parseInt(birddiv.style.left);
  var birdbottom = parseInt(birddiv.style.bottom);
  var Pipewidth = parseInt(Pipe.bottompipe.style.width);
  var Pipebottomheight = parseInt(Pipe.bottompipe.style.height);
  var Pipetopheight = parseInt(Pipe.toppipe.style.height);
  var Piperight = parseInt(Pipe.bottompipe.style.right);
  //判断小鸟移动是否与管道碰撞
  if(
  (
  ((birdtop-birdheight)Pipetopheight)&&(birdright(Piperight+birdwidth))
  )||
  (
  ((birdright+birdwidth)Piperight)&&(birdtopPipeheight)
  )||
  (
  (birdright(Piperight+birdwidth))&&(birdbottomPipebottomheight)
  )||
  (
  ((birdright+birdwidth)Piperight)&&(birdbottomPipebottomheight)
  )
  ){
  console.log(1);
  //如若碰撞，结束游戏关闭事件
  Gameover = new gameover();
  Gameover.showover();
  document.body.οnclick=null;
  clearInterval(pipeTime);
  }
  },1500)
  // var before = new Date().getTime();
  // loop();
  // function loop(){
  // console.log(1);
  /setTimeout(function (){
  window.requestAnimationFrame(loop);
  },1000);/
  //根据日期的时间计算1000ms
  // var now=new Date().getTime();
  // if(now-before>=1500)
  // {
  // var birddiv=document.getElementsByClassName(“birddiv”)[0];
  // console.log(birddiv.style);
  // var Pipe = new pipe();
  // Pipe.createpipe();
  // Pipe.pipemove();
  // // var birdtop = parseInt(birddiv.style.top);
  // // var birdheight = parseInt(birddiv.style.height);
  // // var birdwidth = parseInt(birddiv.style.width);
  // // var birdleft = parseInt(birddiv.style.lef);
  // // var birdbottom = parseInt(birddiv.style.bottom);
  // // var Pipewidth = parseInt(Pipe.bottompipe.style.width);
  // // var Pipebottomheight = parseInt(Pipe.bottompipe.style.height);
  // // var Pipetopheight = parseInt(Pipe.toppipe.style.height);
  // // var Pipeleft = parseInt(Pipe.bottompipe.style.left);
  // // if(
  // // (
  // // ((birdtop-birdheight)Pipetopheight)&&((birdleft+birdwidth)Pipeleft)
  // // )||
  // // (
  // // (birdleft == (Pipeleft + Pipewidth))&&(birdtopPipeheight)
  // // )||
  // // (
  // // ((birdleft + birdwidth) Pipeleft)&&(birdbottomPipebottomheight)
  // // )||
  // // (
  // // (birdleft == (Pipeleft + Pipewidth))&&(birdbottom==Pipebottomheight)
  // // )
  // // ){
  // // Gameover = new gameover();
  // // Gameover.showover();
  // // document.body.οnclick=null;
  // // }
  // }
  // now=null;
  // window.requestAnimationFrame(loop);
  }
  }

           },1000);
       }
   }
  

  }
  var Birdstatus;
  function birdstatus() {
  var awidth = window.screen.availWidth;
  var aheight = window.screen.availHeight;
  var top=280;
  var w=0;
  var idea = false;
  var time = setInterval(function(){
  var birddiv = document.getElementsByClassName(“birddiv”)[0];
  birddiv.className=“birddiv birddown”;
  w+=0.1;
  top += w;
  birddiv.style.top = top +“px”;
  if(top>=aheight-108){
  birddiv.style.top = (aheight-108) +“px”;
  Gameover = new gameover();
  Gameover.showover();
  document.body.οnclick=null;
  clearInterval(time);
  }
  },10)
  //this.createnewbird = function (status) {
  // console.log(window.status);
  // if(window.status){
  // this.w = document.createElement(“img”);
  // this.wdiv = document.createElement(“div”);
  // this.w.className = “w”;
  // this.wdiv.className=“wdiv”;
  // this.wdiv.appendChild(this.w);
  // document.body.appendChild(this.wdiv);
  // }
  //}
  this.birdup = function () {
  //点击小鸟上升
  document.body.onclick = function () {
  // clearInterval(time);
  w=0;
  var birddiv = document.getElementsByClassName(“birddiv”)[0];
  birddiv.className=“birddiv birdup”;
  top -= 35;
  birddiv.style.top = top +“px”;
  if(top<=35){
  top=35;
  }
  }
  // document.body.ontouchend = function () {
  var birddiv = document.getElementsByClassName(“birddiv”)[0];
  birddiv.className=“birddiv”;
  // time = setInterval(function(){
  // var birddiv = document.getElementsByClassName(“birddiv”)[0];
  // birddiv.className=“birddiv birddown”;
  // top += 3;
  // birddiv.style.top = top +“px”;
  // },1000)
  // }
  }
  }
  var Pipe;
  function pipe(){
  this.toppipe = undefined;
  this.bottompipe = undefined;
  var awidth = window.screen.availWidth;
  var aheight = window.screen.availHeight;
  var self = this;
  //创建管道
  this.createpipe=function(){
  var max = parseInt(aheight0.45);
  var kong = parseInt(aheight0.2);
  var topheight = parseInt( Math.random() * max);
  var bottomheight =(aheight - topheight - kong);
  self.toppipe = document.createElement(“div”);
  var toppipe = self.toppipe;
  toppipe.className=“toppipe”;
  toppipe.style.height=topheight+“px”;
  toppipe.style.width=“55px”;
  toppipe.style.right=“0px”;
  toppipe.style.top=“0px”;
  toppipe.style.position=“absolute”;
  toppipe.style.backgroundImage = ‘url(./img/obs.png)’;
  toppipe.style.backgroundPosition=" right bottom";
  document.body.appendChild(toppipe);
  self.bottompipe = document.createElement(“div”);
  var bottompipe = self.bottompipe;
  bottompipe.className=“bottompipe”;
  bottompipe.style.height=bottomheight+“px”;
  bottompipe.style.width=“55px”;
  bottompipe.style.right=“0px”;
  bottompipe.style.bottom=“0px”;
  bottompipe.style.position=“absolute”;
  bottompipe.style.backgroundImage = ‘url(./img/obs.png)’;
  bottompipe.style.backgroundPosition=“left top”;
  document.body.appendChild(bottompipe);
  }
  //管道移动
  this.pipemove=function () {
  var temp=0;
  var pipetime = setInterval(function(){
  var bottompipe = self.bottompipe;
  var toppipe = self.toppipe;
  temp++;
  toppipe.style.right=temp+“px”;
  bottompipe.style.right=temp+“px”;
  if (temp >= awidth){
  toppipe.remove();
  bottompipe.remove();
  temp=0;
  clearInterval(pipetime);
  }
  },8)
  }
  }
  var Gameover;
  function gameover (){
  var awidth = window.screen.availWidth;
  var aheight = window.screen.availHeight;
  this.over = null;
  this.showover = function(){
  if(this.over ==null){
  var overimg = document.createElement(“img”);
  overimg.src="./images/game_over.jpg";
  document.body.appendChild(overimg);
  overimg.className=“overimg”;
  overimg.style.left=(awidth/2 - 100)+“px”;
  overimg.style.top=(aheight/2 - 20)+“px”;
  overimg.style.zIndex=“99”;
  }

   }
  

  }
  window.οnlοad=function () {
  //实例化对象
  var status = false;
  Map = new map();
  Map.createMap();
  Start = new start();
  Start.createStart();
  Start.createBird();
  }
  CSS样式（顺带练习了CSS动画样式）：
  包含帧动画、translation、transform
  {
  margin: 0;
  padding: 0;
  }
  body,html{
  height:100%;
  width:100%;
  overflow: hidden;
  }
  .map{
  float:left;
  position: relative;
  width: 100%;
  height:100%;
  margin-left: 0;
  }
  /@keyframes mapmove {/
  / 0%{/
  / left:0;/
  / }/
  / 100%{/
  / left:-360px;/
  / }/
  /}*/
  .back{
  height:100%;
  width:100%;
  }
  .bird{
  top:50px;
  left:120px;
  }
  .start{
  position: absolute;
  top: 130px;
  left: 70px;
  animation: birdmove 1.5s infinite;
  }
  @keyframes birdmove {
  0% {
  top: 120px;
  }
  50% {
  top: 140px;
  }
  100% {
  top: 120px;
  }
  }
  .pic{
  display: inline-block;
  width: 40px;
  height: 30px;
  position: absolute;
  right: 0px;
  top: 20px;
  animation: birdbg 0.4s infinite;
  }
  @keyframes birdbg {
  0% {
  background: url(…/images/bird0.png) no-repeat;
  }
  100% {
  background: url(…/images/bird1.png) no-repeat;
  }
  }
  .begin{
  text-align: center;
  position: absolute;
  top: 250px;
  display: inline-block;
  width: 120px;
  height: 40px;
  left:110px;
  margin-left: 10px;
  animation:beginmove 1.5s infinite;
  }
  @keyframes beginmove{
  0% {
  top: 240px;
  }
  50% {
  top: 260px;
  }
  100% {
  top: 240px;
  }
  }
  .line{
  position: absolute;
  float: left;
  }
  .symbol{
  font-size: 50px;
  width:50px;
  height:50px;
  position:absolute;
  left:80px;
  top:310px;
  }
  .num{
  width:28px;
  height:39px;
  position:absolute;
  left:166px;
  top:150px;
  }
  .birdchild {
  border: none;
  width: 40px;
  height: 30px;
  position: absolute;
  left:0;
  top:0;
  animation: birdbg 0.3s infinite;
  transition: top 0.3s linear;
  }
  .birdup{
  animation: birdup 0.05s forwards;
  }
  @keyframes birdup {
  0%{
  transform: rotateZ(0deg);
  }
  100%{
  transform:rotateZ(-45deg)
  }
  }
  .birddown{
  animation: birddown 1s forwards;
  }
  @keyframes birddown {
  0%{
  transform: rotateZ(0deg);
  }
  100%{
  transform:rotateZ(90deg)
  }
  }
  .birddiv{
  position:relative;
  width: 40px;
  height: 30px;
  left:80px;
  top: 280px;
  }
  .birdfirst{
  animation: birdfloat 0.8s infinite;
  }
  @keyframes birdfloat {
  0% {
  top: 270px;
  }
  50% {
  top: 290px;
  }
  100% {
  top: 270px;
  }
  }
  .toppipe{
  position: absolute;
  background: url("…/img/obs.png");
  background-position-x: right;
  background-position-y: bottom;
  right:0;
  top:0;
  width:55px;
  }
  .bottompipe{
  position: absolute;
  background: url("…/img/obs.png");
  background-position-x: left;
  background-position-y: top;
  right:0;
  bottom:0;
  width:55px;
  }
  .overimg{
  position:absolute;
  }