• 长大的彼得
    了解作者
  • HTML
    开发工具
  • 91KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • 1 积分
    下载积分
  • 0
    下载次数
  • 2020-12-17 09:50
    上传日期
简单贪吃蛇游戏代码,新手编程可以尝试。 css js写近了html页。
贪吃蛇.zip
  • 贪吃蛇
  • img
  • 微信图片_20201027205442.jpg
    89.1KB
  • js
  • index.html
    5.4KB
内容介绍
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>贪吃蛇游戏</title> <style type="text/css"> * { margin: 0; padding: 0; } .wrap { width: 600px; margin: 0 auto; position: relative; } p { position: absolute; left: 65%; top: 10%; } h1 { text-align: center; margin-bottom: 20px; } #score { text-align: center; font-size: 20px; } #snake_map { margin: 0 auto; border: 1px solid skyblue; } .row { height: 20px; } .col { height: 20px; width: 20px; box-sizing: border-box; border: 1px solid lightgray; background: rgb(250, 250, 250); float: left; } .activeSnake { background: black; } .egg { background: red; } #Pause { margin-left: 18%; border: 1px solid skyblue; color: white; background: skyblue; width: 50px; height: 30px; margin-bottom: 10px; border-radius: 5px; } #Start,#Refresh,#Speed { border: 1px solid skyblue; background: skyblue; color: white; width: 50px; height: 30px; border-radius: 5px; margin-left: 15px; } </style> </head> <body background="img/微信图片_20201027205442.jpg"> <div class="wrap"> <h1>贪吃蛇游戏</h1> <p style="font-size:20px;color:red"> score:<span id="score" style="color:black">0</span> </p > <input id="Pause" type="button" name="name" value="Pause"> <input id="Start" type="button" name="name" value="Start"> <input id="Refresh" type="button" name="name" value="Refresh"> <input id="Speed" type="button" name="name" value="Speed"> <div id="snake_map"> </div> </div> </body> <script type="text/javascript"> var score = document.getElementById('score'); var map = document.getElementById('snake_map'); var rowNumber = 25; var columnNumber = 20; var mapWidth = columnNumber * 20 + 'px'; var mapHeight = rowNumber * 20 + 'px'; map.style.width = mapWidth; map.style.height = mapHeight; var snakeDIVPosition = []; for ( var i = 0; i < rowNumber; i++) { var rowDIV = document.createElement('div'); rowDIV.className = 'row'; map.appendChild(rowDIV); var rowArray = []; for ( var j = 0; j < columnNumber; j++) { var columnDIV = document.createElement('div'); columnDIV.className = 'col'; rowDIV.appendChild(columnDIV); rowArray.push(columnDIV); } snakeDIVPosition.push(rowArray); } var snake = []; for ( var i = 0; i < 3; i++) { snakeDIVPosition[0][i].className = 'col activeSnake'; snake[i] = snakeDIVPosition[0][i]; } var x = 2; var y = 0; var scoreCount = 0; var eggX = 0; var eggY = 0; var direction = 'right'; var changeDir = true; var delayTimer = null; document.onkeydown = function(event) { if (!changeDir) { return; } event = event || window.event; if (direction == 'right' && event.keyCode == 37) { return; } if (direction == 'left' && event.keyCode == 39) { return; } if (direction == 'up' && event.keyCode == 40) { return; } if (direction == 'down' && event.keyCode == 38) { return; } switch (event.keyCode) { case 37: direction = 'left' break; case 38: direction = 'up'; break; case 39: direction = 'right'; break; case 40: direction = 'down'; break; } changeDir = false; delayTimer = setTimeout(function() { changeDir = true; }, 300); }; function snakeMove() { switch (direction) { case 'left': x--; break; case 'right': x++; break; case 'up': y--; break; case 'down': y++; break; }; if (x < 0 || y < 0 || x >= columnNumber || y >= rowNumber) { alert('Game Over!!!'); clearInterval(moveTimer); return; } for ( var i = 0; i < snake.length; i++) { if (snake[i] == snakeDIVPosition[y][x]) { alert('Game over!!!'); clearInterval(moveTimer); return; }; } if (eggX == x && eggY == y) { snakeDIVPosition[eggY][eggX].className = 'col activeSnake'; snake.push(snakeDIVPosition[eggY][eggX]); scoreCount++; score.innerHTML = scoreCount; createNewEgg(); } else { snake[0].className = 'col'; snake.shift(); snakeDIVPosition[y][x].className = 'col activeSnake'; snake.push(snakeDIVPosition[y][x]); }; }; var moveTimer = setInterval('snakeMove()', 300); function random(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }; function createNewEgg() { eggX = random(0, columnNumber - 1); eggY = random(0, rowNumber - 1); if (snakeDIVPosition[eggY][eggX].className == 'col activeSnake') { createNewEgg(); } else { snakeDIVPosition[eggY][eggX].className = 'col egg'; } }; createNewEgg(); var pause = document.getElementById('Pause'); var start = document.getElementById('Start'); var refresh = document.getElementById('Refresh'); var speed = document.getElementById('Speed'); pause.onclick = function() { clearInterval(moveTimer); }; start.onclick = function() { clearInterval(moveTimer); moveTimer = setInterval('snakeMove()', speed1); }; refresh.onclick = function() { window.location.reload(); }; var speed1 = 300; speed.onclick = function() { speed1 -= 20; clearInterval(moveTimer); moveTimer = setInterval('snakeMove()', speed1); }; </script> </html>
评论
    相关推荐