HTML5 + Canvas + 廣度優先搜索（BFS） 撰寫lol連連看
HTML5 + Canvas + 廣度優先搜索（BFS） 撰寫lol連連看
提示：寫完文章后，目錄可以自動生成，如何生成可參考右邊的幫助檔案
文章目錄
- HTML5 + Canvas + 廣度優先搜索（BFS） 撰寫lol連連看
- 前言
- 二、html代碼
- 二、js
- hero.js
- game.js
- 三、效果
前言
使用 BFS 廣度優先搜索撰寫 連連看，
起點是b，終點是e
檢查b的上下左右（當前位置加 x:0,1,0,-1|y:-1,0,1,0） ，如果不為h（沒有連對的英雄障礙物）則放到佇列中，回圈讀取佇列直到找到終點e
# 一、準備資料 1.使用python 爬取lol官網獲取頭像圖片
# -*- coding: utf-8 -*
import requests
import json
import os
from tqdm import tqdm
headers = {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36'
}
url = 'https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js'
html_data = requests.get(url, headers=headers)
img_out_path = os.path.join(os.path.join(os.getcwd(), ".."), "hero_img")
if not os.path.exists(img_out_path):os.makedirs(img_out_path)
heros = json.loads(html_data.text)
for h in tqdm(heros["hero"]):
img_url = "https://game.gtimg.cn/images/lol/act/img/champion/" + h["alias"] + '.png'
img = requests.get(img_url,headers=headers)
if img.status_code == 200:
img_name = os.path.join(img_out_path, h["alias"]+".png")
with open(img_name,'wb') as f:
f.write(img.content)
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-vpFgvgrj-1618969654673)(D:\markdown\6W3JtrF1bAEnIhT.png)]
得到頭像圖片
二、html代碼
創建兩個畫布，main-canvas 用來顯示圖片，main-canvas2 用來顯示選中狀態還有連線
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple Canvas Game</title>
<!--style="position:relative; z-index:-1"-->
<div>
<div style="position:relative; z-index:-1" >
<canvas id="main-canvas"></canvas>
</div>
<canvas style="position:absolute;top:0;left:0; z-index:9999" id="main-canvas2"></canvas>
</div>
<div id="container"></div>
</head>
<body>
<script src="js/heros.js"></script>
<script src="js/game.js"></script>
</body>
</html>
二、js
hero.js
#字串的拼接 可以用python print(os.listdir("../hero_img"))
var heros = ['Aatrox.png', 'Ahri.png', 'Akali.png', 'Alistar.png', 'Amumu.png', 'Anivia.png', 'Annie.png', 'Aphelios.png', 'Ashe.png', 'AurelionSol.png', 'Azir.png', 'Bard.png', 'Blitzcrank.png', 'Brand.png', 'Braum.png', 'Caitlyn.png', 'Camille.png', 'Cassiopeia.png', 'Chogath.png', 'Corki.png', 'Darius.png', 'Diana.png', 'Draven.png', 'DrMundo.png', 'Ekko.png', 'Elise.png', 'Evelynn.png', 'Ezreal.png', 'FiddleSticks.png', 'Fiora.png', 'Fizz.png', 'Galio.png', 'Gangplank.png', 'Garen.png', 'Gnar.png', 'Gragas.png', 'Graves.png', 'Hecarim.png', 'Heimerdinger.png', 'Illaoi.png', 'Irelia.png', 'Ivern.png', 'Janna.png', 'JarvanIV.png', 'Jax.png', 'Jayce.png', 'Jhin.png', 'Jinx.png', 'Kaisa.png', 'Kalista.png', 'Karma.png', 'Karthus.png', 'Kassadin.png', 'Katarina.png', 'Kayle.png', 'Kayn.png', 'Kennen.png', 'Khazix.png', 'Kindred.png', 'Kled.png', 'KogMaw.png', 'Leblanc.png', 'LeeSin.png', 'Leona.png', 'Lillia.png', 'Lissandra.png', 'Lucian.png', 'Lulu.png', 'Lux.png', 'Malphite.png', 'Malzahar.png', 'Maokai.png', 'MasterYi.png', 'MissFortune.png', 'MonkeyKing.png', 'Mordekaiser.png', 'Morgana.png', 'Nami.png', 'Nasus.png', 'Nautilus.png', 'Neeko.png', 'Nidalee.png', 'Nocturne.png', 'Nunu.png', 'Olaf.png', 'Orianna.png', 'Ornn.png', 'Pantheon.png', 'Poppy.png', 'Pyke.png', 'Qiyana.png', 'Quinn.png', 'Rakan.png', 'Rammus.png', 'RekSai.png', 'Rell.png', 'Renekton.png', 'Rengar.png', 'Riven.png', 'Rumble.png', 'Ryze.png', 'Samira.png', 'Sejuani.png', 'Senna.png', 'Seraphine.png', 'Sett.png', 'Shaco.png', 'Shen.png', 'Shyvana.png', 'Singed.png', 'Sion.png', 'Sivir.png', 'Skarner.png', 'Sona.png', 'Soraka.png', 'Swain.png', 'Sylas.png', 'Syndra.png', 'TahmKench.png', 'Taliyah.png', 'Talon.png', 'Taric.png', 'Teemo.png', 'Thresh.png', 'Tristana.png', 'Trundle.png', 'Tryndamere.png', 'TwistedFate.png', 'Twitch.png', 'Udyr.png', 'Urgot.png', 'Varus.png', 'Vayne.png', 'Veigar.png', 'Velkoz.png', 'Vi.png', 'Viego.png', 'Viktor.png', 'Vladimir.png', 'Volibear.png', 'Warwick.png', 'Xayah.png', 'Xerath.png', 'XinZhao.png', 'Yasuo.png', 'Yone.png', 'Yorick.png', 'Yuumi.png', 'Zac.png', 'Zed.png', 'Ziggs.png', 'Zilean.png', 'Zoe.png', 'Zyra.png']
game.js
1 hero
? 英雄類，控制是否顯示，是否選中，當前坐標位置和二維陣列的index ，copy方法是復制當前物件
2.Queue
? 佇列，先進先出
3.point
? 點位物件，入參 英雄物件，獲取英雄物件的 坐標位置 和陣列下標
4.parent
? 畫地圖時存的物件，存的上一個點位的坐標和下標
5.game
? 5.1 init
? 初始化畫布，初始化英雄串列，初始化點擊方法
? 5.2 plant_rect
? 根據 xy 寬高 畫遮罩層
? 5.3 erase
? 清除畫線畫布 的線和 遮罩
? 5.4 hero_click
? 點擊方法，根據坐標獲取選中的英雄，畫遮罩層，判斷當前是否有兩個選中 ，如果是 是否相同，相同的話調取畫線方法，畫線方法回傳布林值 代表畫線是否 成功，成功后清除畫布
? 5.5 plant_line
? 畫線方法，判斷兩個英雄中間是否有 英雄，使用廣度優先搜索
? 5.6 getRandomHeros
? 隨機獲取heros物件里的英雄 并復制一份
? 5.7 random_sort
? 隨機英雄串列
/**英雄*/
class hero{
constructor(src,name,xy,pos,show=true,selected=false){
this.image = new Image()
this.image.src = src
this.name = name; //名稱
this.show = show; //默認顯示
// this.selected = selected; //默認沒有選中
this.xy = xy; //元素位置
this.pos = pos; //陣列坐標
}
copy(){
let src = this.image.src;
let name = this.name;
let xy = this.xy;
let pos = this.pos;
let h2 = new hero(src,name,xy,pos)
return h2;
}
toString(){
return JSON.stringify(this)
}
}
/**佇列*/
class Queue{
constructor(){
this.items=[];
}
//入隊
enqueue() {
var len = arguments.length;
if (len == 0) {
return;
}
for (var i = 0; i < len; i++) {
this.items.push(arguments[i])
}
}
//出隊
dequeue() {
var result = this.items.shift();
return typeof result != 'undefined' ? result : false;
}
//出隊
rdequeue() {
var result = this.items.pop();
return typeof result != 'undefined' ? result : false;
}
//佇列是否為空
isEmpty() {
return this.items.length == 0;
}
//回傳佇列長度
size() {
return this.items.length;
}
//清空佇列
clear() {
this.items = [];
}
//回傳佇列
show() {
return this.items;
}
}
class point{
constructor(hero) {
let xy = hero.xy.split(",");
let pos = hero.pos.split(",");
this.x = parseInt(xy[0]);
this.y = parseInt(xy[1]);
this.pos_y = parseInt(pos[0]);
this.pos_x = parseInt(pos[1]);
}
}
class parent{
constructor() {
this.px = 0;
this.py = 0;
this.step = 0;
}
}
var game = {
canvas: document.getElementById("main-canvas"),
plant_canvas: document.getElementById("main-canvas2"), //畫線
ctx: null,
plant_ctx: null,
then: null,
requestAnimationFrame: null,
lol_arr: new Array(),
lol_arr_map: new Array(),
score: 0,
selected_hero: {},
/**初始化*/
init: function(){
this.ctx = game.canvas.getContext('2d');
this.plant_ctx = game.plant_canvas.getContext('2d');
w = window;
this.requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
this.canvas.width = 1920,this.canvas.height = 1080;
this.plant_canvas.width = 1920,this.plant_canvas.height = 1080;
this.lol_arr = this.getRandomHeros()
this.lol_arr_map = JSON.parse(JSON.stringify(this.lol_arr));
this.plant_canvas.addEventListener('click', this.hero_click, false);
},
/**選中遮罩*/
plant_rect:function (x,y,w,h){
this.plant_ctx.fillStyle = "rgba(192, 80, 77, 0.7)";
this.plant_ctx.fillRect(x,y,w,h);
},
/**清除畫線和遮罩*/
erase:function(){
let _this = game;
setTimeout(function(line){
//獲取當前時間
_this.plant_ctx.clearRect(0,0,1920,1080);
_this.ctx.clearRect(0,0,1920,1080);
},1000);
},
/**點擊*/
hero_click: function(e){
let _this = game;
let x = Math.floor(e.clientX/120);
let y = Math.floor(e.clientY/120);
let h = _this.lol_arr[y][x];
if(h == undefined || h.constructor != hero){
_this.selected_hero = {};
_this.erase();
return;
}
let xy = h.xy.split(",");
_this.plant_rect(xy[0],xy[1],120,120);
if(JSON.stringify(_this.selected_hero) == "{}"){
_this.selected_hero = h;
}else{
if(_this.selected_hero.toString() != h.toString() && _this.selected_hero.name == h.name){
console.log("一致")
console.log(new point(_this.selected_hero),new point(h))
let flag = _this.plant_line(new point(_this.selected_hero),new point(h));
if(flag){
_this.selected_hero.show = false;
h.show = false;
}
}else{
console.log("不一致")
}
_this.selected_hero = {};
_this.erase();
}
console.log("選中了",h);
},
/**4方位*/
plant_line: function(begin,end){
let _this = game;
let q = new Queue();
q.enqueue(begin)
let dx = [0,1,0,-1]; //x方向
let dy = [-1,0,1,0]; //y方向
let map = new Array();
for(var i = 0; i<8; i++) {
for (var i2 = 0; i2 < 11; i2++) {
if(map[i] == undefined){
map[i] = new Array();
}
map[i][i2] = new parent();
}
}
/**BFS*/
while(!q.isEmpty()){
let p = q.dequeue();
if(p.pos_x == end.pos_x && p.pos_y == end.pos_y) {
let x = p.pos_x;
let y = p.pos_y;
let tmpx = 0;
let tmpy = 0;
_this.plant_ctx.beginPath();
_this.plant_ctx.lineWidth = 15;
_this.plant_ctx.strokeStyle = "#005500";
_this.plant_ctx.moveTo(end.x+60,end.y+60);
//列印
while(x != begin.pos_x || y != begin.pos_y) {
tmpx = map[y][x].px;
tmpy = map[y][x].py;
x = tmpx;
y = tmpy;
_this.plant_ctx.lineTo(x*120+60,y*120+60);
_this.plant_ctx.stroke();
}
_this.plant_ctx.closePath();
_this.lol_arr_map[begin.pos_y][begin.pos_x] = begin.toString();
_this.lol_arr_map[end.pos_y][end.pos_x] = begin.toString();
return true;
}else{
for(var i = 0;i < 4; i++){
let nx = p.pos_x + dx[i];
let ny = p.pos_y + dy[i];
if(nx >= 0 && nx < 11 && ny >= 0 && ny < 8) {
if(_this.lol_arr_map[ny][nx].constructor == String){
if(map[ny][nx].step == 0){
let p2 = new point(new hero("","",[ny,nx].toString(),[ny,nx].toString()));
q.enqueue(p2);
map[ny][nx].step = map[p.pos_y][p.pos_x].step + 10;
map[ny][nx].px = p.pos_x;
map[ny][nx].py = p.pos_y;
}
}else if(nx == end.pos_x && ny == end.pos_y){
q.clear();
let p3 = new point(new hero("","",[ny,nx].toString(),[ny,nx].toString()));
q.enqueue(p3);
map[ny][nx].step = map[p.pos_y][p.pos_x].step + 10;
map[ny][nx].px = p.pos_x;
map[ny][nx].py = p.pos_y;
break;
}
}
}
}
}
return false;
},
/**生成隨機陣列*/
getRandomHeros: function(){
var arr = new Array();
// var i = 0,i2 = 0;
let last_hero = new hero();
let num = 1;
for(var i = 0; i<8; i++){
for(var i2 = 0; i2<11; i2++){
if(arr[i] == undefined){
arr[i] = new Array()
}
//四周加上默認值
if(i==0 || i == 7 || i2 == 0 || i2 ==10){
arr[i][i2] = [i,i2].toString()
}else{
let h;
if(num%2 == 0){
last_hero.xy = [i2*120,i*120].toString();
last_hero.pos = [i,i2].toString();
h = last_hero.copy();
}else{
let xy= [i2*120,i*120];
let r = Math.ceil(Math.random() * heros.length-1) //從英雄池里隨機獲取
let h_n = heros[r]; //英雄名
h = new hero(src="../hero_img/"+h_n,name=h_n.split(".")[0],xy=xy.toString(),pos=[i,i2].toString()) //英雄
last_hero = h.copy();
}
arr[i][i2] = h
}
num++;
}
}
arr = game.random_sort(arr)
//打亂順序
return arr;
},
/**陣列隨機*/
random_sort: function(dic){
let ylen = dic.length;
let xlen = dic[0].length;
for(var i = 0; i<ylen; i++) {
for (var i2 = 0; i2 < xlen; i2++) {
let yr = Math.ceil(Math.random() * (ylen-2))
let xr = Math.ceil(Math.random() * (xlen-2));
let h = dic[yr][xr];
if (h.constructor === hero && dic[i][i2].constructor === hero){
let lsh = dic[yr][xr].copy();
let lsh2 = dic[i][i2].copy();
dic[yr][xr].name = lsh2.name;
dic[i][i2].name = lsh.name;
dic[yr][xr].image = lsh2.image;
dic[i][i2].image = lsh.image;
}
}
}
return dic;
},
render: function(){
for(var i = 0; i<8; i++){
for(var i2 = 0; i2<11; i2++){
let h = game.lol_arr[i][i2];
if (h.constructor === hero){
if(h.show){
let xy_arr = h.xy.split(",")
game.ctx.drawImage(h.image,xy_arr[0],xy_arr[1]);
}
}
}
}
},
main: function(){
game.render();
requestAnimationFrame(game.main)
},
}
game.init()
game.main()
三、效果
# 總結
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/278547.html
標籤：其他
上一篇：C1任務01資訊編碼