canvas 接粉絲遊戲研究(v0 1)

2021-08-31 08:04:59 字數 1223 閱讀 9014

v0.1 版本實現功能:

1,canvas中呼叫一張固定url的粉絲頭像,完成頭像從上到下的位置移動。

2,繪製「籮筐」(用來接頭像的方塊),完成「籮筐」的跟隨滑鼠移動事件。

3,基礎碰撞檢測。

首先在html中書寫canvas標籤

1,獲取畫布物件~

var canvas = document.getelementbyid("canvas");

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

2,canvas中引入粉絲頭像,並設定的一些屬性。 x為的橫座標。y為的縱座標。s用來判斷碰撞後消失。

var img = new image(); 

img.src = '';

var x = 0; var y = 0; var s = true;

3,下面,是想辦法讓頭像掉落下來。這時候需要用到setinterval(執行函式, 間隔時間)方法,每隔一段時間,重複執行頭像在不同位置擦除重繪的函式。在本函式中,頭像動畫即讓y 值每隔一段時間變化。呼叫animatecanvas 時候,先判斷了s的值是否為true,為true,則頭像仍在掉落過程,執行函式。直到y值到達乙個範圍,在這個範圍內做碰撞檢測,碰撞檢測後,將s的值置為false。則不再執行animatecanvas。

setinterval(function(), 60);

//下面是animatecanvas

function animatecanvas()

else

else

s=false;

} }}

v0.2版本計畫

1,將繪圖過程與碰撞檢測分離。

2,調整思路,將此版本中按照「物件」(其實canvas中沒有這些概念)分別擦除和重繪畫布的邏輯,改為按幀每次擦除和重繪整個畫布的思路。

3,現在x為定值,將x取隨機數隨機出現。

後續計畫

1,一張改為url陣列,完成多張隨機出現。

2,碰撞檢測優化。將現在「完全碰撞」才算「接住」的方法,改為接住重心就算接住。(計算掉落物體重心,如果掉落在邊緣,掉落的動畫效果)

3,積分器及計時器。

4,開始,暫停,重玩 按鈕

5,素材優化

6,開發其他外圍功能。

終極計畫

神馬雙緩衝器(double buffer)的運用。。

總結:初版的確爛的很…………………

canvas 遊戲 桌球

直接貼 遊戲類 class game 開始 start 結束 stop 執行 run this canvas.item 畫布繪圖 this canvas.draw 球運動 this boll.run this bat.run 畫布 class canvas 清空畫布 clear 新增要繪圖元素 ad...

binrui 接藥水遊戲3 0 原接炸藥遊戲

import random import pygame import sys import time 1。載入中 loading 初始化 pygame.init 2.設定視窗大小 dis分開 展覽館 展示 寬,高 screen pygame.display.set mode 890 550 4.設定...

junjie 接小球遊戲

import pygame import random import time python game loading.初始化.載入中.pygame.init 介面遊戲 dis 分開 play玩 diaplay 展覽展示的意思 set設定 mode模式 chuang kou pygame.displ...