這幾天學習了乙個祖瑪遊戲的小demo,記錄下這個小遊戲的編寫過程。
1：首先實現的乙個簡單介面效果。
2：在圖形繪製完成後，讓黑色小球沿著圓形弧線運動。
編碼過程
建立畫布，繪製圓形弧線。
首先在html頁面上定義乙個canvas標籤。
在js**中，實現canvas繪圖功能。
1：繪製弧形圖。
gc.beginpath();2：建立乙個動起來的小球。由於後面的目標小球會有多個，需定義乙個陣列。//呼叫繪圖的 arc(x,y,r,start,stop,counterclockwise) 方法建立乙個園
//其中x,y是圓心座標，r是半徑，start是開始弧度，
//stop是結束弧度，counterclockwise false順時鐘 true逆時鐘 預設位順時鐘。
//三點鐘是0弧度 ，12點是1.5弧度。
gc.arc(300,200,200,1.5*math.pi,1*math.pi,false);
//stroke()和fill()的區別在於,fill()是填充繪製圖形
gc.stroke();
gc.closepath();
gc.beginpath();
//繪製在180度的時候，大圓變成小圓。將圓心移動（250,200）處。
gc.arc(250,200,150,1.*math.pi,2*math.pi,false);
gc.stroke();
gc.closepath();
gc.beginpath();
//繪製結束處的小圓，半徑為20.
gc.arc(400,200,20,0*math.pi,2*math.pi);
gc.stroke();
gc.closepath();
var ball=;3：讓建立的小球動起來。建立的小球動起來，通過改變小球的圓心座標，重新繪製這個小球。ball[0]=;
改變小球的圓心座標，通過角度計算相加得到
//建立乙個定時器，每隔30秒改變小球的圓心點座標4：動態能夠改變小球的圓心點座標後，把小球加入到畫布，小球動起來。setinterval(function()
},30);
}
小球能夠動起來，實際上通過每隔多少秒，重新清理下畫布，在重新繪製該畫布，達到實現動態的效果。
呼叫：clearrect(x,y,width,height)方法，清理從（x,y）處開始的座標的長度的畫布。
//清理畫布5：關於弧度和角度的換算問題。gc.clearrect(0,0,context.width,context.height);
//加入小球
for(var i=0;i<
ball
.length;i++)
canvas中大多數函式，以弧度計算 需將角度轉換弧度，角度轉換弧度只需將角度乘以 0.017453293 （2pi/360）即可轉換為弧度。
即math.pi/180。
未完待續。
Python學習筆記 練習 和電腦對戰的小遊戲
學習python的練習題，稍微做了點改動和優化 人機大戰 給雙方命名 隨機分配血量和攻擊力給雙方 一定範圍 比大小決定誰先出手 列印每一回合的戰況 列印最終結果 增加隨機性 import time,random players print 歡迎來到劍魂世界！time.sleep 1 給玩家起名 pl...
canvas練習單個矩形形變
您的瀏覽器不支援canvas 紅色線以及其內部是變幻矩形的區域 綠色小方塊是四個角的操作區域，可以同時改變寬高 黃色部分是通過邊來單一改變矩形寬高的 將這些區域的路徑資料值寬高存到pathes陣列中，並且以他們的索引值作為代號 通過ispointinpath 這個函式判斷滑鼠在哪個路徑裡面，然後進行...
JavaScript 基於canvas的小遊戲
之前在寫的打小怪獸遊戲總算初步完工了，上 嘍 顯示元素 var score document.queryselectorall score 畫布元素 var container document.getelementbyid game var canvas document.getelementby...