html 代码
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title>
- </title>
- <style>
- body{ margin: 0; }
- </style>
- </head>
- <body>
- <script>
- // 绘制地图
- function Map() {
- var width = 800;
- var height = 400;
- this.show = function() {
- var tu = document.createElement("div");
- tu.style.width = width + 'px';
- tu.style.height = height + 'px';
- tu.style.background = '#ccc';
- document.body.appendChild(tu);
- }
- }
- // 绘制食物
- function Food() {
- var len = 20;
- this.xFood = 0;
- this.yFood = 0;
- this.piece = null;
- this.showfood = function() {
- if (this.piece === null) {
- this.piece = document.createElement('div');
- this.piece.style.width = this.piece.style.height = len + 'px';
- this.piece.style.background = 'green';
- this.piece.style.position = 'absolute';
- document.body.appendChild(this.piece);
- }
- this.xFood = Math.floor(Math.random() * 40); // 食物的权值坐标
- this.yFood = Math.floor(Math.random() * 20);
- this.piece.style.left = this.xFood * len + 'px';
- this.piece.style.top = this.yFood * len + 'px';
- }
- }
- // 绘制小蛇
- function Snake() {
- var len = 20;
- this.snakebody = [[0, 1, 'green', null], [1, 1, 'green', null], [2, 1, 'green', null], [3, 1, 'red', null]];
- this.redirect = 'right';
- this.showSnake = function() {
- for (var i = 0; i < this.snakebody.length; i++) {
- if (this.snakebody[i][3] === null) {
- this.snakebody[i][3] = document.createElement('div');
- }
- this.snakebody[i][3].style.width = len + 'px';
- this.snakebody[i][3].style.height = len + 'px';
- this.snakebody[i][3].style.background = this.snakebody[i][2];
- this.snakebody[i][3].style.position = 'absolute';
- this.snakebody[i][3].style.left = this.snakebody[i][0] * len + 'px';
- this.snakebody[i][3].style.top = this.snakebody[i][1] * len + 'px';
- document.body.appendChild(this.snakebody[i][3]);
- }
- }
- // 移动小蛇
- this.moveSnake = function() {
- for (var i = 0; i < this.snakebody.length - 1; i++) {
- this.snakebody[i][0] = this.snakebody[i + 1][0];
- this.snakebody[i][1] = this.snakebody[i + 1][1];
- }
- if (this.redirect == 'right') {
- this.snakebody[this.snakebody.length - 1][0] += 1;
- }
- if (this.redirect == 'left') {
- this.snakebody[this.snakebody.length - 1][0] -= 1;
- }
- if (this.redirect == 'up') {
- this.snakebody[this.snakebody.length - 1][1] -= 1;
- }
- if (this.redirect == 'down') {
- this.snakebody[this.snakebody.length - 1][1] += 1;
- }
- // 判断蛇头碰到食物
- var xSnake = this.snakebody[this.snakebody.length - 1][0];
- var ySnake = this.snakebody[this.snakebody.length - 1][1];
- if (xSnake == food.xFood && ySnake == food.yFood) {
- // 吃食物 增加蛇节
- var newjie = [this.snakebody[0][0], this.snakebody[0][1], 'green', null];
- this.snakebody.unshift(newjie);
- food.showfood();
- }
- if (xSnake < 0 || xSnake > 39 || ySnake < 0 || ySnake > 19) {
- alert('Game Over');
- clearInterval(timer);
- return false;
- }
- for (var k = 0; k < this.snakebody.length - 1; k++) {
- if (this.snakebody[k][0] == xSnake && this.snakebody[k][1] == ySnake) {
- alert('咬到自己了');
- clearInterval(timer);
- return false;
- }
- }
- this.showSnake();
- }
- }
- window.onload = function() {
- var map = new Map();
- map.show();
- food = new Food(); // 声明为全局对象
- food.showfood();
- snake = new Snake();
- snake.showSnake();
- timer = setInterval("snake.moveSnake()", 500);
- document.onkeydown = function(e) {
- var num = e.keyCode;
- if (num == 38) {
- snake.redirect = 'up';
- }
- if (num == 40) {
- snake.redirect = 'down';
- }
- if (num == 37) {
- snake.redirect = 'left';
- }
- if (num == 39) {
- snake.redirect = 'right';
- }
- }
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/30314/4f62a3abecd78daf19f056766c18d838.html