Forked from: nakashimmer's ピンボールゲーム View Diff (1) forked: ピンボールゲーム xxvaqua Follow 2018-04-01 22:06:26 License: All rights reserved Fork0 Fav0 View388 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 87 lines HTML 6 lines CSS 7 lines forked: ピンボールゲーム // forked from nakashimmer's "ピンボールゲーム" http://jsdo.it/nakashimmer/4R5B var canvas = document.getElementById("pb"); var ctx = canvas.getContext("2d"); var frame = 0; // 全体のフレームカウント var JIBUN = {x:250,y:450}; // 自分 var BALL = {x:250,y:400,dx:-1,height:300}; // ボール var PIN = {x:250,y:200}; // ピン var point = 0; //得点 var crash ={x:300,y:300}; //ボールと自分の間 var get ={x:300,y:300}; //ボールとピンの間 var sound = new Audio("http://jsrun.it/assets/j/4/v/y/j4vyg.wav"); //衝撃音 //マウスの位置を取得 canvas.onmousemove = mouseMoveListener; function mouseMoveListener(e){ var rect = e.target.getBoundingClientRect(); JIBUN.x = e.clientX - rect.left; // JIBUN.y= e.clientY - rect.top; } function start(){ //animeを50ミリ秒毎起動 setInterval(anime,50); sound.play(); } //アニメ関数 function anime(){ frame++; // 背景クリア ctx.globalAlpha = 0.8; ctx.fillStyle = "lightgreen"; ctx.fillRect(0,0,500,500); //ボール描画 ctx.globalAlpha = 1; ctx.fillStyle = "white"; ctx.beginPath(); ctx.arc(BALL.x-10,BALL.y-10,20,0,2*Math.PI,true); ctx.fill(); //自分描画 ctx.fillStyle = "orange"; ctx.fillRect(JIBUN.x-50,JIBUN.y-10,100,20); //ピン描画 ctx.fillStyle = "gray"; ctx.beginPath(); ctx.arc(PIN.x-10,PIN.y-10,20,0,2*Math.PI,true); ctx.fill(); //文字描画 ctx.fillStyle = "white"; ctx.font = "20px 'arial' "; ctx.fillText("得点:" + point,0,450); //ボール移動 BALL.x = BALL.x + BALL.dx; BALL.y = Math.floor(450-Math.abs(Math.sin(frame/36))*BALL.height); // ボール移動・壁処理 if((BALL.x > 490)||(BALL.x < 10)) BALL.dx = -BALL.dx; //自分とボールの処理 crash.x = BALL.x - JIBUN.x; crash.y = BALL.y - JIBUN.y; if(Math.abs(crash.y)<5){ if (Math.abs(crash.x) < 50){ BALL.dx = BALL.dx + crash.x/10; if(BALL.dx>5)BALL.dx/=2; BALL.height=300; sound.play(); } BALL.height-=50;if(BALL.height<50)BALL.height=50; } //ボールとピンの処理 get.x = BALL.x - PIN.x; get.y = BALL.y - PIN.y; if ((Math.abs(get.x)<30) && (Math.abs(get.y) < 30)){ sound.play(); point++; BALL.dx = -BALL.dx; } } <meta name = "viewport" content = "width = 500"> <meta name="apple-mobile-web-app-capable" content="yes" /> <link rel="apple-touch-icon" href="http://jsrun.it/assets/R/O/L/j/ROLjg.png" /> <canvas id="pb" width=500 height=500 onClick=start()> canvas対応のブラウザでご覧下さい<img src="http://jsrun.it/assets/g/V/B/g/gVBg0.png"> </canvas> forked: ピンボールゲーム *{margin:0;padding:0;} body { background-color: lightgreen; font: 30px sans-serif; text-align:center; } canvas{//-webkit-transform:rotateX(10deg); background:white url(http://jsrun.it/assets/g/V/B/g/gVBg0.png) no-repeat; } // forked from nakashimmer's "ピンボールゲーム" http://jsdo.it/nakashimmer/4R5B var canvas = document.getElementById("pb"); var ctx = canvas.getContext("2d"); var frame = 0; // 全体のフレームカウント var JIBUN = {x:250,y:450}; // 自分 var BALL = {x:250,y:400,dx:-1,height:300}; // ボール var PIN = {x:250,y:200}; // ピン var point = 0; //得点 var crash ={x:300,y:300}; //ボールと自分の間 var get ={x:300,y:300}; //ボールとピンの間 var sound = new Audio("http://jsrun.it/assets/j/4/v/y/j4vyg.wav"); //衝撃音 //マウスの位置を取得 canvas.onmousemove = mouseMoveListener; function mouseMoveListener(e){ var rect = e.target.getBoundingClientRect(); JIBUN.x = e.clientX - rect.left; // JIBUN.y= e.clientY - rect.top; } function start(){ //animeを50ミリ秒毎起動 setInterval(anime,50); sound.play(); } //アニメ関数 function anime(){ frame++; // 背景クリア ctx.globalAlpha = 0.8; ctx.fillStyle = "lightgreen"; ctx.fillRect(0,0,500,500); //ボール描画 ctx.globalAlpha = 1; ctx.fillStyle = "white"; ctx.beginPath(); ctx.arc(BALL.x-10,BALL.y-10,20,0,2*Math.PI,true); ctx.fill(); //自分描画 ctx.fillStyle = "orange"; ctx.fillRect(JIBUN.x-50,JIBUN.y-10,100,20); //ピン描画 ctx.fillStyle = "gray"; ctx.beginPath(); ctx.arc(PIN.x-10,PIN.y-10,20,0,2*Math.PI,true); ctx.fill(); //文字描画 ctx.fillStyle = "white"; ctx.font = "20px 'arial' "; ctx.fillText("得点:" + point,0,450); //ボール移動 BALL.x = BALL.x + BALL.dx; BALL.y = Math.floor(450-Math.abs(Math.sin(frame/36))*BALL.height); // ボール移動・壁処理 if((BALL.x > 490)||(BALL.x < 10)) BALL.dx = -BALL.dx; //自分とボールの処理 crash.x = BALL.x - JIBUN.x; crash.y = BALL.y - JIBUN.y; if(Math.abs(crash.y)<5){ if (Math.abs(crash.x) < 50){ BALL.dx = BALL.dx + crash.x/10; if(BALL.dx>5)BALL.dx/=2; BALL.height=300; sound.play(); } BALL.height-=50;if(BALL.height<50)BALL.height=50; } //ボールとピンの処理 get.x = BALL.x - PIN.x; get.y = BALL.y - PIN.y; if ((Math.abs(get.x)<30) && (Math.abs(get.y) < 30)){ sound.play(); point++; BALL.dx = -BALL.dx; } } <meta name = "viewport" content = "width = 500"> <meta name="apple-mobile-web-app-capable" content="yes" /> <link rel="apple-touch-icon" href="http://jsrun.it/assets/R/O/L/j/ROLjg.png" /> <canvas id="pb" width=500 height=500 onClick=start()> canvas対応のブラウザでご覧下さい<img src="http://jsrun.it/assets/g/V/B/g/gVBg0.png"> </canvas> *{margin:0;padding:0;} body { background-color: lightgreen; font: 30px sans-serif; text-align:center; } canvas{//-webkit-transform:rotateX(10deg); background:white url(http://jsrun.it/assets/g/V/B/g/gVBg0.png) no-repeat; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author xxvaqua 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/W3EW/js"></script> application art&design canvas css game html5 html5_elements&api user_interface web Discussion Questions on this code? Tags application art&design canvas css game html5 html5_elements&api user_interface web
