大家好，今天小编来为大家解答99源码分享网站这个问题，39源码网很多人还不知道，现在让我们一起来看看吧！
前言
JavaScript是最好的语言之一，尤其是在前端开发中。在本文中，您将找到7个为初学者提供免费源代码的最佳javascript项目。
手把手教你7个有趣的JavaScript项目-上「附源码」（本篇）
手把手教你7个有趣的JavaScript项目-下「附源码」
1.使用JavaScript创建待办事项列表应用
如果您是javascript语言的初学者，则待办事项列表应用程序是最好的和最容易的应用程序之一，如果您使用HTMLCSS和一点点的javascript，则可以创建此简单的待办事项列表应用程序，您将找到源代码这个js项目的底部。
<!DOCTYPEhtml>\n<htmllang=&34;>\n<head>\n<metacharset=&34;/>\n<metaname=&34;content=&34;/>\n<metahttp-equiv=&34;content=&34;/>\n<title>创建待办事项列表应用</title>\n<styletype=&34;>\n$primary:cdcdcd;\n$secondary:f1f1f1;\nmargin-top:2rem;\n}\n\n/*PENSTYLES*/\n.tasker{\nmax-width:400px;\nmargin:0auto;\n.error{\ndisplay:none;\nbackground:rgba(237,28,36,0.7);\ncolor:fff;\n}\n\nli,\n.error,\nbutton,\ninput{\n@extend%reset;\nfont:18px/1.25emHelvetica,Arial,Sans-serif;\n}\n}\n\n.tasker-header{\ndisplay:inline-flex;\nbackground:$primary;\njustify-content:space-between;\nwidth:100%;\ninput,\nbutton{\ncolor:ed1c24;\n}\n}\n}\n}\n</style>\n</head>\n<body>\n<!–PENCODE–>\n<divid=&34;class=&34;>\n<divid=&34;class=&34;>Pleaseenteratask</div>\n<divid=&34;class=&34;>\n<inputtype=&34;id=&34;placeholder=&34;>\n<buttonid=&34;><iclass=&34;></i>\n</button>\n</div>\n<divclass=&34;>\n<ulid=&34;></ul>\n</div>\n</div>\n<!–ENDPENCODE–>\n<scripttype=&34;>\n(function(){\n&39;;\nvartasker={\ninit:function(){\nthis.cacheDom();\nthis.bindEvents();\nthis.evalTasklist();\n},\ncacheDom:function(){\nthis.taskInput=document.getElementById(&34;);\nthis.addBtn=document.getElementById(&34;);\nthis.tasklist=document.getElementById(&34;);\nthis.tasklistChildren=this.tasklist.children;\nthis.errorMessage=document.getElementById(&34;);\n},\nbindEvents:function(){\nthis.addBtn.onclick=this.addTask.bind(this);\nthis.taskInput.onkeypress=this.enterKey.bind(this);\n},\nevalTasklist:function(){\nvari,chkBox,delBtn;\n//BINDCLICKEVENTSTOELEMENTS\nfor(i=0;i<this.tasklistChildren.length;i+=1){\n//ADDCLICKEVENTTOCHECKBOXES\nchkBox=this.tasklistChildren[i].getElementsByTagName(&34;)[0];\nchkBox.onclick=this.completeTask.bind(this,this.tasklistChildren[i],chkBox);\n//ADDCLICKEVENTTODELETEBUTTON\ndelBtn=this.tasklistChildren[i].getElementsByTagName(&34;)[0];\ndelBtn.onclick=this.delTask.bind(this,i);\n}\n},\nrender:function(){\nvartaskLi,taskChkbx,taskVal,taskBtn,taskTrsh;\n//BUILDHTML\ntaskLi=document.createElement(&34;);\ntaskLi.setAttribute(&34;,&34;);\n//CHECKBOX\ntaskChkbx=document.createElement(&34;);\ntaskChkbx.setAttribute(&34;,&34;);\n//USERTASK\ntaskVal=document.createTextNode(this.taskInput.value);\n//DELETEBUTTON\ntaskBtn=document.createElement(&34;);\n//TRASHICON\ntaskTrsh=document.createElement(&34;);\ntaskTrsh.setAttribute(&34;,&34;);\n//INSTERTTRASHCANINTOBUTTON\ntaskBtn.appendChild(taskTrsh);\n\n//APPENDELEMENTSTOTASKLI\ntaskLi.appendChild(taskChkbx);\ntaskLi.appendChild(taskVal);\ntaskLi.appendChild(taskBtn);\n\n//ADDTASKTOTASKLIST\nthis.tasklist.appendChild(taskLi);\n\n},\ncompleteTask:function(i,chkBox){\nif(chkBox.checked){\ni.className=&34;;\n}else{\nthis.incompleteTask(i);\n}\n},\nincompleteTask:function(i){\ni.className=&34;;\n},\nenterKey:function(event){\nif(event.keyCode===13||event.which===13){\nthis.addTask();\n}\n},\naddTask:function(){\nvarvalue=this.taskInput.value;\nthis.errorMessage.style.display=&34;;\n\nif(value===&34;){\nthis.error();\n}else{\nthis.render();\nthis.taskInput.value=&34;;\nthis.evalTasklist();\n}\n},\ndelTask:function(i){\nthis.tasklist.children[i].remove();\nthis.evalTasklist();\n},\nerror:function(){\nthis.errorMessage.style.display=&34;;\n}\n};\n\ntasker.init();\n}());\n</script>\n</body>\n</html>
2.使用JavaScript和CSS创建垂直时间轴（里程碑）
您可以使用javascript初学者创建的第二个小项目是时间轴，许多现代网站都使用该时间轴使网站更具交互性和动态性。
<!DOCTYPEhtml>\n<htmllang=&34;>\n<head>\n<metacharset=&34;/>\n<metaname=&34;content=&34;/>\n<metahttp-equiv=&34;content=&34;/>\n<title>CSS创建垂直时间轴（里程碑）</title>\n<styletype=&34;>\n*,\n*::before,\n*::after{\nmargin:0;\npadding:0;\nbox-sizing:border-box;\n}\n\nbody{\nfont:normal16px/1.5&34;,sans-serif;\nbackground:fff;\noverflow-x:hidden;\npadding-bottom:50px;\n}/*INTROSECTION\n––––––––––––––––––––––––––––––––––––––––––––––––––*/\n\n.intro{\nbackground:456990;\npadding:50px0;\n}\n\n.timelineulli{\nlist-style-type:none;\nposition:relative;\nwidth:6px;\nmargin:0auto;\npadding-top:50px;\nbackground:39;&F45B69;\n}\n\n.timelineullidiv::before{\ncontent:&39;;\nposition:absolute;\nbottom:7px;\nwidth:0;\nheight:0;\nborder-style:solid;\n}\n\n.timelineulli:nth-child(odd)div{\nleft:45px;\n}\n\n.timelineulli:nth-child(odd)div::before{\nleft:-15px;\nborder-width:8px16px8px0;\nborder-color:transparentF45B69;\n}\n\ntime{\ndisplay:block;\nfont-size:1.2rem;\nfont-weight:bold;\nmargin-bottom:8px;\n}\n\n\n/*EFFECTS\n––––––––––––––––––––––––––––––––––––––––––––––––––*/\n\n.timelineulli::after{\ntransition:background.5sease-in-out;\n}\n\n.timelineulli.in-view::after{\nbackground:F45B69transparenttransparent;\n}\n}\n</style>\n</head>\n<body>\n<sectionclass=&34;>\n<divclass=&34;>\n<h1>VerticalTimeline↓</h1>\n</div>\n</section>\n\n<sectionclass=&34;>\n<ul>\n<li>\n<div>\n<time>1934</time>demo1\n</div>\n</li>\n<li>\n<div>\n<time>1937</time>demo1\n</div>\n</li>\n<li>\n<div>\n<time>1940</time>demo1\n</div>\n</li>\n<li>\n<div>\n<time>1943</time>demo1\n</div>\n</li>\n<li>\n<div>\n<time>1946</time>demo1\n</div>\n</li>\n<li>\n<div>\n<time>1956</time>demo1\n</div>\n</li>\n<li>\n<div>\n<time>1957</time>demo1\n</div>\n</li>\n<li>\n<div>\n<time>1967</time>demo1\n</div>\n</li>\n<li>\n<div>\n<time>1977</time>demo1\n</div>\n</li>\n<li>\n<div>\n<time>1985</time>demo1\n</div>\n</li>\n<li>\n<div>\n<time>2000</time>demo1\n</div>\n</li>\n<li>\n<div>\n<time>2005</time>demo1\n</div>\n</li>\n</ul>\n</section>\n<scripttype=&34;>\n(function(){\n\n&39;;\n\n//definevariables\nvaritems=document.querySelectorAll(&34;);\n\n//checkifanelementisinviewport\n//http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport\nfunctionisElementInViewport(el){\nvarrect=el.getBoundingClientRect();\nreturn(\nrect.top>=0&&\nrect.left>=0&&\nrect.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&\nrect.right<=(window.innerWidth||document.documentElement.clientWidth)\n);\n}\n\nfunctioncallbackFunc(){\nfor(vari=0;i<items.length;i++){\nif(isElementInViewport(items[i])){\nitems[i].classList.add(&34;);\n}\n}\n}\n\n//listenforevents\nwindow.addEventListener(&34;,callbackFunc);\nwindow.addEventListener(&34;,callbackFunc);\nwindow.addEventListener(&34;,callbackFunc);\n\n})();\n</script>\n</body>\n</html>
3.用JavaScript构建一个简单的井字游戏
如果您想构建简单而有趣的东西来练习JavaScript知识，那么使用HTMLCSS和JS创建TICTACTOE游戏对您来说是个不错的选择，该游戏虽然简单但并不容易，因此您需要专注于该项目的逻辑方面，因为它是该项目最具挑战性的部分。
<html>\n<head>\n<metacharset=&34;/>\n<metahttp-equiv=&34;content=&34;>\n<metaname=&34;content=&34;>\n<metaname=&34;content=&34;/>\n<title>FreeCodeCamp:Tictactoe</title>\n<styletype=&34;>\n@importurl(https://fonts.geekzu.org/css?family=Yesteryear);\n$app-background-color:508ABB;\n\n//html,body,div,span,a,li,td,th{\n//font-family:&39;,sans-serif;\n//font-weight:300;\n//\n//}\n\n@-webkit-keyframeswinAnim{\n0%{\nbackground-color:$winAnimStartColor;\n}\n100%{\nbackground-color:$winAnimEndColor;\n}\n}\n@-moz-keyframeswinAnim{\n0%{\nbackground-color:$winAnimStartColor;\n}\n100%{\nbackground-color:$winAnimEndColor;\n}\n}\n@-o-keyframeswinAnim{\n0%{\nbackground-color:$winAnimStartColor;\n}\n100%{\nbackground-color:$winAnimEndColor;\n}\n}\n@keyframeswinAnim{\n0%{\nbackground-color:$winAnimStartColor;\n}\n100%{\nbackground-color:$winAnimEndColor;\n}\n}\n\n@keyframeswinAnim{\n0%{\nbackground-color:$winAnimStartColor;\n}\n100%{\nbackground-color:$winAnimEndColor;\n}\n}\n\n*{\n-webkit-touch-callout:none;\n-webkit-user-select:none;\n-khtml-user-select:none;\n-moz-user-select:none;\n-ms-user-select:none;\nuser-select:none;\noutline-style:none;/*IE*/\n}\n\n.center-box{\nmargin:auto;\nposition:absolute;\ntop:0;\nright:0;\nbottom:0;\nleft:0;\n}\n\nhtml,body{\n//background-image:linear-gradient(tobottom,d2dbdc);\nbackground-color:39;Yesteryear&fff;\nborder-right:2pxsolid34;app&34;container-fluidapp-container&34;rowapp-row&34;col-xs-4play-box&34;0&34;symbol&34;col-xs-4play-box&34;1&34;symbol&34;col-xs-4play-boxlast-right&34;2&34;symbol&34;col-xs-4play-box&34;3&34;symbol&34;col-xs-4play-box&34;4&34;symbol&34;col-xs-4play-boxlast-right&34;5&34;symbol&34;col-xs-4play-boxlast-bottom&34;6&34;symbol&34;col-xs-4play-boxlast-bottom&34;7&34;symbol&34;col-xs-4play-boxlast-rightlast-bottom&34;8&34;symbol&34;modalfadeapp-modal&34;-1&34;dialog&34;mySmallModalLabel&34;modal-dialogmodal-size&34;modal-content&34;contentheading&34;warning-hr&34;contentbody&39;teventhinkyou&39;MSMARTERTHANYOU!HA-HA-HA!!!</em></strong><br>\nWanatryme?Chose:<br>\n<divclass=&34;>\n<buttonclass=&34;data-dismiss=&34;>X</button>OR<buttonclass=&34;data-dismiss=&34;>O</button>\n</div>\n</div>\n</div>\n</div>\n</div>\n<scriptsrc=&34;>\n</script>\n</body>\n</html>
4.创建一个JavaScript倒数计时器开始停止重置
许多现代网站和博客都使用倒数计时器来显示倒数，例如，我们通过使用倒数计时器来告诉在线商店的访问者，商品价格将在价格上涨后增加销售量。具体时间。
<!DOCTYPEhtml>\n<htmllang=&34;>\n<head>\n<metacharset=&34;/>\n<metaname=&34;content=&34;/>\n<metahttp-equiv=&34;content=&34;/>\n<title>CSS创建垂直时间轴（里程碑）</title>\n<styletype=&34;>\n/*Variabes*/\n$orange:f3f3f3;\n$white:39;s*/\n@mixintransition{\n-webkit-transition:all0.5sease-in-out;\n-moz-transition:all0.5sease-in-out;\ntransition:all0.5sease-in-out;\n}\n@mixincorners($radius){\n-moz-border-radius:$radius;\n-webkit-border-radius:$radius;\nborder-radius:$radius;\n-khtml-border-radius:$radius;\n}\n\nbody{\nbackground:$base-color;\nfont-family:&34;,&34;,&34;,Helvetica,Arial,&34;,sans-serif;\nheight:100%;\n}\n\n.wrapper{\nwidth:800px;\nmargin:30pxauto;\ncolor:$white;\ntext-align:center;\n}\n\nh1,h2,h3{\nfont-family:&39;,sans-serif;\nfont-weight:100;\nfont-size:2.6em;\ntext-transform:uppercase;\n}\n\ntens{\nfont-size:2em;\n}\n\nbutton{\n@includecorners(5px);\nbackground:$base-color;\ncolor:$white;\nborder:solid1px$white;\ntext-decoration:none;\ncursor:pointer;\nfont-size:1.2em;\npadding:18px10px;\nwidth:180px;\nmargin:10px;\noutline:none;\n&:hover{\n@includetransition;\nbackground:$white;\nborder:solid1px$white;\ncolor:$base-color;\n}\n}\n</style>\n</head>\n<body>\n<divclass=&34;>\n<h1>Stopwatch</h1>\n<h2>VanillaJavaScriptStopwatch</h2>\n<p><spanid=&34;>00</span>:<spanid=&34;>00</span></p>\n<buttonid=&34;>Start</button>\n<buttonid=&34;>Stop</button>\n<buttonid=&34;>Reset</button>\n</div>\n<scripttype=&34;>\nwindow.onload=function(){\n\nvarseconds=00;\nvartens=00;\nvarappendTens=document.getElementById(&34;)\nvarappendSeconds=document.getElementById(&34;)\nvarbuttonStart=document.getElementById(&39;);\nvarbuttonStop=document.getElementById(&39;);\nvarbuttonReset=document.getElementById(&39;);\nvarInterval;\n\nbuttonStart.onclick=function(){\n\nclearInterval(Interval);\nInterval=setInterval(startTimer,10);\n}\n\nbuttonStop.onclick=function(){\nclearInterval(Interval);\n}\n\n\nbuttonReset.onclick=function(){\nclearInterval(Interval);\ntens=&34;;\nseconds=&34;;\nappendTens.innerHTML=tens;\nappendSeconds.innerHTML=seconds;\n}\n\n\n\nfunctionstartTimer(){\ntens++;\n\nif(tens<9){\nappendTens.innerHTML=&34;+tens;\n}\n\nif(tens>9){\nappendTens.innerHTML=tens;\n\n}\n\nif(tens>99){\nconsole.log(&34;);\nseconds++;\nappendSeconds.innerHTML=&34;+seconds;\ntens=0;\nappendTens.innerHTML=&34;+0;\n}\n\nif(seconds>9){\nappendSeconds.innerHTML=seconds;\n}\n\n}<scriptsrc=&34;>\n</script>\n\n}\n\n</script>\n</body>\n</html>
5.用JavaScript创建一个简单的乒乓球游戏
我可以用JavaScript构建游戏吗？答案是肯定的，使用javascript甚至可以创建复杂的游戏，但是在这种情况下，我们将专注于一个简单的游戏，该游戏可让您练习HTMLCSS和javascript技能。
<!DOCTYPEhtml>\n<htmllang=&34;>\n<head>\n<metacharset=&34;/>\n<metaname=&34;content=&34;/>\n<metahttp-equiv=&34;content=&34;/>\n<title>使用js调用设备摄像头并实现拍照</title>\n<styletype=&34;>\nbody{\ntext-align:center;\n}\n</style>\n</head>\n<body>\n<scripttype=&34;>\n//GlobalVariables\nvarDIRECTION={\nIDLE:0,\nUP:1,\nDOWN:2,\nLEFT:3,\nRIGHT:4\n};\n\nvarrounds=[5,5,3,3,2];\nvarcolors=[&1abc9c&39;39;,&3498db&39;39;,&9b59b6&39;left&39;canvas&39;2d&39;px&39;px&39;left&39;right&39;39;;\n\nPong.menu();\nPong.listen();\n},\n\nendGameMenu:function(text){\n//Changethecanvasfontsizeandcolor\nPong.context.font=&39;;\nPong.context.fillStyle=this.color;\n\n//Drawtherectanglebehindthe&39;text.\nPong.context.fillRect(\nPong.canvas.width/2-350,\nPong.canvas.height/2-48,\n700,\n100\n);\n\n//Changethecanvascolor;\nPong.context.fillStyle=&ffffff&39;GameOver&39;Winner&39;50pxCourierNew&39;Pressanykeytobegin&39;39;;\n\n//Drawthe&39;text\nthis.context.fillText(&39;,\nthis.canvas.width/2,\nthis.canvas.height/2+15\n);\n},\n\n//Updateallobjects(movetheplayer,paddle,ball,incrementthescore,etc.)\nupdate:function(){\nif(!this.over){\n//Iftheballcollideswiththeboundlimits-correctthexandycoords.\nif(this.ball.x<=0)Pong._resetTurn.call(this,this.paddle,this.player);\nif(this.ball.x>=this.canvas.width-this.ball.width)Pong._resetTurn.call(this,this.player,this.paddle);\nif(this.ball.y<=0)this.ball.moveY=DIRECTION.DOWN;\nif(this.ball.y>=this.canvas.height-this.ball.height)this.ball.moveY=DIRECTION.UP;\n\n//Moveplayeriftheyplayer.movevaluewasupdatedbyakeyboardevent\nif(this.player.move===DIRECTION.UP)this.player.y-=this.player.speed;\nelseif(this.player.move===DIRECTION.DOWN)this.player.y+=this.player.speed;\n\n//Onnewserve(startofeachturn)movetheballtothecorrectside\n//andrandomizethedirectiontoaddsomechallenge.\nif(Pong._turnDelayIsOver.call(this)&&this.turn){\nthis.ball.moveX=this.turn===this.player?DIRECTION.LEFT:DIRECTION.RIGHT;\nthis.ball.moveY=[DIRECTION.UP,DIRECTION.DOWN][Math.round(Math.random())];\nthis.ball.y=Math.floor(Math.random()*this.canvas.height-200)+200;\nthis.turn=null;\n}\n\n//Iftheplayercollideswiththeboundlimits,updatethexandycoords.\nif(this.player.y<=0)this.player.y=0;\nelseif(this.player.y>=(this.canvas.height-this.player.height))this.player.y=(this.canvas.height-this.player.height);\n\n//MoveballinintendeddirectionbasedonmoveYandmoveXvalues\nif(this.ball.moveY===DIRECTION.UP)this.ball.y-=(this.ball.speed/1.5);\nelseif(this.ball.moveY===DIRECTION.DOWN)this.ball.y+=(this.ball.speed/1.5);\nif(this.ball.moveX===DIRECTION.LEFT)this.ball.x-=this.ball.speed;\nelseif(this.ball.moveX===DIRECTION.RIGHT)this.ball.x+=this.ball.speed;\n\n//Handlepaddle(AI)UPandDOWNmovement\nif(this.paddle.y>this.ball.y-(this.paddle.height/2)){\nif(this.ball.moveX===DIRECTION.RIGHT)this.paddle.y-=this.paddle.speed/1.5;\nelsethis.paddle.y-=this.paddle.speed/4;\n}\nif(this.paddle.y<this.ball.y-(this.paddle.height/2)){\nif(this.ball.moveX===DIRECTION.RIGHT)this.paddle.y+=this.paddle.speed/1.5;\nelsethis.paddle.y+=this.paddle.speed/4;\n}\n\n//Handlepaddle(AI)wallcollision\nif(this.paddle.y>=this.canvas.height-this.paddle.height)this.paddle.y=this.canvas.height-this.paddle.height;\nelseif(this.paddle.y<=0)this.paddle.y=0;\n\n//HandlePlayer-Ballcollisions\nif(this.ball.x-this.ball.width<=this.player.x&&this.ball.x>=this.player.x-this.player.width){\nif(this.ball.y<=this.player.y+this.player.height&&this.ball.y+this.ball.height>=this.player.y){\nthis.ball.x=(this.player.x+this.ball.width);\nthis.ball.moveX=DIRECTION.RIGHT;\n\nbeep1.play();\n}\n}\n\n//Handlepaddle-ballcollision\nif(this.ball.x-this.ball.width<=this.paddle.x&&this.ball.x>=this.paddle.x-this.paddle.width){\nif(this.ball.y<=this.paddle.y+this.paddle.height&&this.ball.y+this.ball.height>=this.paddle.y){\nthis.ball.x=(this.paddle.x-this.ball.width);\nthis.ball.moveX=DIRECTION.LEFT;\n\nbeep1.play();\n}\n}\n}\n\n//Handletheendofroundtransition\n//Checktoseeiftheplayerwontheround.\nif(this.player.score===rounds[this.round]){\n//Checktoseeifthereareanymorerounds/levelsleftanddisplaythevictoryscreenif\n//therearenot.\nif(!rounds[this.round+1]){\nthis.over=true;\nsetTimeout(function(){Pong.endGameMenu(&39;);},1000);\n}else{\n//Ifthereisanotherround,resetallthevaluesandincrementtheroundnumber.\nthis.color=this._generateRoundColor();\nthis.player.score=this.paddle.score=0;\nthis.player.speed+=0.5;\nthis.paddle.speed+=1;\nthis.ball.speed+=1;\nthis.round+=1;\n\nbeep3.play();\n}\n}\n//Checktoseeifthepaddle/AIhaswontheround.\nelseif(this.paddle.score===rounds[this.round]){\nthis.over=true;\nsetTimeout(function(){Pong.endGameMenu(&39;);},1000);\n}\n},\n\n//Drawtheobjectstothecanvaselement\ndraw:function(){\n//CleartheCanvas\nthis.context.clearRect(\n0,\n0,\nthis.canvas.width,\nthis.canvas.height\n);\n\n//Setthefillstyletoblack\nthis.context.fillStyle=this.color;\n\n//Drawthebackground\nthis.context.fillRect(\n0,\n0,\nthis.canvas.width,\nthis.canvas.height\n);\n\n//Setthefillstyletowhite(Forthepaddlesandtheball)\nthis.context.fillStyle=&ffffff&39;39;;\nthis.context.stroke();\n\n//Setthedefaultcanvasfontandalignittothecenter\nthis.context.font=&39;;\nthis.context.textAlign=&39;;\n\n//Drawtheplayersscore(left)\nthis.context.fillText(\nthis.player.score.toString(),\n(this.canvas.width/2)-300,\n200\n);\n\n//Drawthepaddlesscore(right)\nthis.context.fillText(\nthis.paddle.score.toString(),\n(this.canvas.width/2)+300,\n200\n);\n\n//Changethefontsizeforthecenterscoretext\nthis.context.font=&39;;\n\n//Drawthewinningscore(center)\nthis.context.fillText(\n&39;+(Pong.round+1),\n(this.canvas.width/2),\n35\n);\n\n//Changethefontsizeforthecenterscorevalue\nthis.context.font=&39;;\n\n//Drawthecurrentroundnumber\nthis.context.fillText(\nrounds[Pong.round]?rounds[Pong.round]:rounds[Pong.round-1],\n(this.canvas.width/2),\n100\n);\n},\n\nloop:function(){\nPong.update();\nPong.draw();\n\n//Ifthegameisnotover,drawthenextframe.\nif(!Pong.over)requestAnimationFrame(Pong.loop);\n},\n\nlisten:function(){\ndocument.addEventListener(&39;,function(key){\n//Handlethe&39;functionandstartthegame.\nif(Pong.running===false){\nPong.running=true;\nwindow.requestAnimationFrame(Pong.loop);\n}\n\n//Handleuparrowandwkeyevents\nif(key.keyCode===38||key.keyCode===87)Pong.player.move=DIRECTION.UP;\n\n//Handledownarrowandskeyevents\nif(key.keyCode===40||key.keyCode===83)Pong.player.move=DIRECTION.DOWN;\n});\n\n//Stoptheplayerfrommovingwhentherearenokeysbeingpressed.\ndocument.addEventListener(&39;,function(key){Pong.player.move=DIRECTION.IDLE;});\n},\n\n//Resettheballlocation,theplayerturnsandsetadelaybeforethenextroundbegins.\n_resetTurn:function(victor,loser){\nthis.ball=Ball.new.call(this,this.ball.speed);\nthis.turn=loser;\nthis.timer=(newDate()).getTime();\n\nvictor.score++;\nbeep2.play();\n},\n\n//Waitforadelaytohavepassedaftereachturn.\n_turnDelayIsOver:function(){\nreturn((newDate()).getTime()-this.timer>=1000);\n},\n\n//Selectarandomcolorasthebackgroundofeachlevel/round.\n_generateRoundColor:function(){\nvarnewColor=colors[Math.floor(Math.random()*colors.length)];\nif(newColor===this.color)returnPong._generateRoundColor();\nreturnnewColor;\n}\n};\n\nvarPong=Object.assign({},Game);\nPong.initialize();\n</script>\n</body>\n</html>
本篇未完结，请继续看下一篇：手把手教你7个有趣的JavaScript项目-下「附源码」
推荐JavaScript经典实例学习资料文章
《JavaScript使用mediaDevicesAPI访问摄像头自拍》
《手把手教你前端代码如何做错误上报「JS篇」》
《一文让你彻底搞懂移动前端和Web前端区别在哪里》
《63个JavaScript正则大礼包「值得收藏」》
《提高你的JavaScript技能10个问答题》
《JavaScript图表库的5个首选》
《一文彻底搞懂JavaScript中Object.freeze与Object.seal的用法》
《可视化的JS：动态图演示-事件循环EventLoop的过程》
《教你如何用动态规划和贪心算法实现前端瀑布流布局「实践」》
《可视化的js：动态图演示Promises&Async/Await的过程》
《原生JS封装拖动验证滑块你会吗？「实践」》
《如何实现高性能的在线PDF预览》
《细说使用字体库加密数据-仿58同城》
《Node.js要完了吗？》
《Pug3.0.0正式发布，不再支持Node.js6/8》
《纯JS手写轮播图（代码逻辑清晰，通俗易懂）》
《JavaScript20年中文版之创立标准》
《值得收藏的前端常用60余种工具方法「JS篇」》
《箭头函数和常规函数之间的5个区别》
《通过发布/订阅的设计模式搞懂Node.js核心模块Events》
《「前端篇」不再为正则烦恼》
《「速围」Node.jsV14.3.0发布支持顶级Await和REPL增强功能》
《深入细品浏览器原理「流程图」》
《JavaScript已进入第三个时代，未来将何去何从？》
《前端上传前预览文件image、text、json、video、audio「实践」》
《深入细品EventLoop和浏览器渲染、帧动画、空闲回调的关系》
《推荐13个有用的JavaScript数组技巧「值得收藏」》
《前端必备基础知识：window.location详解》
《不要再依赖CommonJS了》
《犀牛书作者：最该忘记的JavaScript特性》
《36个工作中常用的JavaScript函数片段「值得收藏」》
《Node+H5实现大文件分片上传、断点续传》
《一文了解文件上传全过程（1.8w字深度解析）「前端进阶必备」》
《【实践总结】关于小程序挣脱枷锁实现批量上传》
《手把手教你前端的各种文件上传攻略和大文件断点续传》
《字节跳动面试官：请你实现一个大文件上传和断点续传》
《谈谈前端关于文件上传下载那些事【实践】》
《手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件》
《最全的JavaScript模块化方案和工具》
《「前端进阶」JS中的内存管理》
《JavaScript正则深入以及10个非常有意思的正则实战》
《前端面试者经常忽视的一道JavaScript面试题》
《一行JS代码实现一个简单的模板字符串替换「实践」》
《JS代码是如何被压缩的「前端高级进阶」》
《前端开发规范：命名规范、html规范、css规范、js规范》
《【规范篇】前端团队代码规范最佳实践》
《100个原生JavaScript代码片段知识点详细汇总【实践】》
《关于前端174道JavaScript知识点汇总（一）》
《关于前端174道JavaScript知识点汇总（二）》
《关于前端174道JavaScript知识点汇总（三）》
《几个非常有意思的javascript知识点总结【实践】》
《都2020年了，你还不会JavaScript装饰器？》
《JavaScript实现图片合成下载》
《70个JavaScript知识点详细总结（上）【实践】》
《70个JavaScript知识点详细总结（下）【实践】》
《开源了一个JavaScript版敏感词过滤库》
《送你43道JavaScript面试题》
《3个很棒的小众JavaScript库，你值得拥有》
《手把手教你深入巩固JavaScript知识体系【思维导图】》
《推荐7个很棒的JavaScript产品步骤引导库》
《Echa哥教你彻底弄懂JavaScript执行机制》
《一个合格的中级前端工程师需要掌握的28个JavaScript技巧》
《深入解析高频项目中运用到的知识点汇总【JS篇】》
《JavaScript工具函数大全【新】》
《从JavaScript中看设计模式(总结)》
《身份证号码的正则表达式及验证详解(JavaScript，Regex)》
《浏览器中实现JavaScript计时器的4种创新方式》
《Three.js动效方案》
《手把手教你常用的59个JS类方法》
《127个常用的JS代码片段，每段代码花30秒就能看懂-【上】》
《深入浅出讲解js深拷贝vs浅拷贝》
《手把手教你JS开发H5游戏【消灭星星】》
《深入浅出讲解JS中this/apply/call/bind巧妙用法【实践】》
《手把手教你全方位解读JS中this真正含义【实践】》
《书到用时方恨少，一大波JS开发工具函数来了》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《手把手教你JS异步编程六种方案【实践】》
《让你减少加班的15条高效JS技巧知识点汇总【实践】》
《手把手教你JS开发H5游戏【黄金矿工】》
《手把手教你JS实现监控浏览器上下左右滚动》
《JS经典实例知识点整理汇总【实践】》
《2.6万字JS干货分享，带你领略前端魅力【基础篇】》
《2.6万字JS干货分享，带你领略前端魅力【实践篇】》
《简单几步让你的JS写得更漂亮》
《恭喜你获得治疗JSthis的详细药方》
《谈谈前端关于文件上传下载那些事【实践】》
《面试中教你绕过关于JavaScript作用域的5个坑》
《Jquery插件（常用的插件库）》
《【JS】如何防止重复发送ajax请求》
《JavaScript+Canvas实现自定义画板》
《Continuation在JS中的应用「前端篇」》
如果你还想了解更多这方面的信息，记得收藏关注本站。