jQuery实现的贪吃蛇小游戏资源-CSDN文库

共8个文件

jpg：4个

png：2个

js：1个

jquery

需积分: 13 163 浏览量 2023-03-29 17:37:34 上传评论收藏 98KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery贪吃蛇.zip （8个子文件）

snake

ball.png 6KB

right.jpg 2KB

down.jpg 2KB

body.png 5KB

left.jpg 2KB

up.jpg 2KB

snake.html 4KB

jquery.js 267KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="jquery.js"></script> </head> <body> <style> #main { width: 800px; } #main div { width: 38px; height: 38px; border: 1px solid #ccc; float: left; background-color: #f5f3e9; border-radius: 6px; } .head { background-repeat: no-repeat; background-size: auto 100%; } .body { background: url("snake/body.png") no-repeat; background-size: auto 100%; } .ball { background: url("snake/ball.png") no-repeat; background-size: auto 100%; } </style> <div id="main"></div> <script type="text/javascript"> var snake = new Array(); var col = 20; var row = 20; var direction = "right"; $(function () { var container = $("#main"); for (var i = 0; i < row; i++) { for (var j = 0; j < col; j++) { container.append("<div id='" + i + "-" + j + "'></div>") } } snake[0] = "0-1"; snake[1] = "0-0"; drawSnake(); createBall(); setInterval("move()", 300); $(document).keydown(function (e) { switch (e.keyCode) { //下 40 右39 上38 左37 case 37: if (direction == 'right') return; direction = 'left'; break; case 38: if (direction == 'down') return; direction = 'up' break; case 39: if (direction == 'left') return; direction = 'right' break; case 40: if (direction == 'up') return; direction = 'down' break; default: return; } move(); }) }) function drawSnake() { $(".head").css("background-image", ""); $(".head").removeClass("head"); $(".body").removeClass("body"); var head = $("#" + snake[0]); head.addClass("head"); head.css("background-image", "url(snake/" + direction + ".jpg)")//切换蛇头图片 for (var i = 1; i < snake.length; i++) { $("#" + snake[i]).addClass("body") } } function move() { var newSnake = new Array(); var head = snake[0].split("-"); var y = parseInt(head[0]);//行 var x = parseInt(head[1]);//列 switch (direction) { case 'up': y -= 1; break; case 'down': y += 1; break; case 'left': x -= 1; break; case 'right': x += 1 break; } if (x < 0 || x >= col || y < 0 || y >= row) {//撞墙 alert("Game Over"); window.location.reload(); } newSnake.push(y + "-" + x); var head = $("#" + newSnake[0]) if (head.hasClass("ball")) { createBall(); for (var i = 0; i < snake.length; i++) { newSnake.push(snake[i]); } } else { for (var i = 0; i < snake.length - 1; i++) { newSnake.push(snake[i]); } } if (head.hasClass("body")) {//吃到自己 alert("Game Over"); window.location.reload(); } snake = newSnake; drawSnake(); } function createBall() {//创建球 $(".ball").removeClass("ball") var r = random(0, row - 1); var c = random(0, col - 1); var ball = $("#" + r + "-" + c); while (ball.hasClass("head") || ball.hasClass("body")) {//球在蛇身上 r = random(0, row - 1); c = random(0, col - 1); ball = $("#" + r + "-" + c); } ball.addClass("ball"); return; } function random(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } </script> </body> </html>

评论收藏

内容反馈