专栏中心

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

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

发布人：only1 时间：2020-10-23 来源：工程师

加入技术交流群
- 扫码加入
  和技术大咖面对面交流
  海量资料库查询

发布文章

　html：

　　[html]viewplaincopy

　　<!DOCTYPEhtml>

　　<html>

　　<headlang="en">

　　<metacharset="UTF-8">

　　</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。

专栏文章内容及配图由作者撰写发布，仅供工程师学习之用，如有侵权或者其他违规问题，请联系本站处理。联系我们

关键词：