Home > Developer > Web Develop
Recently bored, with Html5+js did a previously played palm-machine racing game, by the way to learn the canvas API and consolidate the JS Foundation.
Game interface, did not do anything to beautify.
Game rules: The game interface is divided into three columns, black squares randomly falling, red squares can be moved freely in three columns (with the direction key, long press the arrow key Black block to accelerate the decline). Red squares hit black squares to lose.
Score: Every normal through a black square plus 12 points, accelerated by adding 30 points.
Directly below the code:
Html:
1 <!DOCTYPE HTML>2 <HTML>3 <HeadLang= "en">4 <MetaCharSet= "UTF-8">5 <title></title>6 </Head>7 <style>8 Body{9 text-align:Center;Ten } One #mycar{ A Border:1px solid Black; - } - </style> the <Body> - <CanvasID= "Mycar"width= "300px"Height= "500px"></Canvas> - <DivID= "scored">Rating: 0</Div> - <Scriptsrc= "Js/mycar.js"></Script> + </Body> - </HTML>
JS:
1 functionCreatecar (speed,cxt,dom) {2 varo =NewObject ();3O.speed =Speed ;4O.CXT =cxt;5O.cell = 100;6O.curdir = {' x ': +, ' y ': 400};7O.hinder = [[],[],[]];8O.scroll = 0;9o.scored = 0;TenO.init =function () { OneO.cxt.fillstyle = ' Red '; A O.cxt.fillrect (o.curdir.x, O.curdir.y, O.cell, O.cell); -Document.onkeydown =function(e) { - if(E.keycode = = = PNs && o.curdir.x > 0){ theO.movecar (' left '); - } - Else if(E.keycode = = = && O.curdir.x < 200){ -O.movecar (' right '); + } - Else if(E.keycode = = 40) +O.speed = SPEED/3; A }; atDocument.onkeyup =function () { -O.speed =Speed ; - }; - O.sethinder (); - O.downhinder (); - }; inO.sethinder =function () { - varRand1 = Math.ceil (Math.random () * 1000)% 2, toRand2 = Math.ceil (Math.random () * 1000)% 2, +Rand3 = Math.ceil (Math.random () * 1000)% 2; -O.hinder[0].push ({' X ': 0, ' y ': 0, ' Hinder ': Rand1}); theO.hinder[1].push ({' x ': +, ' y ': 0, ' Hinder '): Rand2}); *O.hinder[2].push ({' X ': $, ' Y ': 0, ' hinder ': rand1 + rand2 = = 2?0: Rand3}); $ for(vari = 0; i < o.hinder.length; i + +){Panax Notoginseng varLast =o.hinder[i][o.hinder[i].length-1]; - if(Last.hinder = = 1) { theO.cxt.fillstyle = ' Black '; + O.cxt.fillrect (Last.x,last.y, O.cell, O.cell); A } the } + }; -O.downhinder =function () { $SetTimeout (function () { $ vari = 0, -j = 0, -Cur =NULL, theOld =NULL; - for(i = 0; i < o.hinder[0].length; i + +)) {Wuyi for(j = 0; J < 3; J + +)) { theCur =O.hinder[j][i]; - if(Cur.hinder = = 1) { WuOld =O.hinder[j][i]; - O.cxt.clearrect (Old.x,old.y, O.cell, O.cell); AboutO.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); - } A Else +O.HINDER[J][I].Y = o.hinder[j][i].y + 5; the } - } $ for(i = 0; i < o.hinder.length; i + +)) { the if(O.HINDER[I][0].Y >= 500) { theo.scored = o.scored + Math.ceil (100/o.speed); thedom.innerhtml = ' Score: ' +o.scored; the varover =O.hinder[i].shift (); - if(Over.hinder = = 1) in O.cxt.clearrect (Over.x,over.y, O.cell, O.cell); the } the } About if(O.hinder[o.curdir.x/100][0].hinder = = = 1 && o.hinder[o.curdir.x/100][0].y + >=o.curdir.y) { theAlert (' You hang up '); the return; the } +O.scroll = O.scroll + 5; - if(o.scroll% 300 = = 0) the O.sethinder ();Bayi O.downhinder (); the }, O.speed); the }; -O.movecar =function(dir) { -O.cxt.fillstyle = ' Red '; the O.cxt.clearrect (o.curdir.x, O.curdir.y, O.cell, O.cell); theO.curdir.x = (dir = = = ' Left '? O.curdir.x-o.cell:o.curdir.x +O.cell); the O.cxt.fillrect (O.curdir.x,o.curdir.y, O.cell, O.cell); the }; - returno; the } the the varc = document.getElementById (' Mycar ');94 varScored = document.getElementById (' scored ')); the varCXT = C.getcontext (' 2d '); the varCar = Createcar (30, cxt,scored); theCar.init ();
Algorithm write a little bad, there is a great God passing by hope to write a guide.
Using HTML5+JS to realize the handheld game racing demo
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
