网站首页做后台链接,自己做网站需要多少资金,上海网站营销推,营销网站试用玩法介绍
点击开始游戏后#xff0c;使用键盘上的↑↓←→控制移动#xff0c;吃到食物增加长度#xff0c;碰到墙壁或碰到自身就游戏结束
代码实现
代码比较简单#xff0c;直接阅读注释即可#xff0c;复制即用
!DOCTYPE html
html langen使用键盘上的↑↓←→控制移动吃到食物增加长度碰到墙壁或碰到自身就游戏结束
代码实现
代码比较简单直接阅读注释即可复制即用
!DOCTYPE html
html langen
headmeta charsetUTF-8titleSnake Game/titlestylebody {margin: 0;overflow: hidden;}canvas {display: block;position: absolute;top: 0;left: 0;z-index: 1;background-color: #000;}.start-screen {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8);color: white;text-align: center;z-index: 2;display: flex;align-items: center;justify-content: center;font-size: 24px;}button {font-size: 24px;padding: 10px 20px;cursor: pointer;}/style
/head
bodydiv classstart-screenh1Snake Game/h1button idstartButtonStart Game/button/divcanvas idgameCanvas width800 height600/canvasscriptconst canvas document.getElementById(gameCanvas);const ctx canvas.getContext(2d);// 设置 Canvas 为全屏canvas.width window.innerWidth;canvas.height window.innerHeight;// 方块大小const blockSize 20;// 游戏状态let snake [{ x: 100, y: 100 }];let food { x: 200, y: 200 };let direction right;let score 0;let isRunning false;// 游戏速度const speed 100;// 绘制蛇function drawSnake() {ctx.fillStyle #0f0;snake.forEach(segment {ctx.fillRect(segment.x, segment.y, blockSize, blockSize);});}// 绘制食物function drawFood() {ctx.fillStyle #f00;ctx.fillRect(food.x, food.y, blockSize, blockSize);}// 检查碰撞function checkCollision() {// 检查蛇是否撞墙if (snake[0].x 0 || snake[0].x canvas.width || snake[0].y 0 || snake[0].y canvas.height) {alert(Game Over!);isRunning false;return;}// 检查蛇是否撞到自己for (let i 1; i snake.length; i) {if (snake[0].x snake[i].x snake[0].y snake[i].y) {alert(Game Over!);isRunning false;return;}}// 检查蛇是否吃到食物if (snake[0].x food.x snake[0].y food.y) {score;placeFood();} else {snake.pop();}}// 放置新的食物function placeFood() {food {x: Math.floor(Math.random() * (canvas.width / blockSize)) * blockSize,y: Math.floor(Math.random() * (canvas.height / blockSize)) * blockSize};}// 更新游戏状态function update() {if (!isRunning) return;let newX snake[0].x;let newY snake[0].y;if (direction left) newX - blockSize;if (direction right) newX blockSize;if (direction up) newY - blockSize;if (direction down) newY blockSize;snake.unshift({ x: newX, y: newY });checkCollision();}// 渲染游戏画面function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);drawSnake();drawFood();}// 游戏主循环function gameLoop() {update();draw();setTimeout(gameLoop, speed);}// 键盘事件function handleKeyPress(event) {if (event.key ArrowLeft direction ! right) direction left;if (event.key ArrowRight direction ! left) direction right;if (event.key ArrowUp direction ! down) direction up;if (event.key ArrowDown direction ! up) direction down;}// 开始按钮事件document.getElementById(startButton).addEventListener(click, () {const startScreen document.querySelector(.start-screen);startScreen.style.display none;// 添加键盘事件监听document.addEventListener(keydown, handleKeyPress);isRunning true;placeFood();gameLoop();});// 游戏结束时移除键盘事件监听window.addEventListener(beforeunload, () {document.removeEventListener(keydown, handleKeyPress);});/script
/body
/html
