結對-五子棋遊戲-開發過程
阿新 • • 發佈：2017-10-05
erb body pat begin -c ext 效果圖 str 利用
項目所在地址：https://gitee.com/zixiao520/h5WuZiQi/tree/master
css與js都采用內聯式
1.創建canvas :html代碼部分
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta content="text/html; charset=utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 body { 8 margin: 10px; 9 } 10 11 </head> 12 <body > 13 <div> 14 <canvas width="640" id="canvas" height="640"> 15 </canvas> 16 </div> 17 18 </body> 19 </html>
2.css部分：
<style type="text/css"> body { margin: 10px; } div { text-align:center; } canvas{ background-color:cornflowerblue; } </style>
3.js部分：利用canvas技術畫出棋盤，並導入棋子
1 <script type="text/javascript"> 2 var canvas; 3 var context; 4 var img_b = newImage(); 5 img_b.src = "b.png"; 6 var img_w = new Image(); 7 img_w.src = "w.png"; 8 function drawRect() { 9 canvas = document.getElementById("canvas"); 10 context = canvas.getContext("2d"); 11 12 for (var i = 0; i <= 640; i += 40) { 13 context.beginPath(); 14 context.moveTo(0, i); 15 context.lineTo(640, i); 16 context.closePath(); 17 context.stroke(); 18 19 context.beginPath(); 20 context.moveTo(i, 0); 21 context.lineTo(i, 640); 22 context.closePath(); 23 context.stroke(); 24 } 25 } 26 27 </script>
4.網頁效果圖：
結對-五子棋遊戲-開發過程