html5製作星星閃爍和製作時鐘

2021-08-02 00:19:49 字數 1826 閱讀 5697

這次在w3和慕課網上

學習html5製作了星星閃爍和時鐘，期間也遇到了一些問題，比如

getcontext（）讀不

1、星星閃爍展示

js**：

var can;


var ctx;


var w;


var h;


var padleft = 360;


var padtop = 100;


var girlwidth = 600;


var girlheight = 300;


var deltatime;


var lasttime;


var girlpic = new image();


var starpic = new image();


var stars = ;


var num = 60;


var alive = 0;


var switchy = false;


window.requestanimframe = (function() ;


})();


function init() 


lasttime = date.now();


gameloop();


}function gameloop() 


function fillcanvas() 


function drawgirl() 


function mousemove(e)  else 


}}

var starobj = function() 


starobj.prototype.init = function() 


starobj.prototype.update = function() 


}starobj.prototype.draw = function() 


function drawstars() 


}function aliveupdate() 


} else 


}}
html**：

demo_1


demo_2

js**：

var dom = document.getelementbyid('clock');


var ctx = dom.getcontext("2d");


var width = ctx.canvas.width;


var height = ctx.canvas.height;


var r = width / 2;


//定義鐘盤


function drawbackground())


//定義刻度


for(var i=0;i<60;i++)else


ctx.fill();


}}//定義時鐘


function drawhour(hour,minute)


//定義分鐘


function drawminute(minute,second)


//定義秒鐘


function drawsecond(second)


//定義鐘盤圓點樣式


function drawdot()


//時間函式


function draw()


setinterval(draw, 1000);
html**：

demo_1


demo_2


您的瀏覽器不相容canvas

HTML5遊戲設計與製作

第二次用construct2這款軟體製作小遊戲，也變得漸漸上手了。這次製作的是類似於 是男人就下100層 的經典遊戲！楔子 setting 話說當年三國時期，吳國大將黃蓋前往曹營詐降獻策，歷史中曹操受騙赤壁戰大敗。然而命運這一次卻傾向了曹軍，曹操識破了黃蓋陰謀，黃蓋也因此被打入地牢。遊戲中黃蓋化身火...

HTML5遊戲設計與製作 高階篇

再說說遊戲策劃方面的 setting 超級瑪麗為了去城堡救出公主而踏上了他的征程，路途中有無數怪物。gameplay 玩家操縱超級瑪麗進行移動或者發射子彈消滅怪物，最終找到公主完成任務。1.boss 會投擲斧頭的怪物 2.player 超級瑪麗，可以吃蘑菇獲得進化或者發現隱藏的綠色蘑菇加一條生命 3...

HTML5實踐 使用css製作時間 ICON

最近我在重新設計自己的部落格站點，決定用乙個日曆樣式的icon顯示時間。以前的解決方案一般是用背景，感謝css3，現在我們用css3就能實現這樣的功能。我將會用到一些linear gradients,border radius 和 box shadow這些屬性來代替以前的photoshop設計。ph...