We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>贪吃蛇</title> </head> <style> html,body{ height: 100%; width: 100%; margin:0; padding: 0; } canvas{ height: 100%; width: 100%; } </style> <body> <canvas id="canvas" > Your browser does not support the canvas API. </canvas> </body> <script> const baseNum = 20; let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); var food; class Rect{ constructor(x, y, w, h, color){ this.x = x; this.y = y; this.w = w; this.h = h; this.color = color; } draw(){ ctx.beginPath(); ctx.fillStyle = this.color; ctx.rect(this.x, this.y ,this.w, this.h); ctx.fill(); ctx.stroke(); } } class Snake{ constructor(){ let snakeArray = []; for(let s=0;s < 4; s++){ let rect = new Rect(s * baseNum, 0, baseNum, baseNum, "gray"); snakeArray.unshift(rect); } let head = snakeArray[0]; head.color = "red"; this.head = head; this.snakeArray = snakeArray; this.direction = 39; } draw(){ for(let rect of this.snakeArray){ rect.draw(); } } move(){ let rect = new Rect(this.head.x, this.head.y, this.head.w, this.head.h, 'gray'); this.snakeArray.splice(1,0,rect); if(isEat()){ food = new getRandomFood(); }else{ this.snakeArray.pop(); } switch(this.direction){ case 37: // left case 65: this.head.x -= this.head.w; break; case 39: // right case 68: this.head.x += this.head.w; break; case 38: // up case 87: this.head.y -= this.head.h; break; case 40: //down case 83: this.head.y += this.head.h; break; default: break; } // 撞墙 if(this.head.x >= canvas.width || this.head.x < 0 || this.head.y >= canvas.height || this.head.y < 0){ // 游戏结束 clearInterval(timer) } // 撞自己 for(let s = 1; s < this.snakeArray.length; s++){ if(this.snakeArray[s].x == this.head.x && this.snakeArray[s].y == this.head.y){ // 游戏结束 clearInterval(timer) } } } } let snake = new Snake() snake.draw() var food = new getRandomFood() var timer = setInterval(() => { ctx.clearRect(0, 0, canvas.width, canvas.height); snake.move(); snake.draw(); food.draw(); }, 100); function isEat(){ if(snake.head.x == food.x && snake.head.y == food.y){ return true }else{ return false; } } document.onkeydown = function(e){ switch(e.keyCode){ case 37: // left { if(snake.direction !== 39) {// right snake.direction = 37; } break; } case 39: // right { if(snake.direction !== 37){ // left snake.direction = 39; } break; } case 38: //up { if(snake.direction !== 40){ //down snake.direction = 38; } break; } case 40: //down { if(snake.direction !== 38){ //up snake.direction = 40; } break; } } e.preventDefault(); } function randomBetween(min, max){ return Math.round(min + Math.random() * (max - min)) } function getRandomFood() { let isOnSnake = true; let rect; while(isOnSnake){ isOnSnake = false; let foodX = randomBetween(0, canvas.width / baseNum -1); let foodY = randomBetween(0, canvas.height / baseNum -1); rect = new Rect(foodX * baseNum, foodY * baseNum, baseNum, baseNum, "green"); for(let snakeBody of snake.snakeArray){ if(snakeBody.x == rect.x && snakeBody.y == rect.y){ isOnSnake = true break; } } } return rect; } </script> </html>
The text was updated successfully, but these errors were encountered:
No branches or pull requests
The text was updated successfully, but these errors were encountered: