CircleTest ross.zurowsk Follow 2010-11-02 07:48:51 License: MIT License Fork0 Fav1 View538 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 52 lines HTML 1 lines CSS 5 lines An introduction to canvas and motion in canvas. Motion code from http://eriknatzke.com/ CircleTest CircleTest = new function() { var FRAMERATE = 60; var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight; var canvas; var context; var mouse; var x, y, ax, ay, ease; this.init = function() { canvas = document.getElementById('world'); context = canvas.getContext('2d'); mouse = { x: 0, y: 0 }; windowResizeHandler(); x = ax = mouse.x; y = ay = mouse.y; ease = 48; //Just a random value. console.log("Hello there"); document.addEventListener("mousemove", mouseMoveHandler, false); document.addEventListener("resize", windowResizeHandler, false); setInterval(redraw, 1000/FRAMERATE); }; var mouseMoveHandler = function(event) { mouse.x = event.clientX; mouse.y = event.clientY; }; var redraw = function() { x -= ax = ( ax + ( x - mouse.x ) / ease ) * 0.9; y -= ay = ( ay + ( y - mouse.y ) / ease ) * 0.9; context.clearRect(0, 0, canvas.width, canvas.height); context.fillStyle = "#1BADE0"; context.beginPath(); context.arc(x, y, 50, 0, Math.PI*2, true); context.closePath(); context.fill(); }; var windowResizeHandler = function(event) { SCREEN_WIDTH = window.innerWidth; SCREEN_HEIGHT = window.innerHeight; canvas.width = SCREEN_WIDTH; canvas.height = SCREEN_HEIGHT; }; }; CircleTest.init(); <canvas id='world'><p>Please download a <a href="google.com/chrome">modern</a> browser.</p></canvas> CircleTest body { overflow: hidden; background-color: #FFF; } An introduction to canvas and motion in canvas. Motion code from http://eriknatzke.com/ CircleTest = new function() { var FRAMERATE = 60; var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight; var canvas; var context; var mouse; var x, y, ax, ay, ease; this.init = function() { canvas = document.getElementById('world'); context = canvas.getContext('2d'); mouse = { x: 0, y: 0 }; windowResizeHandler(); x = ax = mouse.x; y = ay = mouse.y; ease = 48; //Just a random value. console.log("Hello there"); document.addEventListener("mousemove", mouseMoveHandler, false); document.addEventListener("resize", windowResizeHandler, false); setInterval(redraw, 1000/FRAMERATE); }; var mouseMoveHandler = function(event) { mouse.x = event.clientX; mouse.y = event.clientY; }; var redraw = function() { x -= ax = ( ax + ( x - mouse.x ) / ease ) * 0.9; y -= ay = ( ay + ( y - mouse.y ) / ease ) * 0.9; context.clearRect(0, 0, canvas.width, canvas.height); context.fillStyle = "#1BADE0"; context.beginPath(); context.arc(x, y, 50, 0, Math.PI*2, true); context.closePath(); context.fill(); }; var windowResizeHandler = function(event) { SCREEN_WIDTH = window.innerWidth; SCREEN_HEIGHT = window.innerHeight; canvas.width = SCREEN_WIDTH; canvas.height = SCREEN_HEIGHT; }; }; CircleTest.init(); <canvas id='world'><p>Please download a <a href="google.com/chrome">modern</a> browser.</p></canvas> body { overflow: hidden; background-color: #FFF; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? An introduction to canvas and motion in canvas. Motion code from http://eriknatzke.com/ Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author ross.zurowski 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/vRz4/js"></script> circle natzke motion Tweet Twitter Discussion Questions on this code? Tags circle motion natzke Favorite by kikuchy: ぼよんぼよんしてて楽しい。
