贪吃蛇-可视化脚本
script dog · v1.0.3 · 独立窗口 · 9 次安装
简介
经典贪吃蛇小游戏，完整的项目示例。
预览图片
匹配网址
*://*/*
脚本源码
/**
* script dog
**/
async function main() {
let food = {};
async function create_food(){
food["x"]=Math.floor((Math.random()) * 10) * 20;
food["y"]=Math.floor((Math.random()) * 10) * 20;
};
async function eat_food(){
let x = Reflect.get(snake[0],'x');
let y = Reflect.get(snake[0],'y');
if (x == Reflect.get(food,'x') && y == Reflect.get(food,'y')) {
create_food(...[]);
let block = {};
let last = snake[snake.length - 1];
block["x"]=Reflect.get(last,'x');
block["y"]=Reflect.get(last,'y');
snake.push(block);
score = score + 1;
(scoreEl.shadowRoot||scoreEl).innerText = String(score) + '分';
}
};
async function check_collision(){
let first = snake[0];
for (let sd_flow_index = 0; sd_flow_index < snake.length; sd_flow_index++) {
if (sd_flow_index == 0) {
continue
}
let block = snake[sd_flow_index];
let x = Reflect.get(block,'x');
let y = Reflect.get(block,'y');
if (x == Reflect.get(first,'x') && y == Reflect.get(first,'y')) {
console.log('游戏结束');
end = true;
break
}
}
};
async function start_game(){
snake = [];
let block = {};
block["x"]=0;
block["y"]=0;
snake.push(block);
score = 0;
dir = 'ArrowRight';
end = false;
(scoreEl.shadowRoot||scoreEl).innerText = '0分';
};
async function draw_bg(){
ctx.beginPath();
ctx.strokeStyle = '#666666';
ctx.lineWidth = 2;
for (let sd_flow_index = 0; sd_flow_index < 10; sd_flow_index++) {
ctx.moveTo(0, sd_flow_index * 20);
ctx.lineTo(200, sd_flow_index * 20);
}
for (let sd_flow_index = 0; sd_flow_index < 10; sd_flow_index++) {
ctx.moveTo(sd_flow_index * 20, 0);
ctx.lineTo(sd_flow_index * 20, 200);
}
ctx.stroke();
};
async function create_snake(args_0,args_1){
let block = {};
block["x"]=args_0;
block["y"]=args_1;
snake.push(block);
};
async function draw(){
ctx.clearRect(0, 0, 200, 200);
/* 画背景--start */
draw_bg(...[]);
/* 画背景--end */
for (let sd_flow_index = 0; sd_flow_index < snake.length; sd_flow_index++) {
let block = snake[sd_flow_index];
ctx.beginPath();
let x = Reflect.get(block,'x');
let y = Reflect.get(block,'y');
ctx.roundRect(x, y, 20, 20, );
if (sd_flow_index == 0) {
ctx.fillStyle = '#ff6666';
} else {
ctx.fillStyle = '#ff9966';
}ctx.fill();
ctx.fillStyle = '#ffffff';
ctx.fillText(String(sd_flow_index),x + 10, y + 10);
}
ctx.beginPath();
ctx.roundRect(Reflect.get(food,'x'), Reflect.get(food,'y'), 20, 20, );
ctx.fillStyle = '#00cccc';
ctx.fill();
};
/* 游戏逻辑--start */
setInterval(() => {
if (end) {
return;
}
let block = {};
let x = Reflect.get(snake[0],'x');
let y = Reflect.get(snake[0],'y');
if (dir === 'ArrowRight') {
block["y"]=y;
if (x - 20 < 180) {
block["x"]=x + 20;
} else {
block["x"]=0;
}
}
if (dir === 'ArrowLeft') {
block["y"]=y;
if (x - 20 >= 0) {
block["x"]=x - 20;
} else {
block["x"]=180;
}
}
if (dir === 'ArrowUp') {
block["x"]=x;
if (y - 20 >= 0) {
block["y"]=y - 20;
} else {
block["y"]=180;
}
}
if (dir === 'ArrowDown') {
block["x"]=x;
if (y - 20 < 180) {
block["y"]=y + 20;
} else {
block["y"]=0;
}
}
snake.unshift(block);
snake.pop();
check_collision(...[]);
eat_food(...[]);
draw(...[]);
}, 400);
/* 游戏逻辑--end */
/* 创建界面--start */
let canvas = document.createElement("canvas");
(document.body.shadowRoot||document.body).appendChild(canvas);
canvas.width = 200;
canvas.height = 200;
Object.assign(canvas.style,{background: '#000000', color: "none"});
let box = document.createElement("div");
let scoreEl = document.createElement("span");
let btn = document.createElement("button");
(document.body.shadowRoot||document.body).appendChild(box);
(btn.shadowRoot||btn).innerText = '开始';
(box.shadowRoot||box).appendChild(scoreEl);
Object.assign(scoreEl.style,{margin:' 20px '});
(box.shadowRoot||box).appendChild(btn);
(scoreEl.shadowRoot||scoreEl).innerText = '0分';
/* 创建界面--end */
let ctx = canvas.getContext('2d');
let snake = [];
let dir = 'ArrowRight';
let end = true;
let score = 0;
create_food(...[]);
create_snake(...[0,0]);
document.body.addEventListener('keydown', async (event) => {
dir = event.key;
});
btn.addEventListener('click', async (event) => {
start_game(...[]);
});
}