ボールが跳ねる xl1 Follow 2014-07-02 23:29:57 License: MIT License Fork0 Fav1 View1695 Play Stop Reload Fullscreen Smart Phone Readme CoffeeScript 76 lines HTML 0 lines CSS 1 lines Chrome for Android beta で navigator.vibrate(ミリ秒数) が使えるようになってたので タッチでボールを増やす 更新 Firefox では deviceorientation の beta, gamma の向きが逆なのでそれに対応した 2014/7/2 上記 Firefox の向きいつの間にか直っていたので修正しました ボールが跳ねる ctx = null balls = [] gravity = { x: 0, y: 0 } last = 0 class Ball constructor: (@x, @y) -> @vx = @vy = 0 @size = 10 move: (t) -> dt = t * 0.1 { width, height } = ctx.canvas size = @size @vx += gravity.x * dt @vy += gravity.y * dt px = @x + @vx py = @y + @vy if px < size or width - size < px @vx *= -0.7 reflect = Math.abs(@vx) if py < @size or height - size < py @vy *= -0.7 reflect = Math.abs(@vy) @x += @vx @y += @vy reflect or 0 render: -> ctx.beginPath() ctx.arc(@x, @y, @size, 0, Math.PI * 2) ctx.fill(); update = -> t = Date.now() - last last += t if t > 1000 t = 0 reflect = 0 for ball in balls reflect += ball.move(t) { width, height } = ctx.canvas ctx.clearRect(0, 0, width, height) for ball in balls ball.render() if reflect > 7 navigator.vibrate?(Math.min(60, reflect)) requestAnimationFrame(update) main = -> canv = document.createElement('canvas') canv.width = window.innerWidth canv.height = window.innerHeight document.body.appendChild(canv) ctx = canv.getContext('2d') ctx.fillStyle = 'black' window.addEventListener 'deviceorientation', ({ beta, gamma }) -> gravity.y = Math.sin(beta * Math.PI / 180) gravity.x = Math.sin(gamma * Math.PI / 180) , false canv.addEventListener 'touchstart', (e) -> e.preventDefault() { clientX, clientY } = e.changedTouches[0] balls.push new Ball(clientX, clientY) , false balls.push new Ball(canv.width / 2, canv.height / 2) last = Date.now() update() main() ボールが跳ねる body { margin: 0; overflow: hidden; } - Chrome for Android beta で `navigator.vibrate(ミリ秒数)` が使えるようになってたので - タッチでボールを増やす - **更新** Firefox では deviceorientation の beta, gamma の向きが逆なのでそれに対応した - **2014/7/2** 上記 Firefox の向きいつの間にか直っていたので修正しました ctx = null balls = [] gravity = { x: 0, y: 0 } last = 0 class Ball constructor: (@x, @y) -> @vx = @vy = 0 @size = 10 move: (t) -> dt = t * 0.1 { width, height } = ctx.canvas size = @size @vx += gravity.x * dt @vy += gravity.y * dt px = @x + @vx py = @y + @vy if px < size or width - size < px @vx *= -0.7 reflect = Math.abs(@vx) if py < @size or height - size < py @vy *= -0.7 reflect = Math.abs(@vy) @x += @vx @y += @vy reflect or 0 render: -> ctx.beginPath() ctx.arc(@x, @y, @size, 0, Math.PI * 2) ctx.fill(); update = -> t = Date.now() - last last += t if t > 1000 t = 0 reflect = 0 for ball in balls reflect += ball.move(t) { width, height } = ctx.canvas ctx.clearRect(0, 0, width, height) for ball in balls ball.render() if reflect > 7 navigator.vibrate?(Math.min(60, reflect)) requestAnimationFrame(update) main = -> canv = document.createElement('canvas') canv.width = window.innerWidth canv.height = window.innerHeight document.body.appendChild(canv) ctx = canv.getContext('2d') ctx.fillStyle = 'black' window.addEventListener 'deviceorientation', ({ beta, gamma }) -> gravity.y = Math.sin(beta * Math.PI / 180) gravity.x = Math.sin(gamma * Math.PI / 180) , false canv.addEventListener 'touchstart', (e) -> e.preventDefault() { clientX, clientY } = e.changedTouches[0] balls.push new Ball(clientX, clientY) , false balls.push new Ball(canv.width / 2, canv.height / 2) last = Date.now() update() main() body { margin: 0; overflow: hidden; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? - Chrome for Android beta で `navigator.vibrate(ミリ秒数)` が使えるようになってたので - タッチでボールを増やす - **更新** Firefox では deviceorientation の beta, gamma の向きが逆なのでそれに対応した - **2014/7/2** 上記 Firefox の向きいつの間にか直っていたので修正しました Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author xl1 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/yHSq/js"></script> html5_elements&api Discussion Questions on this code? Tags html5_elements&api Favorite by o_ti
