結對編程-五子棋遊戲-開發過程
阿新 • • 發佈：2017-10-06
es2017 draw ges lin mage func img 所在 blue
1.項目所在地址：https://gitee.com/g961231/WuZiQi/commits/master
2.CSS和JS都采用內聯式
3.創建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>
4.編寫css部分
<style type="text/css">
body {
margin: 10px;
}
div {
text-align:center;
}
canvas{
background-color:cornflowerblue;
}
</style>
5.JS部分：利用canvas技術畫出棋盤，並導入棋子
<script type="text/javascript"> var canvas; var context; var img_b = new Image(); img_b.src = "b.png"; var img_w = new Image(); img_w.src = "w.png"; function drawRect() { canvas = document.getElementById("canvas"); context = canvas.getContext("2d"); for (var i = 0; i <= 640; i += 40) { context.beginPath(); context.moveTo(0, i); context.lineTo(640, i); context.closePath(); context.stroke(); context.beginPath(); context.moveTo(i, 0); context.lineTo(i, 640); context.closePath(); context.stroke(); } } </script>
6.網頁顯示的效果
結對編程-五子棋遊戲-開發過程