您的位置：首页 > Web前端 > JavaScript

pc端贪吃蛇游戏

2016-09-02 07:44 295 查看

下面是用JavaScript语言来写的pc端贪吃蛇游戏，可以一起在探讨哦也可以直接打开压缩包链接 http://download.csdn.net/detail/jscyl/9619350，欢迎留言

<!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

h1 {
text-align: center;
}

#score {
text-align: center;
font-size: 50px;
}

#snakeMap {
margin: 0 auto;
border: 5px solid red;
}

.row {
height: 20px;
/*border: 1px solid blue;*/
}

.col {
height: 20px;
width: 20px;
border: 1px solid black;
float: left;
box-sizing: border-box;
}

.moveSnake {
background-color: green;
}

.food {
background-color: orange;
}
</style>
</head>

<body>
<h1>贪吃蛇</h1>
<h1>规则:按上下左右四个键控制方向</h1>
<div id="score">0</div>
<div id="snakeMap">

</div>
</body>
<script type="text/javascript">
var snakeMap = document.getElementById("snakeMap");
var score = document.getElementById("score");
var rowNumber = 20;
var colNumber = 14;
snakeMap.style.width = 20 * colNumber + "px";
snakeMap.style.height = 20 * rowNumber + "px";
var divsSnake = [];
for (var i = 0; i < rowNumber; i++) { //行
var rowDiv = document.createElement("div");
rowDiv.className = "row";
snakeMap.appendChild(rowDiv);
var rowArray = [];
for (var j = 0; j < colNumber; j++) { //列
var colDiv = document.createElement("div");
colDiv.className = "col";
rowDiv.appendChild(colDiv);
rowArray.push(colDiv);
}
divsSnake.push(rowArray);
}
var snakeBodys = []; //存储蛇身所占div
for (var i = 0; i < 3; i++) {
snakeBodys[i] = divsSnake[0][i];
divsSnake[0][i].className = "moveSnake col";
}
var directionSnake = "right";
var changeDirection = true;
var timeOut;
document.onkeydown = function(e) {
clearTimeout(timeOut);
//
if (!changeDirection) {
return;
}
var event1 = window.event || e;
if (directionSnake == "right" && event1.keyCode == 37) {
return;
} else if (directionSnake == "left" && event1.keyCode == 39) {
return;
} else if (directionSnake == "top" && event1.keyCode == 40) {} else if (directionSnake == "bottom" && event1.keyCode == 38) {
return;
}
switch (event1.keyCode) {
case 37:
{
directionSnake = "left";
break;
}
case 38:
{
directionSnake = "top";
break;
}
case 39:
{
directionSnake = "right";
break;
}
case 40:
{
directionSnake = "bottom";
break;
}
}
console.log(directionSnake);
changeDirection = false;
timeOut = setTimeout(function() {
changeDirection = true;
}, 300);
}
var x = 2;
var y = 0;
var foodX = 0;
var foodY = 0;
var scores = 0;
var timerMove = setInterval(function() {
clearTimeout(timeOut);
changeDirection = true;
switch (directionSnake) {
case "right":
{
x++;
break;
}
case "left":
{
x--;
break;
}
case "top":
{
y--;
break;
}
case "bottom":
{
y++;
break;
}
}
if (x < 0 || y < 0 || x >= colNumber || y >= rowNumber) {
clearTimeout(timerMove);
alert("gameover");
return;
}
for (var i = 0; i < snakeBodys.length; i++) {
if (snakeBodys[i] == divsSnake[y][x]) {
clearTimeout(timerMove);
alert("gameover");
return;
}
}
if (foodX == x && foodY == y) {
divsSnake[y][x].className = "moveSnake col";
snakeBodys.push(divsSnake[y][x]);
scores++;
score.innerHTML = scores;
ranFoods();
} else {
snakeBodys[0].className = "col";
snakeBodys.shift();
divsSnake[y][x].className = "col moveSnake";
snakeBodys.push(divsSnake[y][x]);
}
}, 500);

function randomFun(m, n) {
return Math.floor(Math.random() * (n - m + 1) + m);
}

function ranFoods() {
foodY = randomFun(0, rowNumber - 1);
foodX = randomFun(0, colNumber - 1);
if (divsSnake[foodY][foodX].className == "moveSnake col") {
ranFoods();
} else {
divsSnake[foodY][foodX].className = "food col";
}
}
ranFoods();
</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 游戏 PC端

相关文章推荐

新的分享

章节导航