整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
又在別的地方嫖到了這個效果研究了億下下，制作過程如下（超詳細）：
<canvas id="canvas"></canvas>
#canvas{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-shadow: 0 0 10px rgb(150, 150, 150);
}
position: absolute; 絕對定位。
top: 50%;
left: 50%;
transform: translate(-50%,-50%); 居中。
box-shadow: 0 0 10px rgb(150, 150, 150); 陰影。
var canvas=document.querySelector("#canvas");
var ctx=canvas.getContext('2d');
//畫布寬
var wide=600;
//畫布高
var high=600;
// 變量，判斷一次渲染中只識別按鍵一次
var kd=0;
//當前分數
var fraction=0;
//速度，就是執行定時器的時間參數
var speed=250;
// 蛇的初始顏色 紅色
var yanse=`red`;
// 蛇數組，組成蛇的每一個方塊
var snake=[];
// 食物數組
var food={};
// 蛇的移動方向，x軸：1為向右，-1為向左；y軸：1為向下，-1為向上 。不能斜著走，所以0為某軸無方向。
var diretion={
x:-1,
y:0
}
// 給畫布寬高賦值 打算畫一個長寬都是30個20px的方塊畫布
canvas.width=wide;
canvas.height=high;
function chushi(){
//蛇初始長度為3個方塊，位置如下（這個隨意）
for(let i=0;i<3;i++){
snake.push({
x: i+10,
y: 10
})
}
// 給食物一個隨機位置和隨機顏色
food={
x: parseInt(Math.random()*30),
y: parseInt(Math.random()*30),
color:`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`
}
}
// 繪制圖形
function draw(){
// 繪制顯示當前分數的文字
ctx.fillStyle='rgba(255,255,255,0.5)';
ctx.font="50px 仿宋";
ctx.textAlign='center';
ctx.fillText("你的分數為："+fraction+" 分",300,300);
// 繪制方格，長寬都是30個，都是19px*19px的方格
for(let i=0;i<30;i++){
for(let j=0;j<30;j++){
ctx.fillStyle='rgba(255, 255, 255,.3)';
ctx.fillRect(i*20,j*20,19,19);
}
}
// 繪制蛇
for(let i=0;i<snake.length;i++){
temp=snake[i];
ctx.fillStyle=yanse;
ctx.fillRect(temp.x*20,temp.y*20,19,19);
// 判斷蛇頭（第一個方塊）是否與身體某個方塊重合 ，就是頭撞到身體
if(temp.x==snake[0].x&&temp.y==snake[0].y&&i!=0){
// 游戲結束，重新給初始化
alert('游戲結束~點擊確認再來一次~');
fraction=0;
snake.length=0;
chushi();
}
}
// 繪制食物，繪制一個圓形
ctx.beginPath();
ctx.fillStyle=food.color;
ctx.arc(food.x*20+9.5,food.y*20+9.5,7,0,Math.PI*2,false);
ctx.stroke();
ctx.fill();
ctx.closePath();
// 給蛇頭繪制一個字符，☆ ，好區分頭尾 ，也可省略
ctx.fillStyle='yellow';
ctx.font="15px 仿宋";
ctx.textAlign="start";
ctx.fillText("☆",snake[0].x*20+2,snake[0].y*20+14.5);
}
//更新
function update(){
// 建一個對象head，這個為蛇的新頭，通過繪制新頭，去掉尾部實現移動效果
var head={};
//判斷蛇頭是否遇到邊界，到邊界則在另一邊重新繪制 x軸
switch (snake[0].x+diretion.x){
case -1: head.x=29;break;
case 30: head.x=0;break;
// 沒到邊界則為當前位置加方向
default: head.x=snake[0].x+diretion.x;
}
//判斷蛇頭是否遇到邊界，到邊界則在另一邊重新繪制 y軸
switch (snake[0].y+diretion.y){
case -1: head.y=29;break;
case 30: head.y=0;break;
// 沒到邊界則為當前位置加方向
default: head.y=snake[0].y+diretion.y;
}
// 判斷新蛇頭是否與食物重合，就是吃到食物
if(head.x==food.x&&head.y==food.y){
//蛇的顏色為吃到食物的顏色
yanse=food.color;
// 重新給食物初始化
food={
x: parseInt(Math.random()*30),
y: parseInt(Math.random()*30),
color:`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`
}
//在蛇尾添加一節
let temp=snake[length-1];
snake.push(temp);
fraction+=1;
// 吃完食物速度加快
if(speed>80){
//定時器間隔減10
speed=speed-10;
// 清除原來定時器，重新繪制
clearInterval(time);
time=setInterval(function () {
kd=0;
ctx.clearRect(0, 0, wide, high);
update();
draw();
}, speed);
}
}
//添加新頭
snake.splice(0,0,head);
//去掉尾部
snake.pop();
}
//判斷點擊事件
document.addEventListener('keydown', event=>{
switch (event.keyCode){
// 按了向上鍵
case 38:
// 判斷當前不是向下移動與還沒按過鍵，否則蛇會重疊
if(diretion.y!=1&&kd==0){
// 重新給移動方向賦值
diretion.x=0;
diretion.y=-1;
kd=1;
}
break;
// 下面以此類推一樣的原理
case 39:
if(diretion.x!=-1&&kd==0){
diretion.x=1;
diretion.y=0;
kd=1;
}
break;
case 40:
if(diretion.y!=-1&&kd==0){
diretion.x=0;
diretion.y=1;
kd=1;
}
break;
case 37:
if(diretion.x!=1&&kd==0){
diretion.x=-1;
diretion.y=0;
kd=1;
}
break;
}
})
chushi();
var time=setInterval(function(){
kd=0;
ctx.clearRect(0,0,wide,high);
update();
draw();
},speed);
avascript Sudoku Puzzle Generator，含算法說明。 數獨是源自18世紀瑞士的一種數學游戲。
這是一種運用紙、筆進行演算的邏輯游戲。玩家需要根據9×9盤面上的已知數字，推理出所有剩余空格的數字，并滿足每一行、每一列、每一個粗線宮（3*3）內的數字均含1-9，不重復。 數獨盤面是個九宮，每一宮又分為九個小格。在這八十一格中給出一定的已知數字和解題條件，利用邏輯和推理，在其他的空格上填入1-9的數字。使1-9每個數字在每一行、每一列和每一宮中都只出現一次，所以又稱“九宮格”。 很棒的益智數學小游戲，適合小學生、初中生奧數題訓練。
示例如下圖（文章最后提供了游戲的在線網址）
你可以訪問以下網址，進行在線體驗：http://www.ikinsoft.com/3ddemo/sudoku.html
一個手機游戲源碼選用簡易的htm5做的手游！作用取決于原生js！
本htm5手游含有人工智能優化算法！詳盡參照人工智能.原生js的文檔！
密碼：95he28
有技術性的能夠 自身改
人們能夠 應用xlhtml搞個ksweb導進源代碼能夠 立即運作！
ps軟件：用內置電腦瀏覽器錯碼！沒有設定編號！自身去value.html代碼里邊改！
選用Google，火狐瀏覽器一切正常運作不容易錯碼
實例教程：把源代碼上傳入室內空間，隨后緩解壓力，隨后域名解析，隨后網站訪問網站域名就進行啦！
鏈接：https://share.weiyun.com/5fwCPHD
文章來源：https://www.xigsc.com/post/243.html
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
