I am trying to make a football game for mobile phones, which uses the mobile phone's goo system. There are 2 canvas: On one, I underline the field lines and on the other hand the actual ball movement. It works fine in desktop browsers (of course except for Gyo's part), but when I try to use it in the webview of Android, sometimes my field lines are not ready Sometimes the ball too Not being dragged, but I think solving a problem can help solve the other. Here's my markup:
& lt; Div class = "wrap" & gt; & Lt; Canvas ID = "canvas field" height = "100%" width = "100%" & gt; & Lt; / Canvas & gt; & Lt; Div id = "icon" & gt; Image & lt; / Div & gt; & Lt; Div id = "name" & gt; Name & lt; / Div & gt; & Lt; Div id = "action-container" & gt; & Lt; Div id = "shake-container" & gt; & Lt; Img src = "picture / score_conconnected" id = "shake-icon" /> & Lt; / Div & gt; & Lt; Div id = "score-to-play" & gt; Score a goal & lt; / Div & gt; & Lt; / Div & gt; & Lt; Canvas id = "canvas play" height = "568" width = "320" & gt; Your browser does not support the HTML5 canvas tag. & Lt; / Canvas & gt; & Lt; / Div & gt;
And this is JS:
var canvasfield, CTX, WWW, WHEET, top-leftx, top life, topright x, top, bottom Latex, Lathey, right x below, right down, center, center, netimg, netx, neti, hit area, hit area, icon, apn, game, interval, info; / * Constants * / var margin hat = 60, margin side = 20, netwyth = 175, nethit = 48, linewidth = 6, centercrews = radius = 100, ballridges = 25, hit areawidth = netwyth-ball radius, hit area = linewidth, line Collar = "#ffffff"; Window.addEventListener ("Load", function () {setTimeout (init, 200)}); Function init () {wWidth = window.innerWidth; WHEIGHT = window.innerHeight; TopLeftX = DownLeftX = Marginside; TopLeftY = topRightY = margin hat; TopRightX = Asterisk = wWidth - marginside; Bottom Lift Y = Right Right Y = wHyight - Margin Side; CenterX = wWidth / 2; CenterY = (bottom Wi-Toplift Y) / 2 + margin hat; NetX = centerX - NetWeath / 2; Net Y = Margin Top - NetHeight; HitAreaX = centerX - Hit AreaWith / 2; HitAreaY = margin top-mariereheit / 2; Icon = document.getElementById ('icon'); Icon.style.top = centerY-icon offsetHeight / 2 + "px"; Icon.style.left = centerX-icon.offsetWidth / 2 + "px"; Icon.style.visibility = "visible"; AppName = document.getElementById ('name'); AppName.style.top = centerY + CenterCrackDarius + 16 + "PX"; AppName.style.visibility = "visible"; Info = document.getElementById ('info'); Canvasfield = document.getElementById ('canvasfield'); Ctx = canvasField.getContext ('2d'); Canvasfield.wind = wWidth; Canvasfield. Heights = wHight; DrawField (); // gameInterval = setInterval (frame, 40); } Function drawField () {//Info.innerHTML = "drawing"; Ctx.clearRect (0, 0, wWidth, wWidth); // field side lines ctx.linewind = linewhite; Ctx.lineCap = "square"; Ctx.beginPath (); Ctx.moveTo (topLeftX, topLeftY); Ctx.lineTo (topRightX, topRightY); Ctx.lineTo (RightX down, downright); Ctx.lineTo (below LftX, bottom L); Ctx.lineTo (topLeftX, topLeftY); Ctx.strokeStyle = lineColor; Ctx.stroke (); // Draw Left Central Line ctx.beginPath (); Ctx.moveTo (margin side, center y); Ctx.lineTo (centerX- CenterCrade, Center Y); Ctx.stroke (); // Draw Right Central Line ctx.beginPath (); Ctx.moveTo (centerX + CenterKRKRDS, Center Y) ctx.lineTo (wWidth-marginSide, centerY); Ctx.stroke (); // Draw Central Circle ctx.beginPath (); Ctx.arc (centX, centerY, centercurrentes, 0, Math.pi * 2); Ctx.fillStyle = "RGBA (180255,0.1.1)"; Ctx.fill (); Ctx.stroke (); // Draw Hit Area ctx.beginPath (); //ctx.fillStyle = '# F7CA18'; Ctx.fillRect (hit area, hit area, hit areawide, hit area); Ctx.closePath (); // Draw Net Netmog = New Image (); NetImg.onload = function () {ctx.drawImage (netImg, netX, netY); }; NetImg.src = 'images / net.png'; // draw bar ctx.lineWidth = lineWidth / 2; Ctx.beginPath (); Ctx.moveTo (NetX, margin hat); Ctx.lineTo (NetX, Neti); Ctx.lineTo (NetX + NetWidth, Neti); Ctx.lineTo (NetX + NetWidth, margin hat); Ctx.stroke (); }
JSfield here:
What could be the reason for this and how can I fix it?
No comments:
Post a Comment