博客专栏

EEPW首页 > 博客 > 如何用html5+js极速赛车网站制作源码搭建demo

如何用html5+js极速赛车网站制作源码搭建demo

发布人:only1 时间:2020-10-23 来源:工程师 发布文章

 html

 

  [html]viewplaincopy

 

  <!DOCTYPEhtml>

 

  <html>

 

  <headlang="en">

 

  <metacharset="UTF-8">

 

  <title></title>

 

  </head>

 

  <style>

 

  body{

 

  text-align:center;

 

  }

 

  #mycar{

 

  border:1pxsolidblack;

 

  }

 

  </style>

 

  <body>

 

  <canvasid="mycar"width="300px"height="500px"></canvas>

 

  <divid="scored">得分:0</div>

 

  <scriptsrc="js/mycar.js"></script>

 

  </body>

 

  </html>

 

  js

 

  [javascript]viewplaincopy

 

  /**

 

  *Createdbyzqcon2014/12/3.

 

  */

 

  functioncreateCar(speed,cxt,dom){

 

  varo=newObject();

 

  o.speed=speed;//落下速度

 

  o.cxt=cxt;//画布

 

  o.cell=100;//赛车宽度

 

  o.curdir={'x':100,'y':400};//红色赛车初始位置

 

  o.hinder=[[],[],[]];//障碍物位置

 

  o.scroll=0;//下滑距离

 

  o.scored=0;//分数

 

  o.init=function(){

 

  o.cxt.fillStyle='red';

 

  o.cxt.fillRect(o.curdir.x,o.curdir.y,o.cell,o.cell);

 

  document.onkeydown=function(e){//按键事件

 

  if(e.keyCode===37&&o.curdir.x>0){

 

  o.moveCar('left');

 

  }

 

  elseif(e.keyCode===39&&o.curdir.x<200){

 

  o.moveCar('right');

 

  }

 

  elseif(e.keyCode===40){//长按加速

 

  o.speed=speed/3;

 

  }

 

  };

 

  document.onkeyup=function(){

 

  o.speed=speed;

 

  };

 

  o.setHinder();

 

  o.startCar();

 

  };

 

  o.setHinder=function(){//生成障碍物

 

  varrand1=Math.ceil(Math.random()*1000)%2,

 

  rand2=Math.ceil(Math.random()*1000)%2,

 

  rand3=Math.ceil(Math.random()*1000)%2;

 

  o.hinder[0].push({'x':0,'y':0,'hinder':rand1});//hinder表示是否有障碍物

 

  o.hinder[1].push({'x':100,'y':0,'hinder':rand2});

 

  o.hinder[2].push({'x':200,'y':0,'hinder':rand1+rand2==2?0:rand3});

 

  for(vari=0;i<o.hinder.length;i++){

 

  varlast=o.hinder[i][o.hinder[i].length-1];

 

  if(last.hinder===1){//有障碍物

 

  o.cxt.fillStyle='black';

 

  o.cxt.fillRect(last.x,last.y,o.cell,o.cell);

 

  }

 

  }

 

  };

 

  o.downHinder=function(){//控制障碍物下降

 

  vari=0,

 

  j=0,

 

  cur=null,

 

  old=null;

 

  for(;i<o.hinder[0].length;i++){

 

  for(j=0;j<3;j++){

 

  cur=o.hinder[j][i];

 

  if(cur.hinder===1){

 

  old=o.hinder[j][i];

 

  o.cxt.clearRect(old.x,old.y,o.cell,o.cell);//清除上一帧

 

  o.hinder[j][i].y=o.hinder[j][i].y+5;

 

  cur=o.hinder[j][i];

 

  o.cxt.fillStyle='black';

 

  o.cxt.fillRect(cur.x,cur.y,o.cell,o.cell);

 

  }

 

  else

 

  o.hinder[j][i].y=o.hinder[j][i].y+5;

 

  }

 

  }

 

  };

 

  o.moveCar=function(dir){

 

  o.cxt.fillStyle='red';

 

  o.cxt.clearRect(o.curdir.x,o.curdir.y,o.cell,o.cell);

 

  o.curdir.x=(dir==='left'?o.curdir.x-o.cell:o.curdir.x+o.cell);

 

  o.cxt.fillRect(o.curdir.x,o.curdir.y,o.cell,o.cell);

 

  };

 

  o.clearHander=function(){

 

  for(vari=0;i<o.hinder.length;i++){

 

  if(o.hinder[i][0].y>=500){//超过画布最低位置,清除障碍物

 

  o.counterScorde();//计分

 

  varover=o.hinder[i].shift();

 

  if(over.hinder===1)

 

  o.cxt.clearRect(over.x,over.y,o.cell,o.cell);

 

  }

 

  }

 

  };

 

  o.counterScorde=function(){

 

  o.scored=o.scored+Math.ceil(100/o.speed);

 

  dom.innerHTML='得分:'+o.scored;

 

  };

 

  o.startCar=function(){

 

  setTimeout(function(){

 

  o.downHinder();//落下障碍物

 

  o.clearHander();//清除已通过的障碍物

 

  if(o.hinder[o.curdir.x/100][0].hinder===1&&o.hinder[o.curdir.x/100][0].y+100>=o.curdir.y){

 

  alert('你挂了');

 

  return;

 

  }

 

  o.scroll=o.scroll+5;//单位下滑速度

 

  if(o.scroll%300===0)

 

  o.setHinder();//设置障碍物

 

  o.startCar();

 

  },o.speed);

 

  };

 

  returno;

 

  }

 

  varc=document.getElementById('mycar');

 

  varscored=document.getElementById('scored');

 

  varcxt=c.getContext('2d');

 

  varcar=createCar(30,cxt,scored);

 

  car.init();

 

  以上就是关于扣丁学堂HTML5视频教程之用html5+js极速赛车网站制作源码搭建demo的详细介绍,最后想要工作不累就要不断的提升自己的技能,请关注扣丁学堂官网、微信等平台,扣丁学堂IT职业在线学习教育平台为您提供权威的HTML5培训视频教程系统,通过千锋扣丁学堂金牌讲师在线录制的第一套自适应HTML5在线视频课程系统,让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群:751662650

*博客内容为网友个人发布,仅代表博主个人观点,如有侵权请联系工作人员删除。



关键词:

相关推荐

技术专区

关闭