遊戲介面
每吃一個紅點加速10% 分數+1
直接給程式碼了
不懂怎麼用的話去看前面幾篇
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>飆速蛇</title><style>#gameCanvas{border:1px solid black}.game-over-screen{display:none;position:absolute;top:350px;left:400px;transform:translate(-50%,-50%);background-color:rgba(0,0,0,0.8);color:white;padding:20px;text-align:center;font-size:24px}</style></head><body><h3 style="margin-left: 360px">飆速蛇</h3><canvas id="gameCanvas"width="800"height="600"></canvas><br><button id="startButton">開始遊戲</button><div id="scoreBoard"><h3>目前分數:<span id="score">0</span></h3><h3>目前速度:<span id="speed">1</span></h3></div><div id="gameOverScreen"class="game-over-screen"><h2>遊戲結束!</h2><button id="restartButton">重新開始遊戲</button></div><script>var canvas=document.getElementById("gameCanvas");var context=canvas.getContext("2d");var gameWidth=800;var gameHeight=600;var snakeSize=20;var direction;var snake=[{x:0,y:0}];var food={x:0,y:0};var score=0;var speed=100;var speedIncrement=10;var speedMultiplier=1;var speedElement=document.getElementById("speed");var startButton=document.getElementById("startButton");var scoreElement=document.getElementById("score");var gameOverScreen=document.getElementById("gameOverScreen");var restartButton=document.getElementById("restartButton");var gameRunning=false;var gameInterval;startButton.addEventListener("click",startGame);restartButton.addEventListener("click",restartGame);document.addEventListener("keydown",function(event){if(gameRunning){switch(event.key){case"ArrowUp":if(direction!=="down"){direction="up"}break;case"ArrowDown":if(direction!=="up"){direction="down"}break;case"ArrowLeft":if(direction!=="right"){direction="left"}break;case"ArrowRight":if(direction!=="left"){direction="right"}break}}});function startGame(){if(!gameRunning){gameRunning=true;direction="right";snake=[{x:0,y:0}];score=0;speedMultiplier=1;createFood();updateSpeedElement();gameInterval=setInterval(moveSnake,speed)}}function createFood(){var validPosition=false;while(!validPosition){food.x=Math.floor(Math.random()*(gameWidth/snakeSize))*snakeSize;food.y=Math.floor(Math.random()*(gameHeight/snakeSize))*snakeSize;validPosition=isFoodPositionValid()}}function isFoodPositionValid(){for(var i=0;i<snake.length;i++){if(snake[i].x===food.x&&snake[i].y===food.y){return false}}return true}function moveSnake(){var head={x:snake[0].x,y:snake[0].y};switch(direction){case"up":head.y-=snakeSize;break;case"down":head.y+=snakeSize;break;case"left":head.x-=snakeSize;break;case"right":head.x+=snakeSize;break}if(head.x>=gameWidth){head.x=0}else if(head.x<0){head.x=gameWidth-snakeSize}if(head.y>=gameHeight){head.y=0}else if(head.y<0){head.y=gameHeight-snakeSize}if(isCollisionWithSelf(head)){gameOver();return}snake.unshift(head);if(head.x===food.x&&head.y===food.y){score+=1;if(score%1===0){speedMultiplier+=speedIncrement/100;clearInterval(gameInterval);gameInterval=setInterval(moveSnake,speed/speedMultiplier);updateSpeedElement()}createFood()}else{snake.pop()}drawGame()}function isCollisionWithSelf(head){for(var i=1;i<snake.length;i++){if(head.x===snake[i].x&&head.y===snake[i].y){return true}}return false}function drawGame(){context.clearRect(0,0,canvas.width,canvas.height);context.fillStyle="black";context.fillRect(snake[0].x,snake[0].y,snakeSize,snakeSize);context.fillStyle="green";for(var i=1;i<snake.length;i++){context.fillRect(snake[i].x,snake[i].y,snakeSize,snakeSize)}context.fillStyle="red";context.fillRect(food.x,food.y,snakeSize,snakeSize);scoreElement.textContent=score}function gameOver(){clearInterval(gameInterval);gameRunning=false;gameOverScreen.style.display="block"}function restartGame(){gameOverScreen.style.display="none";startGame()}function updateSpeedElement(){speedElement.textContent=speedMultiplier.toFixed(1)}</script></body></html>
這次沒有圖檔
直接就能玩
不過這次程式碼內我刪了一些東西
連接到資料庫的讀寫排行榜功能
被我拿掉了
